Grafica si programare pe Internet - FSEGA, UBB

Lect.univ.dr. Daniel Mican

daniel.mican@econ.ubbcluj.ro

Cursul 4. CSS (Cascading Style Sheets)

CSS este un standard W3C pentru definirea prezentarii documentelor scrise in HTML. Prezentarea se
refera la modul in care documentul este afisat in browser pentru utilizator. Datorita faptului ca CSS
se ocupa de stilizarea si prezentarea documentelor, HTML se poate ocupa de definirea structurii
documentului, asa cum este prevazut.
CSS este un limbaj separat cu propria sintaxa. Stilurile CSS au rezolvat o mare problema si salveaza o
multime de timp in cadrul activitatilor de dezvoltare a site-urilor web. Acest lucru pentru faptul ca
HTML nu a fost destinat sa contina tag-uri pentru formatarea documentelor. HTML a fost destinat sa
defineasca continutul si structura unui document.
In momentul in care tag-urile precum <font>, impreuna cu atributele de culoare au fost adaugate la
HTML 3.2, a inceput un cosmar pentru dezvoltatori web. Dezvoltarea site-urilor web de mari
dimensiuni a devenit un proces lung si costisitor, in cazul in care au fost adaugate formatari folosind
tag-ul <font>, individual, pentru fiecare pagina. Pentru a rezolva aceasta problema, World Wide Web
Consortium (W3C) a creat CSS.
In HTML 4.0, toate formatarile pot fi eliminate din document HTML si stocate intr -un fisier CSS
extern. Acest lucru este chiar recomandat pentru ca toate browserele din zilele noastre suporta CSS.
CSS defineste cum vor fi afisate elemente HTML. Stilurile sunt in mod normal, salvate in fisiere CSS
externe. Foile de stil externe permit schimbarea aranjarii si aspectului tuturor paginilor dintr-un site,
prin editarea unui singur fisier CSS.
CSS functioneaza prin asocierea unor reguli elementelor HTML. Aceste reguli reglementeaza modul in
care ar trebui sa fie afisat continutul elementelor specificate. O regula CSS contine doua parti: un
selector si o declaratie.
declaratie
selector { proprietate: valoare; }

Selectorii indica carui element i se aplica regula. Aceeasi regula se poate aplica la mai mult de un
element, daca numele elementelor sunt separate prin virgule.
Declaratiile indica cum ar trebui sa fie stilizate elementele mentionate prin intermediul selectorului.
Declaratiile sunt impartite in doua parti (o proprietate si o valoare), fiind separate prin punct si
virgula.
Proprietatile indica aspectele elementului pe care dorim sa le modificam. De exemplu, culoarea,
fontul, latimea, inaltimea sau bordura.
Valorile specifica setarile pe care dorim sa le utilizam pentru proprietatile alese. De exemplu, daca
dorim sa modificam proprietatea culoare, atunci valoarea este culoarea pe care dorim sa o aiba
textul din elementele selectate.

Grafica si programare pe Internet - FSEGA, UBB

Lect.univ.dr. Daniel Mican

daniel.mican@econ.ubbcluj.ro

Pentru un selector se pot adauga mai multe declaratii. Acestea vor fi adaugate intre cele doua
acolade si vor constitui un bloc de declaratii. Pentru a face mai usor de citit codul CSS, se recomanda
adaugarea unei singure declaratii pe fiecare linie.
selector {
proprietate1: valoare1;
proprietate2: valoare2;
proprietate3: valoare3;
}

bloc de declaratii

Declaratiile CSS se pot introduce in cadrul paginilor HTML in trei moduri:

Foaie de stil externa (declarata intr-un fisier CSS extern)

Foaie de stil interna (declarata in sectiunea de head a documentului HTML)
Stilul declarat inline (declarat in interiorul unui element HTML)

