CSS - Cascading Style Sheets

II

''mai intai trebuie sa faci rost de niste adevaruri,apoi poti sa le denaturezi cat vrei''
(marc twain)

Obiective:
Prezentarea CSS;
Aplicarea regulilor CSS;

1. Aplicarea CSS.
2. Selectori, proprietati si valori.
3. Culori.
4. Text.
5. Margini si zone de umplere (padding).
6. Modelul Box.
7. Exemplu.
8. Clase si Identificatori.
9. Grupuri si contextuali.
10. Pseudo-clase si pseudo-elemente.
11. Imagini de fundal.
12. Proprietatea display.
13. Page Layout.

Prezentare. CSS este un acronim pentru Cascading Style Sheets (foi de stiluri). O foaie de stiluri
conine reguli de formatare ale elementelor unui unui document HTML. Limbajul HTML este folosit
pentru descrierea continutului in timp ce CSS este utilizat pentru realizarea prezentarii. Cascading
nseamn c stilurile se aplic n "cascad", proprietiile motenite din alte declaraii sunt suprascrise
de ultimele proprieti incarcate de browser. O regul de stil conine:
selectori elementele crora li se aplic regulile, separate prin virgul (,)
declaraii reguli care definesc modul de formatare al selectorilor, scrise sub form de
perechi proprietate-valoare, separate prin punct i virgul (;)
selector1,
H1, H2, H3
H1
H2

selector2 {property1: value1; property2: value2}

{font-family: Helvetica, Tahoma, Arial}
{ font-size: x-large; color: red }
{ font-size: 12pt }

1. Aplicarea CSS.
Exista 3 modalitati de aplicarea a regulilor CSS.
1.1. In-line
1.2. Definitii interne documentului HTML
1.3. Definitii externe in fisiere CSS
1.1
Stilurile in-line sunt specificate
chiar in tag-urile HTML cu atributul
style,
stilul
fiind aplicat
doar
containerului respectiv.
Rezultatul aplicarii acestui stil este colorarea paragrafului specificat in rosu. Utilizarea
stilurilor in-line nu este recomandata, deoarece ele incarca documentul HTML, fiind recomandat ca
acestea sa contina cat mai putine detalii de prezentare.
1.2 Stilurile embedded (interne documentului HTML) sunt specificate in interiorul containerului
head prin tag-uri style de tipul text/css.

Acest stil va aplica tuturor paragrafelor din pagina culoarea rosie si tuturor link-urilor culoarea
albastra. Stilurile embedded pot fi utilizate atunci cand numarul de reguli este relativ mic.
1.3 Definitiile externe sunt continute intr-un fisier CSS separat. Este recomandata aceasta metoda
pentru a separa continutul (documentul HTML) de prezentare (foia de stil).
Un exemplu de fisier CSS este:
Acest fisier va fi salvat cu extensia .css si pentru o
putea fi utilizat, trebuie specificat in tag-ul header
al documentului HTML. Tag-ul corespunzator este:
<link rel=stylesheet type="text/css" href="adresa document css">

Foile de stil externe pot fi specificate si utilizand tag-ul style cu atributul @import. In tag-ul
head al documentului HTML se introduc marcaje style astfel:

2. Selectori, proprietati si valori

Pentru orice selector avem proprietati. Acestea sunt specificate intr-un bloc delimitat de
acolade si sunt sub forma de identificatori, de exemplu: color, font-weight, sau
background-color. Orice element HTML poate fi folosit ca selector. De exemplu
Simbolul * reprezint toate elementele HTML, si proprietatile specificate vor fi aplicate tuturor
elementelor. O valoare este atribuita unei proprietati dupa simbolul ( : ). Proprietatile sunt separate
prin simbolul ( ; ).

Exemplul de mai sus va formata elementul body utilizand valorile pentru proprietatile
font-size si color specificate.

