Daca HTML permitea configurarea unor culori si elemente grafice de fundal doar pentru anumite elemente, CSS permite definirea culorii si a fundalului pentru orice element din pagina web.

1. Configurarea fundalului

Se poate schimba fundalul (background) intregii pagini, sau pentru un anumit element din pagina, fie el de tip DIV, paragraf, imagine, tabel sau formular.

a) Culoarea fundalului

Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color, urmata de o valoare care reprezinta numele culorii sau valoarea RGB, exprimata in cod hexa.
Sintaxa generala este:

Daca se foloseste valoarea "transparent" navigatorul va afisa culoarea prestabilita sau cea a elementului parinte.
Pentru schimbarea fundalului intregii pagini se aplica aceasta proprietate selectorului "body".
Iata un exemplu in care culoarea de fundal a paginii este schimbata in albastru:
body { background-color:#0000ff; }

b) Imaginea de fundal

Puteti utiliza pentru fundal si o imagine, pentru aceasta se foloseste proprietatea background-image, urmata de adresa URL a locatiei imaginii.
Sintaxa generala este: Unde "adresa_URL" este calea si numele imaginii care va fi folosita
Daca in locul adresei URL se foloseste valoarea "none", navigatorul nu va folosi nici o imagine.
Iata un exemplu in care pentru fundalul paginii este folosita o imagine:
body { background-image:url('cale/imagine.gif'); }

c) Repetarea imaginii de fundal

Pe langa posibilitatea afisarii unui element grafic ca fundal, CSS ofera si un mod de repetare a acestuia.
Pentru a repeta imaginea de fundal se foloseste proprietatea background-repeat, urmata de o valoare care poate avea una din urmatoarele optiuni: Forma generala este: Iata un exemplu de cod in care imaginea folosita pentru fundalul paginii se va repeta pe verticala pe toata inaltimea documentului:
body { background-repeat:repeat-y; }

d) Controlul imaginii de fundal

CSS poate defini modul de tratare a fundalului la derularea paginii, pentru aceasta se foloseste proprietatea background-attachment cu optiunea "fixed", pentru a lipi imaginea de fundal de fereastra navigatorului sau optiunea "scroll", pentru a permite derularea imaginii de fundal alaturi de elementul corespunzator atunci cand vizitatorul deruleaza pagina.
Sintaxa generala este: Iata un exemplu practic aplicat imaginii folosita pentru fundalul paginii:
body { background-attachment:scroll; }

e) Pozitia imaginii de fundal

Pentru a pozitiona imaginii de fundal in functie de coltul din stanga-sus al elementului se utilizeaza proprietatea background-position urmata de doua valori (coordonate x si y) separate prin spatiu, 'x' pentru pozitia orizontala si 'y' pentru cea verticala.
Forma generala a acestei proprietati este: Coordonatele x si y pot fi exprimate ca valori absolute sau ca procente. Se pot folosi si cuvintele cheie: "left", "center" sau "right" pentru coordonata x; respectiv "top", "center" sau "bottom" pentru coordonata y.
Iata un exemplu in care imaginea de fundal a paginii este pozitionata la 10 pixeli (x si y) relativ la coltul din stanga-sus:
body { background-position:10px 10px; }

f) Stabilirea simultana a proprietatilor fundalului

Toate proprietatile fundalului pot fi configurate cu ajutorul proprietatii background. Se poate stabili simultan printr-o lista de valori proprietatile fundalului, enumerate in orice ordine si separate prin spatiu.
Cand se utilizeaza proprietatea background, nu este necesar sa fie specificate toate proprietatile, cele nespecificate fiind stabilite la valoare lor implicita.
Sintaxa generala este: Valoarea implicita a proprietatii background-color este "transparent".
Valoarea implicita a proprietatii background-image este "none".
Valoarea implicita a proprietatii background-attachment este "scroll".
Valoarea implicita a proprietatii background-position este "top left".
Iata si un exemplu in care sunt aplicate mai multe proprietati pentru background, in aceeasi definitie:
div { background:#e8e8fe url('imagine.jpg') 50% repeat }
- DIV-ul va avea culoarea de fndal "#e8e8fe", cu o imagine pozitionata la jumatatea distantei X, Y si care se repeta.

2. Stabilirea culorii din prim-plan

Proprietatea color poate schimba culoare oricarui element, fie el text, linie orizontala sau element de tip formular.
Sintaxa generala pentru utilizarea acestei proprietati este:

Valoarea culorii poate fi: Iata un exemplu de cod CSS in care culoarea textului din eticheta "h3" este definita verde:
h3 { color:green; }

- Pentru o lista cu mai multe culori specifice, vizitati pagina: Lista coduri culori

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Configurari pentru culori si fundal

Last accessed pages

  1. Gramatica limbii engleze - Prezentare Generala (2489)
  2. Elemente principale HTML (232)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1394)
  4. Substantivul din limba engleza - The Noun (681)
  5. Formate text (419)

Popular pages this month

  1. Bubbles3 (3188)
  2. Gramatica limbii engleze - Prezentare Generala (2486)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2253)
  4. Butterfly Kyodai (2024)
  5. Zuma Deluxe (1954)