Nastavenie farby textu v CSS. Spôsoby znázornenia farieb

V názvoch farieb sa nerozlišujú veľké a malé písmená.

Syntax

Farba: modrozelená;

2.2. Číselné hodnoty farieb

2.2.1. Farby modelu RGB

Hexadecimálny formát hodnoty RGB je znak #, za ktorým bezprostredne nasledujú tri alebo šesť hexadecimálnych znakov. Trojciferný zápis RGB #rgb sa prevedie na šesťcifernú formu #rrggbb skopírovaním číslic namiesto pridávania núl. Napríklad #fb0 sa rozšíri na #ffbb00 . To zaisťuje, že biela #ffffff môže byť špecifikovaná v krátka poznámka#fff a odstráni všetky závislosti od farebnej hĺbky displeja.

Formát hodnoty RGB vo funkčnom zápise je rgb (nasledovaný čiarkou oddeleným zoznamom troch číselných hodnôt (buď troch celočíselných hodnôt alebo troch percentuálnych hodnôt), za ktorými nasleduje symbol). Hodnota celého čísla 255 zodpovedá 100 % a F alebo FF v hexadecimálnom zápise:

Rgb(255,255,255) = rgb(100 %, 100 %, 100 %) = #FFF

Okolo číselných hodnôt sú povolené medzery.

V prvej časti knihy sme si už na niekoľkých príkladoch ukázali, ako nastaviť farbu textu v CSS. Nie je tu nič zložité: budete potrebovať vlastnosť farby a hodnotu farby, ktorou chcete vyfarbiť text.

