Zadávanie farieb

je možné viacerými spôsobmi, pričom je na vás, ktorý použijete:

1. V hexadecimálnom tvare

keď sa zadá množstvo R, G, B v šestnástkovej sústave, vždy je ale predtým krížik

color: #ffcc80;

2. V skrátenom hexadecimálnom tvare

dá sa použiť len ak dvojice znakov RRGGBB sú rovnaké

color: #fc8

je vlastne farba ffcc88

3. Zadaním skutočných hodnôt RGB

bez mriežky sa napíše rgb a v zátvorke mrožstvá v poradí RGB od 0 po 255

{color: rgb(101,22,122);

4. Percentami RGB

podobne ako 3 len v zátvorke sú percentá od 0 po 100

color: rgb(10%,22%,99%);

5. Názvom farby

white

lime

silver

olive

grey

green

black

teal

yellow

cyan

magneta

blue

red

navy

maroon

purple

color: purple;

5. Piehľadná farba

background-color: transparent;

Zadávanie pozadia

1. Farba

Farbu pozadia môme nastaviť úplne inú pre každý element, ako je nadpis, tabuľka, telo, odkaz, odstavec atd. Pre celý dokument je to selektor body. Syntax je background-color:

body: {background-color: #999};

a: {background-color: #fff};

table: {background-color: magneta};

2. Obrázok pozadia

Platí rovnako, ako pre farbu (každý element môže mať vlastné pozadie). Navyše však môžme zadať veľa parametrov pre obrázok, ako či sa má opakovať a v ktorom smere, ako má byť umiestnený (zarovnanie), priehľadnosť atd.  Syntax je background-image: Hodnota je url(cesta a názov obrázku), pričom ak je obrázok v adresári, používame lomítko / (napr. url(obrazky/pozadie.jpg). Ak chceme ísť o adresár vyššie, použijeme ../obr.jpg.  Ak nič nezadáme, obrázok sa opakuje po stránke.

body: {background-image: url(pozadie.jpg)};

opakovanie

background-repeat upresní či a v ktorom smere sa má obrázok opakovať. Hodnoty sú repeat-x, repeat-y, no repeat.

body: {background-image: url(pozadie.jpg); background-repeat: repeat-y;}

background-position mi určí polohu obrázka pozadia a to v percentách (0% 0% je ľavý horný roh), v pixeloch, alebo pomocou slov. POZOR!!! Pred týmto musíte vždy nastaviť opakovanie na no-repeat!!!

umiestnenie

body: {background-image: url(pozadie.jpg); background-repeat:no-repeat; background-position: center bottom;}

iné príklady:

background-position: 0% 10%;

background-position: 20px 20px;

background-position: right;

background-position: bottom right;

uchytenie na posun

Pomocou background-attachment: scroll (/fixed) zabezpečíme, že sa obrázok pri posôvaní stránky dole bude / nebude posúvať. ! Platí len pre no-repeat!

body: {background-image: url(pozadie.jpg); background-repeat:no-repeat; background-attachment: scroll;}

Zadávanie pozadia - súhrn

Sú 2 spôsoby, ako v css súhrnne zadať vlastnosti:

1. Plný

každá vlastnosť sa píše do samostatného riadka, na konci je ;

body {

background-color: white;

background-image: url(images/lemon.gif);

background-repeat: no-repeat;

background-attachment: scroll;

background-position: right bottom;

}

2. Skrátený

za sebou, pričom sa vynechajú ; ako aj kľúčové slovo background je len raz

body {background: white url(images/lemon.gif) no-repeat scroll right bottom;}

Samozrejme takto zadáme aj tabuľku, odkaz, odstavec, text, odrážky - miesto body je table, a, p atd.