Ako zmeniť farby písma webových stránok pomocou CSS

CSS vám dáva kontrolu nad vzhľadom textu na webových stránkach, ktoré zostavujete a spravujete. V tejto príručke vám ukážeme, ako zmeniť farby písma v CSS pomocou farebných kľúčových slov, hexadecimálnych kódov farieb alebo čísel farieb RGB.

Ako používať štýly CSS na zmenu farby písma

Hodnoty farieb možno vyjadriť ako kľúčové slová pre farbu, hexadecimálne čísla farieb alebo čísla farieb RGB. Pre túto lekciu budete potrebovať dokument HTML, aby ste videli zmeny v CSS, a samostatný súbor CSS, ktorý je pripojený k uvedenému dokumentu. Konkrétne sa pozrieme na odsek.

Na zmenu farieb písma použite farebné kľúčové slová

Ak chcete zmeniť farbu textu pre každý odsek v súbore HTML, prejdite na externú šablónu so štýlmi a zadajte text p {}. Umiestnite farba vlastnosť v štýle, za ktorým nasleduje dvojbodka, ako p {farba:}. Potom za vlastnosť pridajte svoju farebnú hodnotu a zakončte ju bodkočiarkou. V tomto príklade sa text odseku zmení na čiernu farbu:

p {
farba: čierna;
}

Na zmenu farieb písma použite hexadecimálne hodnoty

Použitie farebných kľúčových slov na zmenu textu na červenú, zelenú, modrú alebo inú základnú farbu vám neposkytne presnosť, ktorú možno hľadáte pri vytváraní rôznych odtieňov týchto farieb. Na to slúžia hexadecimálne hodnoty.

Tento štýl CSS možno použiť na zafarbenie odsekov čiernou farbou, pretože hexadecimálny kód # 000000 sa prekladá do čierneho. Môžete dokonca použiť skratku s touto hexadecimálnou hodnotou a napísať ju ako # 000 s rovnakými výsledkami.

p {
farba: # 000000;
}

Šesťhranné hodnoty fungujú dobre, ak potrebujete farbu, ktorá nie je jednoducho čierna alebo biela. Tento hexadecimálny kód vám napríklad umožňuje nastaviť veľmi špecifický odtieň modrej - strednú, bridlicovú modrú:

p {
farba: # 2f5687;
}

Hex funguje tak, že sa hodnoty RGB (červená, zelená, modrá) farby nastavujú osobitne so základnými šestnástimi hodnotami. Preto obsahujú písmená A cez F okrem číslic 0 cez 9.

Každá farba, červená, zelená a modrá, dostáva svoju vlastnú dvojcifernú hodnotu. 00 je najnižšia možná hodnota, zatiaľ čo FF je najvyšší. Farby sú uvedené v poradí RGB v šestnástke, takže prvé dve číslice predstavujú červenú hodnotu atď.

Na zmenu farieb písma použite hodnoty farieb RGBA

Nakoniec môžete použiť hodnoty farieb RGBA na úpravu farieb písma. RGCA je podporovaný vo všetkých moderných prehľadávačoch, takže tieto hodnoty môžete použiť s istotou, že bude fungovať pre väčšinu divákov, ale môžete tiež nastaviť ľahkú alternatívu.

Táto hodnota RGBA je rovnaká ako vyššie uvedená bridlicová modrá farba:

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

Prvé tri hodnoty nastavujú červenú, zelenú a modrú hodnotu a konečné číslo je nastavením alfa pre priehľadnosť. Nastavenie alfa je nastavené na 1, čo znamená 100 percent, takže táto farba nemá priehľadnosť. Ak nastavíte túto hodnotu na desatinné číslo, napríklad 0,85, bude to znamenať nepriehľadnosť na 85 percent a farba bude mierne priehľadná.

Ak chcete odrážať hodnoty farieb, skopírujte tento kód CSS:

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

Táto syntax nastaví najskôr hexadecimálny kód a potom túto hodnotu prepíše číslom RGBA. To znamená, že každý starší prehliadač, ktorý nepodporuje RGBA, dostane prvú hodnotu a druhú bude ignorovať.

Je dôležité mať na pamäti, že vlastnosť color funguje na ľubovoľnom textovom prvku HTML v CSS. Môžete napríklad zmeniť všetky farby odkazov. V tomto príklade budú vaše odkazy jasne zelené:

a {
farba: # 16c616;
}

Toto funguje aj s viacerými prvkami súčasne. Môžete nastaviť každú úroveň titulu súčasne. Týmto napríklad nastavíte všetky prvky názvu na polnočnú modrú farbu:

h1, h2, h3, h4, h5, h6 {
farba: # 020833;
}

Prísť s hexadecimálnymi alebo RGBA hodnotami pre vaše farby nie je vždy ľahké. Väčšina webových dizajnérov použije na vygenerovanie presných kódov program na úpravu obrázkov, napríklad Photoshop alebo GIMP. Pohodlné nástroje na výber farieb nájdete tiež online tento od w3schools.

Iné spôsoby, ako upraviť stránku HTML

Farby písma je možné meniť pomocou externej šablóny štýlov, internej šablóny štýlov alebo vloženého štýlu v dokumente HTML. Najlepšie postupy však určujú, že pre svoje štýly CSS by ste mali použiť externú šablónu štýlov.

Interná šablóna štýlov, čo sú štýly napísané priamo do „hlavičky“ dokumentu, sa zvyčajne používa iba pre malé jednostránkové webové stránky. Vloženým štýlom by ste sa mali vyhnúť, pretože sa podobajú starým značkám „písma“, ktorým sme sa venovali pred mnohými rokmi. Tieto vložené štýly veľmi ťažko spravujú štýl písma, pretože ich musíte meniť pri každej inštancii vloženého štýlu.