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 webových stránok, ktoré vytvárate. To zahŕňa možnosť zmeniť farbu akéhokoľvek písma, ktoré používate.
Farby písma je možné meniť pomocou externého štýlu , interného štýlu štýlov , alebo sa môže zmeniť pomocou inline stylingu v dokumente HTML. Najlepšie postupy vyžadujú, aby ste pre svoje štýly CSS používali externý štýl. 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é 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 štýly inline spôsobujú, že je veľmi ťažké spravovať štýl písma, pretože by ste ich museli meniť v každej inštancii inline štýlu.
V tomto článku sa dozviete, ako zmeniť farbu 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 značky
.Pridanie štýlov na zmenu farby písma
V tomto príklade by ste museli mať HTML dokument pre značku stránky a samostatný súbor CSS, ktorý je pripojený k tomuto dokumentu. Dokument HTML by pravdepodobne vytvoril niekoľko prvkov v ňom. Jednou, na ktorú sa zaoberáme na účely tohto článku, je prvok odstavca.
Tu je postup, ako zmeniť farbu písma textu vo vnútri značiek odseku pomocou externého štýlu.
Hodnoty farieb je možné vyjadriť ako farebné kľúčové slová, čísla farieb RGB alebo čísla hexadecimálnych farieb.
- Pridajte atribút štýlu pre značku odseku:
- p {}
- Vlastnosť farby umiestnite do štýlu. Umiestnite dvojbodku po tejto vlastnosti:
- p {farba:}
- Potom pridajte farbu hodnotu za vlastnosť. Uistite sa, že túto hodnotu ukončíte s bodkočiarkou:
- p {farba: čierna;}
Odseky vo vašej stránke budú teraz čierne.
Tento príklad používa farebné kľúčové slovo - "čierne". To je jeden spôsob, ako pridať farbu v CSS, ale je to veľmi obmedzujúce. Používanie kľúčových slov pre "čierne" a "biele" je jednoduché, pretože tieto dve farby sú veľmi špecifické, ale čo sa stane, ak použijete kľúčové slová ako "červená", "modrá" alebo "zelená"? Presne aký odtieň červenej, modrej alebo zelenej dostanete? Nesmiete presne určiť, aký farebný odtieň chcete s kľúčovými slovami. To je dôvod, prečo sa často používajú hexadecimálne hodnoty namiesto farebných kľúčových slov.
p {farba: # 000000; }
Tento štýl CSS tiež nastaví farbu vašich odsekov na čiernu, pretože hexadecimálny kód # 000000 sa prekladá do čiernej farby. Dokonca by ste mohli použiť skratku s touto hexadeckovou hodnotou a napísať to ako # 000 a získali by ste to isté.
Ako už bolo uvedené, hexadecimálne hodnoty fungujú dobre, keď potrebujete farbu, ktorá nie je len čierna alebo biela. Tu je príklad:
p {farba: # 2f5687; }
Táto hexadecimálna hodnota by nastavila odseky na modrú farbu, ale na rozdiel od kľúčového slova "modrý", tento hex kód vám dáva možnosť nastaviť veľmi špecifický odtieň modrej - pravdepodobne ten, ktorý návrhár zvolí pri vytváraní rozhrania pre na tejto webovej stránke. V tomto prípade by farba bola stredná, bridlica modrá.
Nakoniec môžete použiť aj hodnoty farieb RGBA pre farby písma. RGCA je teraz podporovaná vo všetkých moderných prehliadačoch, takže tieto hodnoty môžete používať len s malou obavou, že nebudú podporované vo webovom prehliadači, ale môžete tiež nastaviť ľahkú zálohu.
p {farba: rgba (47,86,135,1); }
Táto hodnota RGBA je rovnaká ako predtým špecifikovaná biela modrá farba. Prvé 3 hodnoty nastavujú červené, zelené a modré hodnoty a konečným číslom je nastavenie alfa. Je nastavená na hodnotu "1", čo znamená "100%", takže táto farba by nemala žiadnu transparentnosť. Ak to nastavíte na desiatkové číslo, napríklad 0,85, preloží sa to na 85% opacitu a farba bude mierne transparentná.
Ak chcete zaostriť na farbu, urobte toto:
p {
farba: # 2f5687;
farba: rgba (47,86,135,1);
}
Táto syntax najprv nastaví hexadecimálny kód. Táto hodnota prepíše túto hodnotu pomocou čísla RGBA. To znamená, že akýkoľvek starší prehliadač, ktorý nepodporuje RGBA, dostane prvú hodnotu a druhú ignoruje. Moderné prehliadače budú používať druhý podľa kaskády CSS.