Adaugarea declaratiilor CSS in foile de stil externe. In acest caz foaia de stil externa este un
document separat de tip text, cu extensia *.css, care contine o serie de declaratii de stil. Dupa ce a
fost creat, documentul *.css poate fi legat, sau importat in unul sau mai multe documente HTML. In
acest fel, toate documentele HTML dintr-un site web pot folosi aceeasi foaie de stil. Aceasta este
metoda cea mai puternica si preferata pentru atasarea foilor de stil. O foaie de stil externa este
ideala atunci cand stilul este aplicat la mai multe pagini. Cu o foaie de stil externa, putem modifica
aspectul unui intreg site prin simpla modificare realizata intr-un singur fisier. Fiecare pagina trebuie
leagata la foaia de stil cu ajutorul tag-ul <link>. Tag-ul <link> va fi pozitionat tot timpul in partea de
head.
<head>
<link rel="stylesheet" type="text/css" href="stiluri.css">
</head>
O foaie de stil externa poate fi scrisa in orice editor de text. Fisierul nu trebuie sa contina nici un tag
HTML. Fisierul stiluri.css contine urmatorul cod CSS:
h1 { color: red; }
p { color: blue; }

Adaugarea declaratiilor CSS in foaia de stil interna. Acesta este plasata intr-un document HTML
folosind elementul stil. Este important de stiut ca declaratiile sale se aplica numai in documentul
HTML in care a fost declarata. O foaie de stil interna trebuie sa fie utilizata doar atunci cand o singura
pagina HTML are un stil unic. Elementul de stil trebuie sa fie plasat in sectiunea <head> a unei pagini
HTML, cu ajutorul tag-ului <style>.

Grafica si programare pe Internet - FSEGA, UBB

Lect.univ.dr. Daniel Mican

daniel.mican@econ.ubbcluj.ro

<head>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>

Adaugarea declaratiilor CSS inline. Acestea pot fi declarate chiar in interiorul unui element HTML
folosind atributul style. Proprietatile si valorile se aplica doar elementului in care au fost definite.
Folosirea stilurilor inline ar trebui sa fie evitata. Acestea trebuie folosite doar atunci cand este
absolut necesar pentru a suprascrie declaratiile provenite de la o foaie de stil incorporata sau
externa. Un stil declarat inline pierde multe din avantajele foilor de stil. Prin urmare rezulta
amestecarea declaratiilor de prezentare si stilizare cu tag-urile HTML care realizeaza structurarea si
continutul. De asemenea, activitatea de modificare a prezentarii paginilor HTML si a site-ului per
ansamblu este mult mai dificila. Astfel, pentru modificarea fiecarei declaratii de stil trebuie mers
direct in codul sursa al paginii HTML.
<h1 style = "color: red"> Titlu </h1>
<p style = "color: blue"> Paragraf </p>

Selectorii CSS
In plus, fata de stabilirea unui stil pentru un element HTML, CSS permite specificarea propriilor
selectori. Exista mai multe tipuri diferite de selectori CSS care permit declararea unor reguli pentru
anunite elemente specifice din cadrul unui document HTML. Selectorii CSS sunt case sensitive, astfel
incat acestia trebuie sa se potriveasca exact cu numele elementelor si valorilor de atribute. Exista unii
selectori mai avansati care permit selectarea unor elemente bazate pe atributele si valorile lor. In
continuare vom prezenta cei mai frecvent utilizati selectorii CSS.
Selectorul universal - se aplica la toate elementele din document
* {}
Se aplica tuturor elementelor din pagina

Selectorul de tip - se aplica numelor de elemente

h1, h2, h3 {}
Se aplica elementelor <h1>, <h2> si <h3>

Selectorul de clasa - se aplica unui element al carui atribut clasa are o valoare care se potriveste cu
cel specificat dupa simbolul . (punct)
.azorel {}

Grafica si programare pe Internet - FSEGA, UBB

Lect.univ.dr. Daniel Mican

daniel.mican@econ.ubbcluj.ro

Se aplica tuturor elementelor care au atributul class egal cu azorel

