Atribút COLOR v CSS [3.časť- CSS]

V minulej časti seriálu o Kaskádových štýloch sme sa podrobne venovali kompatibilite jednotlivých browserov pri použití CSS. Tejto téme sa budeme okrajovo venovať ešte v niektorej z budúcich častí. Dnes pôjdeme ďalej a zameriame sa na farby a ich použitie.



Pri využívaní farieb je dôležité ich správne zadefinovanie a pochopenie ich využitia. Samotné definovanie atribútu COLOR môže byť viacerými spôsobmi Jeden spôsob je špecifikovať farbu jej názvom. Názvy farieb, ktoré môžete použiť sú nasledovné: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white a yellow. Tieto patria do palety Windows VGA - 16 color.

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

Ďalšou možnosťou je zadefinovanie typu farby pomocou RGB hodnôt, ktoré sú reprezentované číselnými hodnotami. Nasledujúci príklad nám ukazuje rôzne možnosti použitia RGB farieb.
Príklady použitia RGB:

EM { color: red } 
  /* klasické zadefinovanie */
EM { color: EM { color: EM { color: rgb(255,0,0) } 
  /* hodnota integeru 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } 
  /* pohyblivé hodnoty v percentách 0.0% - 100.0% */ 

Ukážeme si príklad, ktorý nám objasní samotné použitie atribútu COLOR v HTML dokumente, konkrétne pri headings, teda nadpisoch - H1, H2, H3.

<HEAD>
<TITLE>CSS Príklad</TITLE>
<STYLE>
H1 { font-size: xx-large; color: green }
H2 { font-size: x-large; color: red }
H3 { font-size: large; color: blue }
</STYLE>
</HEAD>

V tomto príklade sme skombinovali použitie farieb spolu s definovaním veľkosti písma, čiže font-size. Výsledný efekt by bol asi taký, že nadpis H1 je zelenej farby, veľkosti "extra-extra-large", nadpis H2 je červenej farby, veľkosti "extra-large"a nadpis H3 je farby modrej o veľkosti "large".



Developer,
Stiahnuté z Developer.sk