Dobrý typografický dizajn je dôležitou súčasťou úspešnej webovej stránky. CSS vám dáva skvelú kontrolu nad zobrazením textu na webových stránkach, ktoré vytvárate. To zahŕňa možnosť zmeniť farbu akéhokoľvek písma, ktoré používate.
Nižšie sa pozrieme na zmenu farby písma pomocou externého štýlu a štýlu, ktorý sa používa v značke odseku. Môžete použiť rovnakú vlastnosť štýlu na zmenu farby písma na ľubovoľnej značke, ktorá obklopuje text, vrátane textu tag.
Pridanie štýlov na zmenu farby písma
V tomto príklade je potrebné mať k dispozícii dokument HTML, ktorý zobrazuje zmeny CSS a samostatný súbor CSS, ktorý je pripojený k danému dokumentu. Pozrime sa na prvok odseku, konkrétne.
Ak chcete zmeniť farbu textu pre každý odsek vo vašom súbore HTML, prejdite na externý štýl listu a zadajte ho p {}, Umiestnite farba majetok vo štýle nasledovaný dvojbodkou, ako p {farba:}, Potom pridajte farebnú hodnotu za vlastnosť a skončí ju bodkočiarkou: p {farba: čierna;}.
Hodnoty farieb je možné vyjadriť ako farebné kľúčové slová, čísla farieb RGB alebo čísla hexadecimálnych farieb. V našom príklade sa text odseku zmení na čiernu farbu.
Ak však chcete zmeniť farbu textu na zelenú, modrú, červenú atď., Pomocou farebných kľúčových slov nedáte flexibilitu, ktorú by ste mohli chcieť vytvoriť v rôznych odtieňoch. To je miesto, kde vstupujú hexadecimálne hodnoty.
p {farba: # 000000; }
Tento štýl CSS sa môže použiť na farbenie vašich odsekov čiernych, pretože hexadecimálny kód # 000000 sa prekladá do čiernej farby. Môžete dokonca použiť skratku s touto hexadeckovou hodnotou a písať ju ako # 000 s rovnakými výsledkami. p {farba: # 2f5687; }
Ako sme uviedli vyššie, hexadecimálne hodnoty fungujú dobre, keď potrebujete farbu, ktorá nie je len čierna alebo biela. Vyššie uvedená hodnota CSS hex by nastavila odseky na modrú farbu, ale na rozdiel od kľúčového slova "modrý", tento hexadecimálny kód vám dáva možnosť nastaviť veľmi špecifický odtieň modrej, v tomto prípade modrej , p {farba: rgba (47,86,135,1); }
Nakoniec môžete použiť aj hodnoty farieb RGBA pre farby písma. Funkcia RGCA je podporovaná vo všetkých moderných prehliadačoch, takže tieto hodnoty môžete použiť s istotou, že to bude fungovať pre väčšinu divákov, ale môžete tiež nastaviť ľahkú zálohu. Táto hodnota RGBA je rovnaká ako predtým špecifikovaná biela modrá farba. Prvé tri hodnoty nastavujú hodnoty Červená, Zelená a Modrá a konečným číslom je nastavenie alfa pre priehľadnosť. Nastavenie alfa je nastavené na hodnotu 1 na hodnotu 100 percent, takže táto farba nemá priehľadnosť. Ak nastavíte túto hodnotu na desiatkové číslo, napríklad 0,85, prejde na 85% opacity a farba bude mierne transparentná. p { farba: # 2f5687; farba: rgba (47,86,135,1);}
Ak chcete odrážať vaše farebné hodnoty, napodobte vyššie uvedený kód CSS. Táto syntax najprv nastaví hexadecimálny kód a potom prepíše túto hodnotu s číslom RGBA. To znamená, že akýkoľvek starší prehliadač, ktorý nepodporuje RGBA, dostane prvú hodnotu a druhú ignoruje. Farby písma je možné meniť pomocou externého štýlu, interného štýlu štýlov alebo vloženého štýlu v dokumente HTML. Najlepšie postupy však vyžadujú, aby ste pre svoje štýly CSS používali externý štýl štýlov. Vnútorný štýl písma, ktoré sú štýly napísané priamo v hlavičke vášho dokumentu, sa vo všeobecnosti používajú iba pre malé webové stránky s jedným stránkom. Inline štýly by sa mali vyhnúť, pretože sú podobné starým značkám "font", ktorým sme sa zaoberali už pred mnohými rokmi. Tieto inline štýly veľmi sťažujú zvládnutie štýlu písma, pretože ich musíte zmeniť v každej inštancii inline štýlu. Iné spôsoby štýlu HTML stránky
