HTML & CSS pre začiatočníkov (časť 31): Farby a pozadia

Premenná farbe popisuje poprednú farbu (textovú farbu) elementov. Farby sa dajú zadať rôznymi spôsobmi. Klasicky sa k hexadecimálnym hodnotám. Tieto hodnoty vždy začínajú s predĺženou mriežkou. Za ňou obvykle nasleduje tri páry čísel a/alebo písmená, ktoré predstavujú červenú, zelenú a modrú. Definície farieb majú teda vždy nasledujúcu štruktúru:

RRGGBB

Uvedenie #ffffff spôsobí bielu farbu. Použitie #000000 zase zobrazí čiernu farbu. V "rozumne" HTML editoroch sú dostupné príslušné nástroje na výber farieb.

Pomocou môžete zistiť hexadecimálne kódy. Okrem toho existujú na mnohých webových stránkach (napr. http://www.farbtabelle.net/) príslušné prehľady farieb.

V CSS je možné skrátiť zápis hexadecimálnych farieb. Tento princíp sa však nedá aplikovať na všetky farby. Skutočné to funguje len v prípade, že hodnota pozostáva zo troch rovnakých párov. Typickými príkladmi sú definície farieb pre čiernu a bielu. Obvykle sa zapisujú nasledovne:

.cierna {
   color: #000000;
}
biela {
   color: #ffffff;
}

Tento zápis je možné skrátiť.

.cierna {
   color: #000;
}
biela {
   color: #fff;
}

V CSS sú povolené aj RGB hodnoty. Tu sa zapisujú desatinné hodnoty od 0 po 255, ktoré sú oddelené čiarkami. Poradie farieb je rovnaké ako u hexadecimálnych farieb.

a { 
color: rgb(100%, 100%, 100%); 
background: rgb(0, 0, 0); 
}

Ako ukazuje príklad, je možné použiť aj percentuálne hodnoty, hoci sa v praxi zriedka vyskytujú.

Ďalšou možnosťou pre definície farieb sú kľúčové slová farieb. Tu sú niektoré príklady:

• black

• red

• blue

• yellow

• white

• green

Príslušný zápis by mohol vyzerať nasledovne:

p { 
 color: white; 
 background: black; 
}

Všimnite si, že s CSS3 sa paleta dostupných kľúčových slov pre farby ešte raz výrazne rozšírila. CSS3 prebral farbné názvy zo špecifikácie SVG. Prehľad dostupných farbný názvov nájdete na adrese http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Definovanie pozadia

V prípade background sa jedná o zhrnutie nasledujúcich možných hodnôt, ktoré budú podrobnejšie predstavené v ďalšej časti tohto návodu:

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

Individuálne údaje sa zapisujú oddelené medzerami. Nie je dôležité, v akej poradí, nemusia byť špecifikované všetky hodnoty.

Príklad:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Farby pozadia

Na pridanie pozadia prvku sa používa vlastnosť background-color.

div { 
   background-color: #009999;
}

Ako hodnotu sa zadáva požadovaná farba.

Obrázky pozadia

background-image určuje obrázok ako pozadie. Ak je táto vlastnosť zaznamenaná v externom súbore CSS, relatívne cesty odkazujú na adresár, v ktorom sa nachádza súbor CSS.

• none – žiadne pozadie

• URI – cesta k obrázku

Tu je ďalší príklad.

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Willkommen auf PSD-Tutorials.de!
</div>

Pri použití obrázkov na pozadie sa však prosím choďte opatrne. Príliš výrazné pozadie nezjednoduší čitateľnosť textov.





Sú však, samozrejme, aj webové stránky, kde ide výhradne o vizuálny dojem. Tu môžete určite pracovať s výraznejšími pozadím.

Posúvajúce sa pozadia

U dlhších prvkov sa pozadie posúva pri posúvaní stránky. S background-attachment to je možné zamedziť.

• fixed – posúvanie súčasne

• scroll – pozadie zostáva na mieste a je zarovnané na okno prehliadača (viewport).

Vlastnosť background-attachment sa obvykle používa spolu s background-image.

Príklad:

div.fest {
    background-image: url(background.gif); 
    background-repeat: no-repeat;
 }

Poloha pozadia

Pomocou vlastnosti background-repeat sa určuje, na ktorej pozícii má začať pozadie. Referenčným bodom je prvok, pre ktorý bol grafický obrázok definovaný.

• Percentuálny údaj - jeden alebo dva údaje určujúce vzdialenosť obrázka od ľavého horného rohu prvku. Pri dvoch hodnotách prvá značí horizontálnu a druhá vertikálnu vzdialenosť. Referenčným bodom nie je ľavý horný roh obrázka, ale bod vnútri obrázka, ktorý je tiež určený x/y hodnotami.

• Dĺžkový údaj - určuje vzdialenosť obrázka od jeho ľavého horného rohu k ľavému hornému rohu prvku. Sú povolené jedna alebo dve hodnoty. Ak sú uvedené dve hodnoty, prvá určuje horizontálnu vzdialenosť, druhá vertikálnu vzdialenosť.

Okrem toho sú možné aj tieto kľúčové slová:

• left - horizontálne zarovnanie vľavo

• center - vycentrované

• right - horizontálne zarovnanie vpravo

• top - vertikálne zarovnanie hore

• bottom - vertikálne zarovnanie dole

Ukážeme si príklad, ako by to mohlo vyzerať:

p { 
   background-position: 8em top; 
}

Opakujúce sa pozadie

Ak a ako sa pozadie opakuje, keď je menšie ako zobrazená oblasť, môže byť stanovené s background-repeat.

• repeat - pozadie sa opakuje vertikálne aj horizontálne, aby vyplnilo prvok.

• repeat-x - obrázok sa opakuje len horizontálne.

• repeat-y - obrázok sa opakuje len vertikálne.

• no-repeat - obrázok sa neopakuje.

Ukážeme si aj na tom príklad:

body { 
   background-repeat: repeat-y; 
}

V tomto prípade sa obrázok opakuje len vertikálne.

Ak použijete repeat-y, opakovanie sa bude uskutočňovať iba horizontálne.





Tento tutoriál ukázal, aká silná je CSS aj v oblasti farieb a obrázkov.