P ( farba: #211C18; )

V našom príklade predstavuje hodnota #211C18 hexadecimálny kód farby. Ak už poznáte systém hexadecimálnych čísel, môžete preskočiť čítanie nasledujúceho odseku. Ďalej si povieme aj o ďalších spôsoboch reprezentácie farieb na webe – pomocou farebných modelov (RGB, HSL) a kľúčových slov. Tieto informácie budú užitočné pre začiatočníkov a odporúčame ich prečítať.

Hexadecimálne farby (hexadecimálne)

Hexadecimálna číselná sústava ( hexadecimálny, hex) vychádza z čísla 16. Na zápis hexadecimálnej hodnoty sa používa 16 znakov: arabské číslice od 0 do 9 a prvé písmená latinskej abecedy (A, B, C, D, E, F). Farba v hexadecimálnom formáte sa zapisuje ako tri dvojciferné čísla od 00 do FF (musí im predchádzať krížik #), ktorý zodpovedá trom zložkám: Červená, Zelená, Modrá (farebný model RGB). Inými slovami, farebný záznam môže byť reprezentovaný ako #RRGGBB, kde prvý pár znakov určuje úroveň červenej, druhý - úroveň zelenej a tretí - úroveň modrej. Výsledná farba je kombináciou týchto troch farieb.

Skrátený zápis pre hexadecimálne farby

Niektoré hexadecimálne hodnoty farieb môžu byť zapísané v skratkách. Ak to chcete urobiť, otočte položku ako #RRGGBB na #RGB. Dá sa to urobiť, keď hexadecimálne číslo obsahuje tri páry rovnakých znakov.

Skrátená forma zápisu je pomerne bežná a pre vašu informáciu uvedieme niekoľko príkladov skratiek. Mimochodom, hexadecimálne hodnoty farieb nerozlišujú veľké a malé písmená - môžete použiť veľké aj malými písmenami, to všetko závisí od vašej túžby a vkusu.

Príklady skrátenej notácie pre hexadecimálne farby:

RGB farebný model

Druhým spôsobom určenia farieb v CSS je použitie desiatkových hodnôt RGB (červená, modrá, zelená). Aby ste to dosiahli, musíte za vlastnosť farby napísať kľúčové slovo rgb a potom v zátvorkách a oddelené čiarkami - tri čísla v rozsahu od 0 do 255, z ktorých každé znamená intenzitu červenej, zelenej a modrej farby (r , g, b). Čím vyššie číslo, tým intenzívnejšia farba. Napríklad, ak chcete získať jasne zelenú farbu, musíte napísať:

P ( farba: rgb(0, 255, 0); )

Ale žltkastý horčičný odtieň má nasledujúci význam:

Farba: rgb(94, 81, 3); /* nižšie je rovnaká farba, zapísaná v šestnástkovej sústave: */ farba: #5E5103;

Hodnota pre čiernu sa zapíše ako (0, 0, 0) a pre bielu ako (255, 255, 255) . Tieto hodnoty je možné uviesť aj v percentách. Takže číslo 255 zodpovedá 100%, preto je možné bielu farbu nastaviť takto:

Farba: rgb (100 %, 100 %, 100 %);

Kde hľadať farebné významy

Možno máte otázku: odkiaľ beriete všetky tieto farebné významy? Je ich veľa grafických editorov a online služby, pomocou ktorých môžete vyberať farby a vytvárať farebné schémy. Jeden z najviac obľúbené programy, v ktorom si môžete vybrať vhodnú farbu a získať jej RGB, hexadecimálnu hodnotu a ďalšie - Adobe Photoshop. Ako alternatívu existujú špeciálne stránky, kde si môžete jednoducho vybrať nielen farbu, ale aj celú farebnú schému. Skvelým príkladom je služba Adobe Color CC.

Farebný model RGBA

Farbu vo formáte RGBA môžete nastaviť v podstate rovnakým spôsobom ako v RGB. Rozdiel medzi RGBA a RGB je v prítomnosti alfa kanála, ktorý je zodpovedný za priehľadnosť farby. Priehľadnosť sa nastavuje pomocou čísla v rozsahu od 0 do 1, kde 0 znamená úplnú priehľadnosť a 1 naopak znamená úplnú nepriehľadnosť. Stredné hodnoty ako 0,5 vám umožňujú nastaviť priesvitný vzhľad (skrátený zápis je povolený, bez nuly, ale s bodkou – 0,5). Napríklad, aby bol text farebný a mierne priehľadný, musíte za vlastnosť color napísať kľúčové slovo rgba a hodnotu farby:

P ( farba: rgba(94, 81, 3, .9); )

Nevýhodou RGBA je, že ho prehliadač nepodporuje internet Explorer verzie 8 a staršie. Najmä pre IE8 môžete použiť nasledujúce riešenie:

P ( farba: rgb(94, 81, 3); farba: rgba(94, 81, 3, .9); )

Prvá vlastnosť v príklade je určená pre prehliadač IE8, ktorý zobrazí text v požadovanej farbe, no bez priehľadnosti. A tie prehliadače, ktoré rozumejú RGBA, aplikujú druhú vlastnosť na prvok s transparentnosťou.

Farebné modely HSL (HSLA).

Farbu môžete nastaviť aj v CSS pomocou súradníc farebného modelu HSL (Hue, Saturation, Lightness). Píše sa to takto:

P ( farba: hsl(165, 100 %, 50 %); )

Prvé číslo v zátvorkách znamená odtieň a je uvedené v stupňoch (rozsah čísel od 0 do 359). Bude ľahké pochopiť, prečo sa používajú stupne, ak si spomeniete, ako vyzerá farebné koliesko:

Druhé a tretie číslo v zátvorkách znamená sýtosť a svetlosť. Ich hodnoty sú nastavené v percentách od 0 do 100. Čím nižšia je hodnota sýtosti, tým je farba tlmenejšia. Výsledkom bude hodnota saturácie nula sivej farby, nezáleží na tom, akú hodnotu má odtieň. Hodnota svetlosti vám umožňuje určiť jas farby. Nízke hodnoty vedú k tmavým odtieňom farieb, vysoké hodnoty k svetlým odtieňom. Hodnota 100 % pre svetlosť znamená bielu, 0 % znamená čiernu.

Farebný model HSLA funguje takmer rovnako ako HSL, ale podobne ako RGBA má alfa kanál, pomocou ktorého môžete nastaviť priehľadnosť farby a zadať požadovanú hodnotu v rozsahu od 0 do 1:

P ( farba: hsla(165, 100 %, 50 %, 0,6); )

HSL a HSLA sú podporované všetkými prehliadačmi okrem Internet Explorera verzie 8 a staršej.

Štandardné HTML farby

Ďalším spôsobom, ako reprezentovať farby na webe, sú kľúčové slová, ktoré možno použiť na určenie farby prvku. Príklad:

P(farba:čierna ;)

Existuje 16 štandardných farieb, ktoré možno zapísať do hodnoty vlastnosti color:

Tieto farby sú podporované všetkými prehliadačmi. Okrem nich existuje asi 130 ďalších kľúčových slov pre rôzne odtiene farieb. Kompletnú tabuľku týchto farieb si môžete pozrieť v referenčnej knihe W3C.

Používanie takýchto kľúčových slov je prijateľné, ale existuje riziko, že niektoré slovo nebude prehliadačom akceptované. Preto sa odporúča namiesto kľúčových slov zapísať hexadecimálny kód farby.

Výsledky

IN CSS farba text sa zadáva pomocou vlastnosti color a jeho hodnotu je možné zapísať niekoľkými spôsobmi – v hexadecimálnom (hexadecimálnom) formáte, vo formáte RGB alebo HSL alebo zadaním kľúčového slova. Aby sa predišlo nesprávnemu zobrazeniu farby špecifikovanej pomocou kľúčové slovo, je lepšie zadať jeho hexadecimálnu hodnotu.

Je tiež možné nastaviť priehľadnosť prvku pomocou alfa kanála (formáty RGBA a HSLA). Stojí za zváženie, že prehliadač IE8 a jeho staršie verzie nepodporujú formáty RGBA, HSL a HSLA.