Hvernig á að breyta Website letur litum með CSS

Góð typographical hönnun er mikilvægur hluti af árangursríkri vefsíðu. CSS gefur þér mikla stjórn á útliti texta á vefsíðum vefsíðum sem þú byggir. Þetta felur í sér hæfni til að breyta litum hvaða letur sem þú notar.

Lita letur má breyta með því að nota ytri stíll lak , innri stíll lak , eða það má breyta með því að nota innsníða stíl innan HTML skjal. Bestu venjur ráðast af því að þú ættir að nota ytri stíll lak fyrir CSS stíl þína. Innri stíll lak, sem eru stafir skrifaðar beint í "höfuð" skjalsins, eru almennt aðeins notaðar fyrir litlar vefsíður á einum síðu. Forðast skal inline stíl þar sem þau eru í tengslum við gamla "letur" merkin sem við fjallaðum um fyrir mörgum árum. Þessar inline stíll gerir það mjög erfitt að stjórna leturstíl þar sem þú þarft að breyta þeim í hverju tilviki inline stíl.

Í þessari grein lærir þú hvernig á að breyta leturlitinu með því að nota utanaðkomandi stíll lak og stíl sem er notaður í málsmerki. Þú getur sótt sömu stíl eign til að breyta letur lit á hvaða merki sem umlykur texta, þar á meðal tag.

Bæti upp stílum til að breyta leturlitum

Fyrir þetta dæmi þarftu að hafa HTML skjal fyrir vefsíðuna þína og sérstaka CSS skrá sem fylgir því skjali. HTML skjalið myndi líklega gera nokkra þætti í henni. Sá sem við erum áhyggjur af í þeim tilgangi að þessi grein er málsgreinin.

Hér er hvernig á að breyta leturlitum texta innan merkjamerkja með því að nota ytri stíllinn þinn.

Litur gildi geta verið lýst sem lit leitarorð, RGB lit númer eða hexadecimal lit númer.

1. Bættu við stiltegundinni fyrir liðarmerkið:
   1. p {}
2. Settu litareigininn í stíl. Setjið ristil eftir þessi eign:
   1. p {litur:}
3. Bættu síðan við lit gildi eftir eignina. Vertu viss um að ljúka þessu gildi með hálf-ristli:
   1. p {litur: svartur;}

Málsgreinar á síðunni þinni verða nú svartir.

Þetta dæmi notar lit leitarorð - "svartur". Það er ein leið til að bæta við lit í CSS, en það er mjög takmarkandi. Notkun leitarorða fyrir "svart" og "hvítt" er einfalt þar sem þessi tvö litir eru mjög sérstakar en hvað gerist ef þú notar leitarorð eins og "rautt", "blátt" eða "grænt"? Nákvæmlega hvaða skugga af rauðu, bláu eða grænu verður þú að fá? Þú getur ekki tilgreint nákvæmlega hvaða litaskugga þú vilt með leitarorðum. Þetta er ástæðan fyrir því að hexadecimal gildi eru oft notaðar í stað litaskeyta.

p {litur: # 000000; }

Þessi CSS-stíl myndi einnig stilla lit málsgreinar þínar í svörtu vegna þess að hex númerið # 000000 þýðir svart. Þú gætir jafnvel notað skothylki með því hex gildi og skrifið það sem bara # 000 og þú myndir fá það sama.

Eins og áður hefur verið getið, vinna hex gildi vel þegar þú þarft lit sem er ekki einfaldlega svartur eða hvítur. Hér er dæmi:

p {lit: # 2f5687; }

Þessi hex-gildi myndi setja málsgreinar í bláa lit, en ólíkt leitarorðinu "blátt", þá gefur þetta strikamerki þér möguleika á að setja mjög sérstakan skugga af bláu - líklega sá sem hönnuður velur þegar þeir búa til viðmótið fyrir þetta vefsvæði. Í þessu tilviki, liturinn væri miðjan svið, ákveða eins og blár.

Að lokum er hægt að nota RGBA-litaval fyrir leturgerðarlitir eins og heilbrigður. RGCA er nú studd í öllum nútíma vafra, þannig að þú getur notað þessi gildi með litlu áhyggjum að það verði ekki studd í vafra, en þú getur einnig stillt auðveldan fallhlið.

p {litur: rgba (47,86,135,1); }

Þetta RGBA gildi er það sama og ákveða bláa liturinn sem tilgreindur var áður. Fyrstu 3 gildin setja rautt, grænt og blátt gildi og endanlegt númer er alfa stillingin. Það er stillt á "1", sem þýðir "100%", svo þessi litur myndi ekki hafa gagnsæi. Ef þú setur það í tugabrot, eins og .85, myndi það þýða í 85% ógagnsæi og liturinn væri örlítið gagnsæ.

Ef þú vilt bulletproof lit gildi þín, myndir þú gera þetta:

p {
litur: # 2f5687;
litur: rgba (47,86,135,1);
}

Þetta setningafræði setur sexkóðann fyrst. Það skrifar þá það gildi með RGBA númerinu. Þetta þýðir að allir eldri vafrar sem styðja ekki RGBA myndu fá fyrsta gildi og hunsa annað. Nútíma vafrar myndu nota annað á CSS Cascade.