Unitati de masura. Pe langa unitati de masura specifice anumitor proprietati, in CSS exista si cateva
unitati de masura standard:
em (de exemplu font-size: 2em) este folosita pentru calcularea dimensiunii unui font. "2em",
inseamna ca dimensiunea fontului va fi de 2 ori mai mare decat dimensiunea fontului elementului
parinte.
px (de exemplu font-size: 12px) este unitatea de masura pentru pixeli.
2

pt (de exemplu font-size: 12pt) este unitatea de masura pentru puncte.

% (de exemplu font-size: 80%) este unitatea pentru procentaje.
Alte unitati de masura includ pc (picas), cm, mm si in.
Cand o valoare este zero, nu mai trebuie specificata si o unitate de masura. Este indicat sa se
utilizeze unitatile em si % pentru dimensiunea fonturilor in locul unitatilor px si pt care pot duce la
probleme de vizualizare a paginilor.
3. Culori.
CSS pune la dispozitie 16.777.216 culori. Culorile pot fi specificate sub forma de nume, cod
rgb (red/green/blue) sau cod hexa. Pentru culoarea rosu sunt acceptate urmatoarele forme:
red
rgb(255,0,0)
rgb(100%,0%,0%)
#ff0000
#f00

Exista 17 nume predefinite de culori: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white, si yellow. transparent este
de asemenea o valoare valida. Cele 3 elemente din codul RGB iau valori intre 0 si 255. Un numar in
hexazecimal poate reprezentat cu 3 sau 6 elemente. Forma cu 3 elemente este o varianta compresata a
celei cu 6 (de exemplu, #f00 devine #ff0000, #c96 devine #cc9966). Formatul hexa permite un
control mai fin al culorilor.
Culorile pot fi specificate folosind proprietatile color si background-color.
4. Text.
Dimensiunea si formatarea textului pot fi modificate folosind urmatoarele proprietati:
fontul utilizat. Poate fi: arial, helvetica, sans-serif sau alt font instalat. Nu este
font-family
recomandat sa se utilizeze fonturi putin raspindite. De obicei se specifica o lista
de fonturi sigure. Daca un font nu este instalat, atunci browser-ul trece la
urmatorul font din lista
dimensiunea fontului
font-size
formateaza textul. In practica poate lua valorile bold sau normal desi sunt
font-weight
posibile si alte valori: bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800
si 900.
specifica daca textul primeste modificatorul italic sau nu. Poate primi valorile
font-style
italic sau normal.
specifica daca textul este formatat cu modificatorul underline sau nu. Valorile
text-decoration
posibile sunt:

text-transform

text-decoration:
text-decoration:
text-decoration:
text-decoration:

transformari ale textului

text-transform:
text-transform:
text-transform:
text-transform:

overline
line-through
underline
none
capitalize
uppercase
lowercase
none

Formatare avansata a textului

letter-spacing si word-spacing sunt
proprietati pentru specificarea spatiilor
dintre litere si cuvinte. Valorile posibile
sunt normal sau o lungime.
text-align poate primi valorile left,
right, center sau justify.

5. Margini si zone de umplere (padding)

margin si padding sunt cele mai
folosite proprietati pentru distantarea
elementelor. Prima proprietate specifica
spatiul extern pentru un element iar
padding-ul specifica spatiul intern. Se pot
specifica valori separate pentru cele patru
laturi ale unui element: top, right, left si
bottom.
margin-top, margin-right,
margin-bottom, margin-left,
padding-top,
padding-right, padding-bottom si
padding-left

Marginile, zonele de umplere si bordurile (borders) fac parte din modelul Box care este utilizat
de CSS.
6. Modelul Box
CSS folosete un model de formatare orientat pe blocuri: fiecare element produce o zon
dreptunghiular (cu exceptia elementelor care au proprietatea display = none).
Fiecare bloc are un continut nconjurat de o zon de umplere (padding area), o bordur (border), i
o zon de margine (margin area).
zona de completare are acelasi fundal ca si elementul (setat prin proprietatea background).
culoarea si stilul bordurii sunt stabilite prin proprietile border
zon de margine este mereu transparent

6.1 Proprietiile blocurilor

Prin intermediul acestei grupe de proprieti se stabilesc dimensiunile, pozitia, marginile etc.
pentru blocurile care reprezint elementele.
Exist proprieti pentru formatarea:
zonei de margine: margin-top, margin-right, margin-bottom, margin-left, margin
zonei de umplere: padding-top, padding-right, padding-bottom, padding-left, padding
bordurii: border-top-width, border-right-width, border-bottom-width, border-leftwidth,
4

border-width, border-color, border-style, border-top, border-right, border-bottom, border-left,

border
coninutului: width, height, float, clear

6.2 Proprieti pentru zona de margine

margin-top, margin-right, margin-bottom, margin-left
valoare: auto | <mrime> | <procent>

implicit: 0

poate fi negativ, dar exist limite specifice implementrii

valori procentuale: relative la limea elementului printe

se aplic la toate elementele; nu este mostenit

stabileste dimensiunea zonei de margine din partea de sus/dreapta/jos/stnga a

elementului.
6.3 Proprieti pentru zona de umplere
padding-top, padding-right, padding-bottom, padding-left
valoare: <mrime> | <procent>
implicit: 0
nu poate fi negativ
valori procentuale: relative la limea elementului printe
se aplic la toate elementele; nu este mostenit
stabileste dimensiunea zonei de umplere din partea de sus/dreapta/jos/stnga
a elementului.
Dac sunt prezente patru valori, atunci ele se aplic pentru top, right, bottom si left, n
aceast ordine. Dac este dat o singur valoare, aceasta este atribuit tuturor zonelor de umplere.
Dac sunt dou sau trei valori, valorile lips se iau din cele ale prtilor opuse.
6.4 Borduri
Pentru a realiza o bordura in jurul unui element se foloseste proprietatea border-style.
Valorile posibile sunt: solid, dotted, dashed, double, groove, ridge, inset si outset.
Grosimea bordurii este specificata cu proprietatea border-width Valorile posibile sunt:
thin | medium | thick | <mrime>.
Pentru specificarea bordurii separat pe fiecare
latura avem:
border-top-width, border-right-width,
border-bottom-width, border-left-width

7. Exemplu.
Fie urmatorul document XHTML (la sfarsit)
8. Clase si Identificatori
Clasele si identificatorii permit definirea propriilor selectori. Elementele HTML apartinand aceluiasi
tip pot fi prezentate diferit in functie de clasa sau ID-ul cu care sunt definite. Clase o clas este un
identificator care poate referi mai multe elemente din documentul HTML

clasa este definit prin numele ei prefixat de punct (.)

warning { color: red; background-color: yellow }

clasa este referit prin atributul class al elementelor

Identificatori un identificator se refer la cel mult un element din documentul HTML.

5

identificatorul este definit prin numele lui prefixat de diez (#)

#licenta { color: red; border: solid 2pt yellow }

Un identificator apare n documentul HTML n atributul id al unui singur element

Un exemplu de utilizare:

Legatura dintre elementele HTML si CSS se face prin atributele id si class.

Span si Div. Tag-urile span si div sunt folosite pe scara larga impreuna cu CSS. In comparatie
cu alte tag-uri HTML, cum ar fi p, h1 sau a, aceste tag-uri nu sunt folosite pentru a reprezenta un
continut ci doar pentru gruparea elementelor HTML. Folosind atributele class si id, putem identifica
cu usurinta div-urile dintr-un document si cu ajutorul CSS putem aplica pentru fiecare o formatare
speciala. Diferenta dintre span si div, este ca tag-ul span este afisat in-line pe cand tag-ul div este
afisat block-line.

9. Grupuri si contextuali
Aceleasi proprietati pot fi atribuite simultan mai multor selectori prin separarea numelor
acestora prin virgule. De exemplu, regulile de mai jos:
pot fi comprimate intr-o singura regula

Daca fisierul CSS este bine structurat nu este nevoie de foarte multe reguli de tip class sau ID,
deoarece se pot specifica proprietati pentru selectorii din cadrul altor selectori. De exemplu:

Regula de mai sus aplicata codului HTML ce urmeaza, produce acelasi rezultat ca si in cazul
utilizarii claselor si identificatorilor.

Contextuali doi sau mai muli selectori care stabilesc contextul n care se aplic stilul
selector#id stilul se aplic dac selector are identificatorul id
selector.clasa stilul se aplic dac selector are clasa clasa
selector1 selector2 stilul se aplic dac selector1 este coninut n selector2
(selectorii pot fi oricare din selectorii descrii anterior)
10. Pseudo-clase si pseudo-elemente
Sunt clase i elemente speciale care sunt recunoscute de browser.
pseudo-clasele permit diferenierea ntre mai multe tipuri de elemente.
pseudo-elementele sunt sub-pri de elemente.
Sunt definite prin construcii:
selector:pseudo-clasa { property: value }
selector:pseudo-element { property: value }

Pseudo-clasele marcajului a:
a:link { color: red }
link este pentru un link nevizitat
a:active { color: blue; font-size: 125% }
active este pentru momentul in care link-ul primeste focus-ul
a:visited { color: green; font-size: 85% }
visited este pentru un link care a fost vizitat
a:hover {color: gold; }
hover este pentru momentul in care cursorul mouse-ului este pozitionat peste link

Pseudo-elementele marcajelor blocuri (p, h1, div, etc):

p:first-line { font-weight: bold }
p:first-letter { font-size: 300%; float: left
}
a:link { color: blue; }

11. Imagini de fundal

Pentru manipularea imaginilor de fundal (background images) se utilizeaza proprietatea background.

Definitia de mai sus reuneste urmatoarele proprietati.

background-color specific culoarea de fundal a unui element.
valoare: <culoare> | transparent
Se aplic la toate elementele; nu se motenete, fundalul printelui este implicit vizibil
datorit valorii transparent a proprietii.
background-image permite indicarea unei imagini care s constituie fundal pentru element.
valoare: <adres> | none
La setarea unei imagini de fundal este recomandat definirea unei culori de fundal
pentru cazul cnd imaginea nu este accesibil.
background-repeat dac este specificat o imagine de fundal, prin aceast proprietate se
stabileste modul de repetare al imaginii.

repeat - repetare pe verticali pe horizontal

repeat-x, repeat-y - repetare imaginii pe orizontal, respectiv pe vertical

no-repeat - imaginea nu este repetat

background-position dac este specificat o imagine de fundal, indica pozitia initial a unei
imagini. Poate avea valorile top, center, bottom, left, right sau o combinatie a lor ca in exemplul
de mai sus. Este posibil s se indice o pereche <procent> <mrime>, ca si pozitii negative.
Valoarea x y plaseaz imaginea cu x pixeli spre dreapta si y pixeli n jos pornind din coltul
stnga sus. Valoarea x% y% suprapune punctele care se afl la x% pe orizontal si y% pe vertical
din imagine si din zona de coninut. De exemplu:
valoarea 0% 0% plaseaz coltul din stnga sus al imaginii n coltul din stnga sus al
zonei de coninut.
valoarea 100% 100% plaseaz coltul din dreapta jos al imaginii n coltul din dreapta
jos al zonei de coninut.
Dac numai un procentaj sau o mrime este specificat, ea se refer la orizontal,
pozitia vertical fiind considerat 50%.
Proprietatea background stabileste ntotdeauna toate valorile individuale (cele nespecificate
explicit vor fi setate la valorile initiale).
12. Proprietatea display
Specifica modul in care elementele vor fi tratate de catre browser. Aceste proprieti
efectueaz mai degrab o clasificare a elementelor dect o interventie asupra unor atribute vizuale.
Exista trei tipuri fundamentale: in-line, block si none.
inline elementele care sunt afisate in-line vor fi pozitionate pe aceasi linie cu continutul precedent
din document. Elementele strong, anchor sau emphasis fac parte din aceasta categorie.
block elementul creaz un bloc nou pozitionat relativ la blocurile adiacente in concordanta cu
modelul de formatare CSS (Box Model). Inainte si dupa bloc este introdusa o linie noua.
Elementele tipice care sunt afisate block sunt de tipul paragraph si header.
none elementul si coninutul su nu se afieaz.
Urmatorul exemplu manipuleaza cateva elemente in-line si block-line.
Proprietatile display: none si visibility: hidden au
acelasi efect, adica nu afiseaza elementul si continutul sau, dar
actioneaza in mod diferit: display: none indeparteaza complet
elementul din layout iar visibiliy: hidden pastreaza
elementul in layout dar nu afiseaza continutul.
Alte tipuri pentru proprietatea display sunt
8

list-item -elementul creaz un bloc nou cu un marcaj de item de

list n fa. Un exemplu tipic este elementul li. Pentru o
functionare corecta aceste elemente trebuie incluse in tag-uri ul
sau ol.
Pentru formatarea marcajelor unei liste avem la dispozitie urmatoarele proprietati
list-style-image - se aplic la toate elementele cu display: list-item si specific imaginea
utilizat drept marcaj de item.
value: <url> | none
list-style-type - specific marcajul itemilor de list n cazul n care proprietatea
list-style-image este none sau imaginea nu poate fi afisat. Poate lua una din urmatoarele
valori:
disc , circle , square , decimal , lower-roman , upper-roman ,
lower-alpha ,upper-alpha , none

list-style-position - specific pozitia marcajului n raport cu coninutul elementului de list.

Poate lua valorile inside sau outside.
list-style - specific simultan toate proprietile care se refer la modul de afisare a listelor:
list-style-image, list-style-position, list-style-type.
valoare: <list-style-type> | < list-style-position> | <url>
Se recomand precizarea stilurilor pentru itemi la nivel de list (n marcajele ol i ul)

13. Page Layout

Pozitionarea elementelor folosind CSS este mult mai naturala si mai simpla decat pozitionarea
folosind tabele HTML. Sectiunile unei pagini pot fi pozitionate absolut sau relativ fata de celalalte
sectiuni.
13.1 Proprietatea position. Proprietatea position este folosita pentru a specifica daca un
element este pozitionat absolute, relative, static sau fixed.
este proprietatea implicita, elementele fiind pozitionate normal, asa cum
static
apar in documentul HTML.
relative efectul este similar cu static, dar se poate specifica un offset fata pe pozitia
originala folosind proprietatile: top, right, bottom si left.
Absolute anuleaza pozitionarea originala si plaseaza elementul oriunde in pagina
folosind proprietatile top, right, bottom si left.
elementul se comporta ca in cazul folosirii valorii absolute, dar de data
fixed
aceasta este pozitionat relativ la fereastra browserului in loc sa fie pozionat
relativ la pagina web. In teorie elementele definite cu fixed ar trebui sa ramana
imobile chiar in cazul in care se efectueaza un scroll. Nu functioneaza in IE.
Folosind pozitonarea absoluta putem realiza un layout cu 2 coloane pentru urmatorul
document HTML.

Aplicam urmatoarele reguli CSS

Aceste definitii vor pozitiona absolut bara de navigare in coltul stanga sus. Deoarece
dimensiunea este 10em, se introduce o margine cu aceasi valoare pentru continut. Daca dorim sa
extindem designul paginii astfel incat sa includa a treia coloana, modificam regulile CSS astfel.
In documentul HTML se defineste inca un container div cu id-ul navigation2.

Dezavantajul pozitionarii absolute consta in dificultatea adaptarii regulilor de mai sus pentru
layout-uri mai complexe unde se folosesc valori relative pentru dimensiuni, sau care contin footer,
header, etc. Pentru ca elementele sunt pozitionate absolut este dificil sa determinam cu precizie unde
se termina elementele. Pentru aceste cazuri se foloseste pozitionare de tip float.
13.2 Proprietatea float. Proprietatea
float specifica locul in care este afisat
elementul. Poate lua valorile left, right sau
none. Pentru left (right) - elementul este
tratat ca un bloc si este mutat la stnga
(respectiv la dreapta) si textul va curge n
dreapta (respectiv stnga) lui.
Folosind exemplul HTML anterior putem
aplica urmatoarele reguli CSS (efectul este
identic) dar putem imbogati layout-ul cu un
footer.

Daca nu dorim ca urmatorul element sa incapsuleze obiectele flotante, putem utiliza

proprietatea clear. Valorile posibile sunt none , left , right sau both. Proprietatea clear specific
daca elementul permite elemente flotante n prtile laterale.
none - sunt permise elemente flotante pe laturile elementului.
left - nu sunt permise elemente flotante n stnga elementului (acesta va fi mutat
nainte de orice element flotant spre stnga).
right - nu sunt permise elemente flotante n dreapta elementului (acesta va fi mutat
nainte de orice element flotant spre dreapta).
both - nu sunt acceptate elemente flotante n jurul elementului.
Pentru a adauga un footer la designul specificat anterior vom specifica urmatoarea regula:

In documentul HTML se aduaga un element cu ID-ul footer.

10

Exercitii
Exemplu. Fie urmatorul document XHTML

11

Realizati legatura dintre fisierul prezentat mai sus si urmatorul document CSS.

12

2. Realizai foile de stil i documentele HTML care s prezinte urmtoarele vederi n browser:

Folosii proprietatea border-style.

Folosii proprietatea color i background

Folosii proprietatea background-color

Folosii proprietatea word-spacing

Folositi proprietatea letter-spacing

Folositi proprietatea text-decoration

Folositi proprietatea text-transform

Folositi proprietatea font-family

13

Folositi proprietatea margin pentru un tag p

Folositi proprietatea font
3. Realizati foile de stil si documentele HTML care sa prezinte urmatoarele vederi in browser.

Folositi proprietatile background-image si

background-repeat.

Folositi proprietatile background-image,

background-repeat si backgroundattachement

Folositi proprietatile background-image

si background-repeat. Tratati si cazul
repetarii pe orizontala

Folositi proprietatea background

14

Folositi proprietatea list-style-type. Utilizati

toate valorile posibile.

Folositi proprietatea float. Testati pentru

valorile left, right si none. Adaugati o
margine de 20 px la stanga, 15px jos, 0px sus
si la dreapta. Adaugati si o bordura de culoare
rosie cu dimensiunea de 2px.

Folositi proprietatea list-style-image

Se utilizeaza un container div. Folositi

proprietatile float, width, margin,
padding, border si text-align.

15

4. Realizati un meniu orizontal. Modificati apoi regulile CSS pentru a aranja meniul pe verticala.

Pozitionati un element utilizand modul

absolute. Folositi proprietatea position.

Realizati un meniu orizontal. Modificati apoi

regulile CSS pentru a aranja meniul pe verticala.

Adaugati culori unui hyperlink. Folositi

pseudoclase.

Ascundeti tagul header folosind

proprietatea visibility : hidden

Definiti reguli CSS pentru modificarea

stilului hyperlink-urilor. Folositi pseudo
clase.

Resurse

Pentru un tutorial CSS online consultati: http://www.w3schools.com/css/default.asp

Pentru un tutorial HTML online consultati: http://www.w3schools.com/html/default.asp
Pentru un tutorial XHTML online consultati: http://www.w3schools.com/xhtml/xhtml_intro.asp
Pentru un tutorial de CSS Layout consultati:
http://www.subcide.com/tutorials/csslayout/index.aspx

16