Zapisovanie a výber farieb

Pri definovaní farieb je možné použiť rôzne zápisy. S jedným zo zápisov ste sa už stretli v článku Začíname s CSS.

Farba definovaná názvom

Spôsob zápisu, ktorý sa používa už málo. Názvom je možné definovať 16 farieb. Ak použijete tieto názvy, máte istotu, že farby sa korektne zobrazia aj užívateľom, ktorí majú staručké monitory s hĺbkou 256 farieb.

Nasleduje zoznam týchto farieb, pre názornosť sú použité ako pozadie daného textu.

aqua	black	blue	fuchsia
gray	green	lime	maroon
navy	olive	purple	red
silver	teal	white	yellow

Jednoduchý príklad:

Použijeme opäť náš starý známy dokument zaciname-s-css.html.

<span style="color:green;">Toto je zelený text.</span>

Výsledok:

Toto je zelený text.

Samozrejme by sme štýl odseku p mohli definovať aj v externom súbore.

---

Úloha:

V rámci jedného odseku reprezentovaného značkou p a s využitím značky span vytvorte viacfarebný text.

---

RGB zápis

Tento zápis v podstate znamená, že výsledná farba je namiešaná z troch farieb - červenej, zelenej, modrej. RGB = RedGreenBlue.

Jednoduchý príklad:

<span style="color:rgb(0,255,0)">Toto je opäť zelený text.</span>

Výsledok:

Toto je opäť zelený text.

Čísla môžu nadobúdať hodnotu 0-255. Vo vyššie uvedenom príklade nie je použitá žiadna červená ani modrá farba, ale maximum zelenej. Preto je výsledkom zelená farba.

Ak by sme zahrnuli trošku matematiky, zistili by sme, že k dispozícii máme až neuveriteľných 16 777 216 farieb (256x256x256).

---

Úloha:

V rámci jedného odseku reprezentovaného značkou p a s využitím značky span vytvorte viacfarebný text. Experimentujte so zmenou jednotlivých hodnôt. Nemusíte vyskúšať všetky farby :)

---

RGBA zápis

Tento zápis v podstate znamená, že výsledná farba je namiešaná tiež z troch farieb červenej, zelenej, modrej, ale pribúda ešte jedna hodnota - „priesvitnosť“.

Jednoduchý príklad:

Pozadie tabuľky som zvolil červené, pozadie buniek zelené, ale so zadanou priesvitnosťou.

<table style="background-color: rgb(255,0,0)" cellpadding="5" border="1">
<tr>
<td style="background-color: rgba(0,255,0,0)">0 - žiadna viditeľnosť farby.</td>
<td style="background-color: rgba(0,255,0,0.3)">30% viditeľnosť farby.</td>
<td style="background-color: rgba(0,255,0,0.7)">70% viditeľnosť farby.</td>
<td style="background-color: rgba(0,255,0,1)">100% viditeľnosť farby.</td>
</tr>
</table>

---

Výsledok:

0 - žiadna viditeľnosť farby.

30% viditeľnosť farby.

70% viditeľnosť farby.

100% viditeľnosť farby.

---

Nevýhodou tohto zápisu je, že ho nepodporujú všetky prehliadače.

Hexadecimálny zápis

Je to podobný zápis ako RGB, ale namiesto desiatkovej sústavy používame šestnástkovú sústavu. Zápis je kratší, efektívnejší.

Jednoduchý príklad:

<p style="color:#0000ff"> Toto je modrý text. </p>

Výsledok:

Toto je modrý text.

Výber farieb

V editore PSPad je veľmi šikovná možnosť ako zistiť a do štýlu vložiť potrebnú farbu. Klávesovou skratku ALT+C vyvoláme ponuku výberu farieb a dvojklikom na vybranú farbu ju vložíme do zdrojového kódu.

---

Úloha:

V podstate identická úloha ako v prípade RGB zápisu. V rámci jedného odseku reprezentovaného značkou p a s využitím značky span vytvorte viacfarebný text. Experimentujte so zmenou jednotlivých hodnôt. Nemusíte vyskúšať všetky farby :)

---

V dalšom článku sa dozviete o zapisovaní URL v CSS.