8/10/2019 CSS Introducere

1/3

Design web

Capitolul 3: Limbajul CSS

1. Definirea foilor de stil

CSS (Cascading Style Sheets)este un limbaj prin care se controleazaspectulunei pagini HTML/XHTML. Astfel, prin intermediul su se realizeaz separaia ntreconinutul unei pagini (realizat cu ajutorul HTML) i modul n care aceasta esteprezentat (realizatcu ajutorul CSS). Standardul actual recomandat de W3C esteCSS3.

CSS const practic din mai multe declaraii care au urmtoarea sintax:selector {

atribut1:valoare1;

atribut2:valoare2;

atribut3:valoare3;

.

atributn:valoaren;}

(cu atenie la ; ntre perechile atribut: valoarei la spaiu dup : i nu nainte).Fiecare declaraie dup modelul de mai sus reprezintun stil aplicat elementelor dinpaginindicate prin intermediul selectorului. Stilul aplicat este o combinaie ntremai multe perechi atribut:valoare (gsii toate atributele i ce fel de valori pot lua laadresa:http://www.w3schools.com/cssref/default.asp).

Beneficiile sintaxei CSS sunt:- formatarea este introdus ntr-un singur loc pentru tot documentul;- editarea rapida etichetelor;- datorit introducerii ntr-un singur loc a etichetelor se obine o micorare a

codului paginii, implicit ncrcarea mai rapida acesteiaStilurile CSS se pot defini in trei moduri diferite:

1. inline: n interiorul unui element HTML, prin intermediul atributuluistandard style (sintaxa se simplific n acest caz, precizndu-se doarperechile atribut:valoare fr selector i acolade);

2. la nivel de fiier: n interiorul perechii de tag-uri se introducetag-ul , iar n interiorul acestuia se vor defini stilurile conformsintaxei generale. Tag-ul style are mai multe atribute, dintre care

obligatoriu, pentru ca browserul safieze stilurile, este type. n cazuln care definim stilurile cu ajutorul CSS, acesta trebuie s aibvaloarea

text/css. Alt atribut important este media: acesta ne spune pentru ce tipde media vor fi folosite stilurile.

3. ntr-un fiier extern. Se va crea un fiier cu extensia .css n care se vordefini stilurile conform sintaxei generale. Acesta va trebui refereniat defiierul HTML, iar acest lucru se face cu ajutorul tag-ului .Avantajul major al acestui tip de definire este faptul cpoate fi creat unsingur fiier .css care s fie refereniat de mai multe fiiere HTML (ngeneral, pe un site majoritatea paginilor se folosesc de stiluri comune iastfel se evit scrierea stilurilor n fiecare pagin, iar modificarea unuistil se va face (dac este cazul) doar ntr-un singur loc i nu pe fiecarepagin n parte.

Cea mai mare importan (suprascrie orice alt parametru) o are sintaxa de nivelul1, iar cea mai mic importan o are cea de nivelul 3.

http://www.w3schools.com/cssref/default.asphttp://www.w3schools.com/cssref/default.asphttp://www.w3schools.com/cssref/default.asphttp://www.w3schools.com/cssref/default.asp

8/10/2019 CSS Introducere

2/3

Design web

Comentariile n CSS sunt definite n interiorul perechii /*, */ (ca i comentariile pemai multe linii din C si Java).

Dac dorim ca unei anumite zone s i aplicm un stil de formatare, atunci putemda un nume acelui stil cu ajutorul comenzilor idi class. Pentru compatibilitate cuversiunile anterioare de browsere, numele asociate zonelor nu vor contine caracterul

_.Elementul id se aplic unui stil de format o singur dat, sau la o singur

etichet HTML, plasndu-se un nume acelui stil. Acest element necesit existenacomezilor CSS n zona HEAD sau ntr-un fiier extern.

Elementul class este similar cu id dar, spre deosebire de acesta, poate fi

folosit de mai multe ori sau pentru zone mai mari. Ca i id, necesit existenacomezilor CSS n zona HEAD sau ntr-un fiier extern.

Stiluri definite inline

Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind oricealte comenzi CSS. Sunt amplasate n interiorul etichetelor HTML aflate n zonaBODY i au sintaxa:

...textul sau obiectul asupra cruia este aplicat codul CSS...

Stiluri definite embedded

Comenzile de nivel 2 CSS (embedded) pot fi plasate i n zona HEAD, rezultndo funcionare identic dar, mai mult, aceleai comenzi pot fi folosite n mai multelocuri n aceeai pagin prin referire. Aceste comenzi sunt introduse prin sintaxa:

8/10/2019 CSS Introducere

3/3

Design web

-->

Cuvntul cheie style specific unde ncepe i unde se termin blocul CSS,atributul type este folosit pentru a ascunde de browserele vechi, care nu cunosc

sintaxa CSS, coninutul blocului style.

Stiluri definite extern

Folosirea unui fiier extern sau de nivel 3 care s conin comenzi CSS estefoarte practic deoarece poate fi utilizat n mai multe situaii (mai multe fiiere HTMLpot folosi acelai fiier extern CSS), eliminnd timpul necesar introducerii coduluicorespunztor n fiecare pagin i totodat editarea lor ntr-un singur loc pentru maimulte fiiere.

Extensia fiierelor de stiluri este .css. Legtura paginilor HTML cu fiiereleexterne CSS se face prin introducerea urmtoarei linii:

Atributele indic urmtoarele aspecte:relfiierul este de tip stylesheet (foaie de stil);typetipul fiierului ce conine comenzi CSS;hreffiierul sau adresa fiierului CSS.