p.azorel {}
Se aplica doar elementelor <p> a caror atribut class este egal cu azorel

Selectorul ID - se aplica unui element al carui atribut id are o valoare care se potriveste cu cel
specificat dupa simbolul # (diez)
#cnp {}
Se aplica elementului al carui atribut id este egal cu cnp

Selectorul copil - se aplica unui element care este un copil direct al unui alt element
li>a {}
Se aplica elementelor <a> care sunt continute in cadrul unui element <li>

Selectorul descendent - se aplica unui element care este un descendent din cadrul unui alt element
specificat (nu doar unui copil direct al acestui element)
p a {}
Se aplica elementelor <a> care sunt continute in cadrul unui element <p>, chiar daca exista si alte
elemente imbricate intre ele

Selectorii grupati- se aplica numelor de elemente specificate

h1, p, em, img {}
Se aplica elementelor <h1>, <p>, <em> si <img>

Agregarea in cascada a stilurilor

De cele mai multe ori in cadrul aplicatiilor web exista mai multe foi de stil care se agrega in cascada.
In cazul in care exista doua sau mai multe reguli care se aplica aceluiasi element, este important sa se
inteleaga care va avea prioritate. Agregarea in cascada se refera la ceea ce se intampla atunci cand
mai multe declaratii de stil lupta pentru controlul elementelor de pe o pagina. Declaratiile de stil se
propaga in cascada, in jos, pana cand vor fi suprascrise de o declaratie de stil cu o greutate mai mare.
In general putem spune ca, toate stilurile vor fi agregate in "cascada", intr-o noua foaie de stil
virtuala. Agregarea se face respectand urmatoarea ordine, tinand cont ca declaratiile inline au cea
mai mare prioritate:

Foaia de stil implicita a browser-ului

Grafica si programare pe Internet - FSEGA, UBB

Lect.univ.dr. Daniel Mican

daniel.mican@econ.ubbcluj.ro

Foaie de stil externa (declarata intr-un fisier CSS extern)

Foaie de stil interna (declarata in sectiunea de head a documentului HTML)
Stilul declarat inline (declarat in interiorul unui element HTML)

Prin urmare, un stil inline (declarat in interiorul unui element HTML) are cea mai mare prioritate.
Acest lucru inseamna ca va inlocui un stil definit in interiorul tag-ul <head>, sau intr-o foaie de stil
externa, respectiv in cadrul browser-ului. Daca legatura la foaia de stil externa este plasata dupa
foaia de stil interna in HTML <head>, foaia de stil externa va inlocui foaia de stil interna.
De exemplu, in cazul codului HTML de mai jos:
<html>
<head>
<title>Exemplu de agregare in cascada a stilurilor</title>
<link rel="stylesheet" type="text/css" href="stilulmeu.css">
<style>
h1{color: red;}
p{color: blue;}
</style>
</head>
<body>
<h1 style="color: indigo">Titlu</h1>
<p style="color: violet">Paragraf</p>
</body>
</html>
Si a codului CSS de mai jos continut in cadrul fisierului stilulmeu.css:
h1{color: green;}
p{color: orange;}
Va rezulta:

Dupa ce foile de stil au fost agregate in "cascada", intr-o noua foaie de stil virtuala, conflictele pot sa
apara in continuare. Prin urmare, regula agregarii in cascada continua si la nivel de regula. Cand doua
reguli dintr-o foaie CSS intra in conflict, tipul de selector este folosit pentru a determina castigatorul.
Cu cat este mai specific selectorul, cu atat mai multa greutate ii este acordata pentru a suprascrie
declaratiile contradictorii.
In cazul in care doi selectorii sunt identici, sau de aceeasi importanta, oricare dintre acestia este
declarat ultimul va suprascrie pe precedentii. Prin urmare cel care apare ultimul va avea prioritate.

Grafica si programare pe Internet - FSEGA, UBB

Lect.univ.dr. Daniel Mican

