HTML & CSS za začetnike (Del 31): Barve in ozadja.

Prek color lastnost se opisuje barva ozadja (besedila) elementov. Obstojajo različni načini podajanja barv. V klasičnem primeru se pogosto uporabljajo heksadecimalne vrednosti. Te vrednosti se vedno začnejo z dodano metuljnico. Običajno temu sledijo tri dvojice številk in/ali črk, ki predstavljajo rdečo, zeleno in modro barvo. Tako so barve vedno določene po naslednjem vzorcu:

RRGGBB

Vnos #ffffff pomeni belo barvo. Medtem ko se z vnosom #000000 prikaže črna barva. V "pametnih" HTML urejevalnikih lahko najdete ustrezne izbiralnike barv.

Tukaj si lahko ogledate heksadecimalne kode. Poleg tega na številnih spletnih straneh (npr. http://www.farbtabelle.net/) najdete ustrezne preglednice barv.

V CSS obstaja možnost, da se zapis heksadecimalnih barvnih vrednosti skrajša. Ta princip pa žal ne velja za vse barve. Dejansko deluje le, če je vrednost sestavljena iz treh enakih dvojic. Tipični primeri so definicije barve za črno in belo. Običajno so ti zapisani takole:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}

Ta sintaksa je lahko tudi skrajšana.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}

V CSS so dovoljene tudi RGB vrednosti. Tukaj se decimalne vrednosti od 0 do 255 zapisujejo ločeno z vejicami. Vrstni red barvnih navedb ustreza vrstnemu redu heksadecimalnih barv.

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

Kot je razvidno iz primera, so tudi odstotni podatki možni, vendar jih v praksi redko najdemo.

Druga možnost za opredelitev barv so ključne barvne besede. Tu so nekateri primeri:

• black

• red

• blue

• yellow

• white

• green

Primer ustrezne opredelitve bi bil tak:

p { 
 color: white; 
 background: black; 
}

Pazite, da je s CSS3 paleta razpoložljivih barvnih ključnih besed bistveno razširjena. CSS3 je barvna imena prevzel iz specifikacije SVG. Pregled razpoložljivih barvnih imen najdete na http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Definiranje ozadja

Z background gre za združitev naslednjih možnih vrednosti, ki bodo podrobneje predstavljene v nadaljevanju tega vodiča:

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

Posamezne vrednosti se zapisujejo ločeno z presledki. V katerem vrstnem redu, ni pomembno. Ni obvezno navajati vseh vrednosti.

Primer:

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

Barve ozadja

Za določitev ozadja elementu se uporablja lastnost background-color.

div { 
   background-color: #009999;
}

Kot vrednost navedemo želeno barvo.

Grafični ozadji

background-image določa sliko kot ozadje. Če je ta lastnost zapisana v zunanji CSS datoteki, se relativne poti nanašajo na mapo, v kateri je datoteka CSS.

• none – nobene ozadnje slike

• URI – pot do slike

Tu je primer:

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

Pri uporabi ozadij se je treba previdno lotiti. Ker izrazita ozadja ne prispevajo k večji berljivosti besedil.





Seveda obstajajo spletne strani, kjer je videz še posebej pomemben. Tu je možno delati z bolj izstopajočimi ozadji.

Drseča ozadja

Pri daljših elementih se ozadje premika z drsenjem strani. Z background-attachment se temu lahko prepreči.

• fixed – premikanje

• scroll – ozadje ostane na mestu in se prilagodi brskalnikovi pogledu (Viewport).

Lastnost background-attachment se običajno uporablja v kombinaciji z background-image.

Primer:

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

Pozicija ozadja

S pomočjo lastnosti background-repeat se določi, na kateri poziciji naj se začne ozadje. Referenčna točka je element, za katerega je grafika določena.

• Odstotek – ena ali dve vrednosti, ki določata razdaljo grafičnega elementa od zgornjega levega kota elementa. Pri dveh vrednostih prva pomeni horizontalno razdaljo, druga pa vertikalno razdaljo. Referenčna točka ni zgornji levi vogal grafičnega elementa, temveč točka znotraj grafike, ki je prav tako določena s x/y-vrednostmi.

• Dolžina – določa razdaljo grafičnega elementa od njegovega zgornjega levega roba do zgornjega levega roba elementa. Dovoljene so ena ali dve vrednosti. Če sta dve vrednosti navedeni, prva določa horizontalno razdaljo, druga pa vertikalno razdaljo.

Poleg tega so mogoče tudi naslednje ključne besede:

• left – horizontalno poravnano na levo

• center – sredinsko poravnano

• right – horizontalno poravnano na desno

• top – vertikalno poravnano zgoraj

• bottom – vertikalno poravnano spodaj

Tukaj je primer, kako lahko to izgleda:

p { 
   background-position: 8em top; 
}

Ponavljajoče se ozadje

Ali in kako se ozadje ponovi, če je manjše od prikazanega območja, se določi s background-repeat.

• repeat – ozadje se ponavlja tako v vodoravnem kot v navpičnem elementu.

• repeat-x – grafika se ponovi samo vodoravno.

• repeat-y – grafika se ponovi samo navpično.

• no-repeat – grafika se ne ponovi.

Prav tako imamo tukaj primer:

body { 
   background-repeat: repeat-y; 
}

V tem primeru se grafika ponovi samo navpično.

Če pa uporabimo repeat-y, se ponovitev izvede izključno vodoravno.





To vadnico je pokazala, kako močan je CSS tudi na področju barv in slik.