Hea tüpograafiline disain on eduka veebisaidi oluline osa. CSS annab teile täieliku kontrolli tekstide välimuse üle veebisaitidel, mida teete. See hõlmab võimalust muuta kõigi kasutatavate fontide värvi.
Fontide värve saab muuta, kasutades välist stiililehte , sisemist stiililehte või seda võib HTML-dokumendis sisseehitatud kujundusega muuta. Parimad tavad nõuavad, et kasutaksite oma CSS-i stiilide jaoks välist stiililehte. Sisemise stiili lehte, mis on dokumendi "pea" otseselt kirjutatud stiilid, kasutatakse tavaliselt ainult väikeste üheleheküljeliste saitide jaoks. Vältige sisemist stiili, kuna need on sarnased vanade "font" -tekstidega, millega me tegeleme paljude aastate eest. Need sisestatud stiilid muudavad fondi stiili haldamise väga raskeks, sest teil on vaja neid igal stiilis sisselülitamisel muuta.
Selles artiklis saate teada, kuidas fondi värvi muuta välise laadilehe ja stiili abil, mida kasutatakse lõiketekstis. Võite kasutada sama stiilis vara, et muuta fondi värvi teksti, mis ümbritseb teksti, sealhulgas
-märgi.Fontide värvi muutmiseks stiilide lisamine
Selles näites peate oma lehe märgistamiseks HTML-dokumendi ja selle dokumendile lisatava eraldi CSS-faili olema. HTML-dokument tooks tõenäoliselt kaasa selle hulga elemente. Käesoleva artikli eesmärgiks on see, mis meil on seotud käesoleva lõike eesmärgiga.
Siin on, kuidas muuta oma välise stiililehega parameetrite märgiste teksti värvi.
Värviväärtusi saab väljendada värviliste märksõnade, RGB-värviliste numbrite või kuueteistkümnenda värviliste numbritega.
- Lisage lõiketeksti stiili atribuut:
- p {}
- Asetage värviomand stiilis. Asetage käärsoole pärast seda vara:
- p {värv:}
- Seejärel lisage oma vara värviväärtus. Veenduge, et see väärtus on poolkolonniga:
- p {värv: must;}
Teie lehe lõiked on nüüd mustad.
Selles näites kasutatakse värvilist märksõna - "must". See on CSS-i värvi lisamise võimalus, kuid see on väga piiratud. Mustade ja valgete märksõnade kasutamine on lihtne, kuna need kaks värvi on väga spetsiifilised, kuid mis juhtub, kui kasutate märksõnu nagu "punane", "sinine" või "roheline"? Täpselt, mis punase, sinise või rohelise tooni saate? Märksõnadega täpselt ei saa täpselt määrata, millise värvitooni soovite. Sellepärast kasutatakse värviliste märksõnade asemel sageli kuueteistkümnemaid väärtusi.
p {värv: # 000000; }
See CSS-stiil määrab ka teie lõikude värvi mustale, sest # 000000 kuuekordne kood on must. Võite isegi kasutada lühinimekirja selle hex väärtusega ja kirjutada see lihtsalt # 000 ja sa saaksid sama asja.
Nagu me juba mainisime, hex väärtused töötavad hästi, kui vajate värvi, mis ei ole lihtsalt must või valge. Siin on näide:
p {värv: # 2f5687; }
See kuueteistkümne väärtus seab lõigud sinisele värvile, kuid erinevalt märksõnast "sinine" annab see hex-kood võimaluse määrata väga konkreetne sinine toon - tõenäoliselt see, mida disainer valib, kui nad loovad liidese see veebileht. Sellisel juhul oleks värv keskmise vahemikuga kiltkivi sarnane sinine.
Lõpuks võite kasutada ka RGBA värviväärtusi fontide värvide jaoks. RGCA-d toetatakse nüüd kõigis kaasaegsetes brauserites, nii et saate neid väärtusi kasutada vähese murega, et seda ei toetata veebibrauseris, kuid võite ka hõlpsalt varundada.
p {värv: rgba (47,86,135,1); }
See RGBA väärtus on sama mis eelnevalt määratletud kiltkivi sinine värv. Esimesed 3 väärtused määravad punased, rohelised ja sinine väärtused ning lõplik number on alfa-seade. See on seatud väärtusele "1", mis tähendab "100%", nii et see värv ei oleks läbipaistmatut. Kui määrate kümnendkohani, näiteks .85, oleks see läbipaistmatuseks 85% ja värv oleks veidi läbipaistev.
Kui soovite oma värviväärtusi kuulikindlalt kaitsta, peaksite seda tegema:
p {
värv: # 2f5687;
värv: rgba (47,86,135,1);
}
See süntaks määrab esmalt hex-koodi. Seejärel kirjutab see väärtus üle RGBA numbrile. See tähendab, et iga vanem brauser, mis ei toeta RGBA, saab esimese väärtuse ja ignoreerib teist. Kaasaegsed brauserid kasutavad teist CSS-i kaskaadi kohta.