daniel.mican@econ.ubbcluj.ro

De exemplu, in cazul codului HTML de mai jos:

<html>
<head>
<title>Exemplu de specificitate si prioritate</title>
<style>
* { color: blue; }
h1 { color: purple; }
p b { color: violet; }
b { color: orange; }
b { color: red; }
p { color: chocolate; }
p#abstract{ color: green; }
</style>
</head>
<body>
<h1>Titlu</h1>
<p id="abstract">Acesta este un <b>abstract</b></p>
<p>Acesta este un text dintr-un paragraf</p>
Acesta e un text <b>oarecare</b>
</body>
</html>
Va rezulta:

Este foarte usor sa suprascriem, in mod accidental, declaratiile anterioare in momentul in care vom
ajunge sa folosim proprietati combinate. Prin urmare, modul de agregare a foilor de stil si importanta
selectorilor este un comportament deosebit de important de care trebuie sa tinem cont.

Mostenirea in CSS
Mostenirea se poate folosi pentru a crea un avantaj atunci cand scriem foile de stil. De exemplu, daca
dorim ca toate elementele de tip text sa fie formatate cu fontul Verdana avem doua optiuni. Am
putea scrie declaratii pentru fiecare element din cadrul documentului HTML si sa setam proprietatea
font-face astfel incat textul sa fie formatat cu Verdana. O cale mult mai buna ar fi sa scriem o singura
regula de stil prin care sa se aplice proprietatea font-face la elementul <body>, iar toate elementele
de tip text incluse in elementul <body> sa mosteneasca acel stil.

Grafica si programare pe Internet - FSEGA, UBB

Lect.univ.dr. Daniel Mican

daniel.mican@econ.ubbcluj.ro

Daca specificam pe elementul <body> proprietati precum fontul sau culoarea, se vor aplica pe mai
multe elemente continute in cadrul documentului HTML. Acest lucru se datoreaza faptului ca
valoarea proprietatii font-family este mostenita de elementele continute. Aceast lucru ne salveaza de
la a fi nevoie sa aplicam aceste proprietati pentru mai multe elemente. Prin urmare vor rezulta foi de
stil mai simple si de dimensiuni mai mici.
De exemplu, in cazul codului HTML de mai jos:
<html>
<head>
<title>Exemplu de specificitate si prioritate</title>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
color: blue;
background-color: yellow; }
.cutie {
color: white;
background-color: green;
border: 1px solid red; }
.cutiutza {
color: gold; }
</style>
</head>
<body>
<div>
<p>Mostenesc de la body fontul, proprietatea bold si culoarea albastra</p>
</div>
<div class="cutie">
<p>Mostenesc de la body fontul si proprietatea bold. Dar am culoarea alba, culoarea de
fundal verde si bordura rosie.</p>
<div class="cutiutza">
<p>Mostenesc de la body fontul si proprietatea bold. Am culoarea aurita, dar
mostenesc culoarea de fundal verde de la cutie. Bordura nu se mosteneste.</p>
</div>
</div>
</body>
</html>

Va rezulta:

Grafica si programare pe Internet - FSEGA, UBB

Lect.univ.dr. Daniel Mican

daniel.mican@econ.ubbcluj.ro

E bine de stiut ca nu toate proprietatile sunt mostenite. Este important sa retinem ca unele
proprietati CSS sunt mostenite, iar altele nu. In general, proprietatile legate de stilul, dimensiunea
textului, fontul, culoarea, etc, sunt transmise si la elementele continute. Proprietati precum bordura
unui element, marginile, fundalurile, etc, care afecteaza zona din jurul elementului tind sa nu fie
transmise. Acest lucru este destul de logic. De exemplu, daca am pus un chenar in jurul unui div, nu
am vrea ca acesta sa apara si in jurul fiecarui element inline continut (de ex. paragraf). Trebuie sa
tinem minte ca orice proprietate aplicata unui element specific va suprascrie valorile mostenite
pentru acea proprietate.