See Selgitatud õpetab, kuidas muuta veebilehe taustavärvi muutes selle HTML-i.
1
Määrake taustavärv, mida soovite kasutada. HTML-i värvid dikteerivad koodid toonipõhiselt. Võite kasutada tasuta W3Schoolsi HTML-i värvivalijat, et leida soovitud värvi(de) koodi(d): minge oma arvuti veebibrauseris aadressile https://www.w3schools.com/colors/colors_picker.asp. Klõpsake jaotises “Värvi valimine” põhivärvi, mida soovite kasutada.Valige lehe paremas servas toon.Kirjutage üles varjust paremal olev numbrikood.
2
Avage oma HTML-fail oma lemmiktekstiredaktoris. Alates HTML5-st ei toetata enam HTML-atribuuti
3
Lisage oma dokumendile päis “html”. Kogu teie lehe stiiliteave (sh taustavärv) tuleks kodeerida
-märgendite vahele:
4
Looge “stiili” siltide vahele tühi rida. Sildi
kohale peaks olema rida, millele saate teavet lisada.
5
Lisage element “keha”. Tippige siltide
vahele järgmine tekst:body { }Kõik, mida teete CSS-i elemendiga “body”, mõjutab kogu lehte.Jäta see samm vahele, kui soovite luua gradienti.
6
Otsige üles oma dokumendi “html” päis. See peaks asuma dokumendi ülaosas.
7
Lisage elemendile “body” atribuut “taustavärv”. Sisestage taustavärv: korpuse sulgude vahele. Nüüd peaks teil olema järgmine element “body”:body { background-color: }Selles kontekstis töötab ainult üks “värvi” kirjapilt; siin ei saa kasutada “värvi”.
8
Lisage soovitud taustavärv atribuudile “taustavärv”. Selleks sisestage valitud värvi numbriline kood ja seejärel semikoolon elemendi “background-color:” kõrvale. Näiteks selleks, et määrata oma lehe taust roosaks, peaks teil olema järgmine tekst:body { background-color: #d24dff;}
9
Vaadake üle oma stiiliteave. Siinkohal peaks teie HTML-dokumendi päis sarnanema järgmisega:
10
Kasutage “taustavärvi”, et rakendada taustavärve teistele elementidele. Nii nagu määrate selle kehaelemendis, saate kasutada “taustavärvi” muude elementide (nt päised, lõigud jne) tausta määratlemiseks. Näiteks põhipäisele (
) või lõigule (
) taustavärvi rakendamiseks peaks teil olema midagi, mis sarnaneb järgmise koodiga:
Päis rohelise taustaga
Valge taustaga lõik
11
Otsige üles oma dokumendi “html” päis. See peaks asuma dokumendi ülaosas.
12
Mõistke selle protsessi põhisüntaksit. Gradiendi tegemisel on vaja kahte teavet: alguspunkt/nurk ja värvid, mille vahel gradient üle läheb. Saate valida mitu värvi, et gradient liiguks nende kõigi vahel, ja saate määrata gradiendi suuna või nurga.background: lineaarne gradient(suund/nurk, värv1, värv2, värv3 jne);
13
Tehke vertikaalne gradient. Kui te suunda ei määra, liigub gradient ülevalt alla. Gradiendi loomiseks lisage
siltide vahele järgmine kood:html { min-height: 100%; }body { background: -webkit-linear-gradient(#93B874, #C9DCB9); taust: -o-lineaarne gradient(#93B874, #C9DCB9); taust: -moz-linear-gradient(#93B874, #C9DCB9); taust: lineaarne gradient(#93B874, #C9DCB9); taustavärv: #93B874; }Erinevates brauserites on gradiendifunktsiooni juurutused erinevad, seega peate lisama koodi mitu versiooni.
14
Tee suunaline gradient. Kui soovite pigem luua gradiendi, mis ei ole rangelt vertikaalne, saate värvinihke kuvamise muutmiseks lisada sellele suuna. Selleks tippige siltide
vahele järgmine tekst:html { min-height: 100%;}body { background: -webkit-linear-gradient(left, #93B874, #C9DCB9); taust: -o-lineaarne gradient(paremal, #93B874, #C9DCB9); taust: -moz-linear-gradient(paremal, #93B874, #C9DCB9); taust: lineaarne gradient (paremale, #93B874, #C9DCB9); taustavärv: #93B874; }Saate mängida märgenditega “vasak” ja “parem”, et katsetada oma gradiendi jaoks erinevaid suundi.
15
Kasutage gradiendi reguleerimiseks muid omadusi. Gradientidega saate teha palju muudki. Näiteks võite mitte ainult lisada rohkem kui kahte värvi, vaid ka iga värvi järele lisada protsendi. See võimaldab teil määrata iga värvisegmendi vahekauguse. Siin on seda põhimõtet kasutav gradiendi näidis: taust: lineaarne gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
16
Lisage oma värvidele läbipaistvust. See muudab värvi tuhmunud. Kasutage sama värvi, et värvist tuhmuda. Värvi määramiseks peate kasutama funktsiooni rgba(). Lõppväärtus määrab läbipaistvuse: 0 tahke ja 1 läbipaistva jaoks.taust: lineaarne gradient(paremale, rgba(147,184,116,0), rgba(147,184,116,1));
17
Vaadake oma täidetud kood üle. Teie veebisaidi taustaks värvigradiendi loomise kood näeb välja umbes selline:
18
Otsige üles oma dokumendi “html” päis. See peaks asuma dokumendi ülaosas.
19
Lisage animatsiooni omadus elemendile “body”. Tippige “keha {” sulu alla ja sulgeva sulu kohale järgmine tekst: -webkit-animation: colorchange 60s infinite; animatsioon: värvimuutus 60s infinite;ülemine tekstirida on Chromiumipõhiste brauserite jaoks, alumine tekstirida aga muude brauserite jaoks.
20
Lisage animatsioonile oma värve. Nüüd saate kasutada reeglit @keyframes, et määrata taustavärvid, mille kaudu te tsüklit kasutate, ja ka iga värvi lehel ilmumise aja. Jällegi on teil vaja erinevate brauserikomplektide jaoks eraldi kirjeid. Sisestage suletud “keha” sulu alla järgmised koodiread:@-webkit-keyframes colorchange { 0% {background: #33FFF3;} 25% {background: #78281F;} 50% {background: #117A65;} 75% {taust: #DC7633;} 100% {taust: #9B59B6;}}@keyframesi värvimuutus { 0% {taust: #33FFF3;} 25% {taust: #78281F;} 50% {taust: #117A65;} 75% {background: #DC7633;} 100% {background: #9B59B6;}}Pange tähele, et kahel reeglil (@-webkit-keyframes ja @keyframes on samad taustavärvid ja protsendid. Soovite, et need jääksid ühtseks, et kogemus on kõigis brauserites sama. Protsendid (0%, 25% jne) on animatsiooni kogupikkusest (60 s). Lehe laadimisel on tausta värv 0% (#33FFF3). animatsiooni on mängitud 25% 60 sekundist, taustaks muutub #7821F ja nii edasi. Saate muuta aegu ja värve, et need sobiksid soovitud tulemusega.
21
Vaadake oma kood üle. Kogu muutuva taustavärvi kood peaks sarnanema järgmisega: