Manual CSS

Manual CSS
Table of Contents
Cuprins Lectii :............................................................................................... 4
1 - Scrierea codului CSS.............................................................................4
2 - Crearea Foilor de Stil............................................................................4
3 - Confi gurarea fonturilor........................................................................4
4 - Confi gurarea textului............................................................................ 4
5 - Confi gurari pentru culori si fundal..................................................4
6 - Controale pentru chenare si afi sarea elementelor ....................5
7 - Controale de pozitionare.....................................................................5
8 - Confi gurari pentru vizibilitate si mouse........................................5
9 - Pseudo-clasele......................................................................................... 5
10 - Pseudo-elemente.................................................................................. 5
Introducere................................................................................................................. 6
Scrierea codului CSS............................................................................................... 7
1. Obiectele (regulile) CSS........................................................................7
2. Componentele unui obiect CSS...........................................................8
Crearea Foilor de Stil............................................................................................. 10
1. Etichete HTML si stiluri CSS...............................................................10
2. Defi nirea selectorilor............................................................................11
3. Crearea etichetelor HTML personalizate .......................................12
4. Defi nirea de reguli similare...............................................................13
5. Defi nirea etichetelor in context (imbricate) ................................13
6. Cresterea prioritatii unei defi nitii...................................................13
7. Determinarea ordinii executiei.........................................................13
8. Adaugarea comentariilor la CSS.......................................................14
Configurarea fonturilor.......................................................................................... 15
1. Stabilirea fontului................................................................................. 15
2. Stabilirea dimensiunii fontului.........................................................16
3. Text inclinat............................................................................................. 16
4. Grosimea fontului.................................................................................. 17
5. Majuscule mici......................................................................................... 17
Manual CSS
6. Valori multiple pentru font.................................................................17
Configurarea textului............................................................................................. 19
1. Spatiul intre litere................................................................................. 19
2. Spatiul dintre cuvinte..........................................................................19
3. Spatiul intre linii.................................................................................... 19
4. Marimea (tipul) literelor.....................................................................20
5. Alinierea textului...................................................................................21
6. Alinierea pe verticala a textului .......................................................21
7. Formarea paragrafelor.........................................................................21
8. Aplicarea elementelor decorative ....................................................22
9. Spatiile albe............................................................................................. 22
Configurari pentru culori si fundal.......................................................................24
1. Confi gurarea fundalului.......................................................................24
2. Stabilirea culorii din prim-plan.........................................................26
Controale pentru chenare si afisarea elementelor ..............................................27
1. Latimea si inaltimea unui element ..................................................27
2. Marginile unui element........................................................................27
3. Chenarul unui element.........................................................................28
4. Adaugarea spatiului in interior, in jurul elementului ...............30
5. Elemente fl oat......................................................................................... 30
6. Anularea plasarii unui element in spatiul eliberat de "fl oat" 31
7. Afi sarea si ascunderea elementelor................................................31
Controale de pozitionare....................................................................................... 33
1. Stabilirea modului de pozitionare...................................................33
2. Pozitionarea in raport cu latura de sus, respectiv stanga .....34
3. Pozitionarea in raport cu latura de jos, respectiv dreapta ....34
4. Pozitionarea in spatiul 3D..................................................................35
5. Includerea unui element absolut intr-un element relativ .......35
6. Includerea unui element relativ intr-un element absolut .......36
Configurari pentru vizibilitate si mouse ..............................................................37
1. Stabilirea vizibilitatii unui element ................................................37
2. Stabilirea suprafetei vizibile a unui element ..............................37
3. Defi nirea pozitiei depasirii.................................................................37
2
Manual CSS
4. Aspectul indicatorului de mouse......................................................38
Pseudo-clase.......................................................................................................... 40
1. Pseudo-clase cu selector.....................................................................40
2. Pseudo-clase si clase............................................................................41
3. Pseudo-clase cu id-uri si elemente de formular .........................43
Pseudo-elemente.................................................................................................... 44
1. after............................................................................................................ 44
2. before......................................................................................................... 45
3. fi rst-letter................................................................................................. 46
4. fi rst-line.................................................................................................... 46
Creare Meniu Dublu cu CSS.................................................................................. 48
Meniu Vertical Dublu.................................................................................. 48
Meniu Orizontal-Vertical...........................................................................53
Butoane pentru link-uri folosind o singura imagine si CSS .....................................57
O singura imagine pt meniu cu mai multe link-uri .........................60
Manual CSS
Cuprins Lectii :
1 - Scrierea codului CSS
Obiectele (regulile) CSS : selector, clasa si identificator.
Componentele unui obiect CSS
2 - Crearea Foilor de Stil

Etichete HTML si stiluri CSS
Definirea selectorilor
Crearea etichetelor HTML personalizate
Definirea de reguli similare
Definirea etichetelor in context (imbricate)
Cresterea prioritatii unei definitii
Determinarea ordinii cascadei
Adaugarea comentariilor la CSS
3 - Confi gurarea fonturilor

Stabilirea fontului
Stabilirea dimensiunii fontului
Text inclinat
Grosimea fontului
Majuscule mici
Valori multiple pentru font
4 - Confi gurarea textului

Spatiul intre litere
Manual CSS
Spatiul dintre cuvinte

Spatiul intre linii
Marimea (tipul) literelor
Alinierea textului
Alinierea pe verticala a textului
Formarea paragrafelor
Aplicarea elementelor decorative
Spatiile albe
5 - Confi gurari pentru culori si fundal

Configurarea fundalului
o Culoarea fundalului
o Imaginea de fundal
o Repetarea imaginii de fundal
o Controlul imaginii de fundal
o Pozitia imaginii de fundal
o Stabilirea simultana a proprietatilor fundalului
Stabilirea culorii din prim-plan
6 - Controale pentru chenare si afi sarea elementelor

Latimea si inaltimea unui element
Marginile unui element
Chenarul unui element
Adaugarea spatiului in interior in jurul elementului
Manual CSS
Elemente float
Anularea plasarii unui element in spatiul eliberat de "float"
Afisarea si ascunderea elementelor
7 - Controale de pozitionare
Stabilirea modului de pozitionare
o Pozitionarea statica
o Pozitionarea relativa
o Pozitionarea absoluta
o Pozitionarea fixa
Pozitionarea in raport cu latura de sus, respectiv stanga
Pozitionarea in raport cu latura de jos, respectiv dreapta
Pozitionarea in spatiul 3D
Includerea unui element absolut intr-un element relativ
Includerea unui element relativ intr-un element absolut
8 - Confi gurari pentru vizibilitate si mouse

Stabilirea vizibilitatii unui element
Stabilirea suprafetei vizibile a unui element
Definirea pozitiei depasirii
Aspectul indicatorului de mouse
9 - Pseudo-clasele
Pseudo-clase cu selector
Pseudo-clase si clase
Manual CSS
Pseudo-clase cu id-uri si elemente de formular
10 - Pseudo-elemente
In aceasta lectie invatati ce sunt si ce fac pseudo-elementele
after, before, first-letter, first-line
Introducere
Crearea paginilor HTML este un lucru relativ simplu, invatarea etichetelor
HTML si crearea unor imagini ducand la realizarea de pagini web de o
complexitate medie. Odata cu dezvoltarea internetului, site-urile au devenit din
ce in ce mai complexe, cu un numar mai mare de pagini, cerintele privind
grafica si elementele din pagina au devenit mai pretentioase si astfel
proiectarea paginilor web a devenit o sarcina ceva mai dificila.
O problema importanta cand avem un site cu multe pagini este atunci cand
dorim sa facem anumite schimbari in elementele pagini: fondul, grafica sau
fontul textelor din pagini.
Prin utilizarea CSS (Cascading Style Sheets), in traducere "foi de stil in
cascada", acest lucru nu mai este o problema, realizandu-se relativ usor, prin
schimbarea sau adaugarea unor elemente in codul CSS, ne fiind nevoi sa
lucram la fiecare pagina sau la fiecare element din pagina.
CSS se ocupa in general cu aspectul si controlul grafic al elementelor din
pagina, cum ar fi: textul, imaginile, fondul, culorile si asezarea acestora in
cadrul ferestrei paginii.
CSS foloseste stiluri, acestea inglobeaza, sub un anumit nume, atribute de
formatare care se aplica asupra unui element individual din pagina, asupra
unui grup de elemente sau la nivelul intregului document.
CSS functioneaza cu HTML, insa nu este HTML. El extinde functionalitatile
HTML, permitand redefinirea etichetelor HTML existente.
Prin utilizarea CSS aspectul documentului pe ansamblu, sau a unui element
individual din interiorul sau, poate fi controlat mult mai usor. Stilurile pot fi
aplicate asupra unui element, a unui document sau chiar asupra unui intreg
site web.
Un dezavantaj ar fi ca unele navigatoare nu sunt compatibile CSS, astfel ca
documentele HTML sunt afisate ca si cum CSS n-ar exista, dar cele mai
Manual CSS
cunoscute si utilizate browsere, cum ar fi: Mozilla Firefox, Internet Explorer,

Opera, si altele, sunt compatibile CSS.
Acest curs prezinta elementele de baza CSS si modul de lucru cu "foile de

stil", va invata cum sa adaugati si sa folositi CSS in paginile dv. web.
Tot ce aveti nevoie este un editor de texte simplu, cum ar fi Notepad, si un
navigator, de exemplu Mozilla Firefox, care este gratuit
Pentru a invata cat mai bine elementele prezentate in aceste lectii, exersati
personal fiecare exemplu si proprietate explicata.
Retineti ca acest curs reprezinta un punct de plecare, ne fiind prezentate aici
toate proprietatile si elementele CSS. Pentru o cunoastere mai amanuntita a
acestora, vizitati site-ul www.w3.org, la sectiunile despre CSS.
Manual CSS
Scrierea codului CSS

Codurile CSS pot fi scrise in interiorul paginii sau intr-un fisier extern cu
extensia".css".
Codul CSS, ca forma generala, este alcatuit din: obiectul care va fi formatat,
proprietatile acestuia si valoarea (sau atributele) fiecarei proprietati.
Cand este adaugat in documentul HTML , trebuie scris in cadrul unui
tag <style> in sectiunea HEAD a documentului HTML, dupa cum se vede in
formula generala de mai jos;
<html>
<!DOCTYPE html>
<head>
<html>
<title>Titlul</title>
<head>
<style>
<style type="text/css">
h1 { text-align: center;}
obiect_css {
h2 { text-align: left;}
proprietate:valoare;
h3 { text-align: right;}
alta_proprietate:valoare;
</style>
}
</head>
</style>
<body>
</head>
<h1>This is heading 1</h1>
<body>
... Continut ...
</body>
</body>
</html>
</html>
- Observati sintaxa codului CSS. Perechile proprietate:valoare se scriu intre
acoladele obiectului CSS pe care-l definesc, intre "proprietate" si "valoare"
trebuie sa fie un caracter doua-puncte (:) iar la sfarsitul perechii se adauga un
caracter punct-si-virgula (;)
- Cand este adaugat intr-un fisier extern ".css", codul CSS se scrie la fel, dar nu
se mai adauga tag-ul <style>.
1. Obiectele (regulile) CSS

Exista trei tipuri principale de obiecte CSS: selector, clasa si identificator.
- Selectorul HTML
Selectorul HTML se foloseste pentru a redefini modul de afisare a continutului
etichetei HTML.
Un selector HTML reprezinta partea etichetei HTML care indica navigatorului
Manual CSS
tipul de eticheta.
Iata un exemplu:
h1 { font-family:"Arial"; font-size:15px; }
- Aici selectorul este "h1".

Definirea unui selector HTML folosind CSS are ca rezultat redefinirea etichetei
HTML. Selectorul si eticheta desi par identice, totusi nu sunt.
<!DOCTYPE html>
<html>
<head>
<style>
h1 { text-align: center;}
h2 { text-align: left;}
h3 { text-align: right;}
</style>
</head>
<body>
</body>
</html>
- Clasa
Clasa este un obiect care poate fi aplicat oricarei etichete HTML.
O clasa trebuie creata in interiorul etichetei HTML inainte de a fi definita intr-un
cod CSS. Crearea clasei in interiorul etichetei se face simplu, prin specificarea
cuvantului classsi numele clasei, ca in exemplu de mai jos:
<h1 class="nume_clasa"> Text </h1>
- "nume_clasa", poate fi orice nume dorim.
- Apoi in interiorul codului CSS, clasa trebuie definita prin adaugarea unui
caracter punct (.) inaintea numelui clasei, ca in exemplu urmator:
.nume_clasa { font-family:"Arial"; font-size:15px; }
Numele aceleasi clase poate fi atribuit mai multor etichete HTML din aceeasi
pagina, si toate vor prelua acelasi stil css.
<!DOCTYPE html>
<html>
<head>
<style>
p.serif { font-family: "Times New
<!DOCTYPE html>
<html>
<head>
<style>
.center {
10
Manual CSS
Roman", Times, serif;}

p.sansserif { font-family: Arial,
Helvetica, sans-serif;}
</style>
</head>
<body>
<h1 >CSS font-family</h1>
<p class="serif">This is a paragraph,
shown in the Times New Roman
font.</p>
<p class="sansserif">This is a
paragraph, shown in the Arial
font.</p>
</body>
</html>
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned
heading</h1>
<p class="center">Red and center-aligned
paragraph.</p>
</body>
</html>
- Identificator
Obiectele de tip identificator (ID) sunt asemanatoare cu clasele. Pot fi aplicate
oricarei etichete HTML, dar spre deosebire de clase, numele unui identificator
trebuie atribuit numai unei singure etichete HTML dintr-o pagina, pentru alta
eticheta se adauga un ID cu nume diferit.
Ca si clasa, identificatorul trebuie intai creat in interiorul etichetei HTML. Modul
de creare este simplu, prin specificarea cuvantului id si numele clasei, ca in
exemplu de mai jos:
<h1 id="nume_id"> Text </h1>
- "nume_id", poate fi orice nume dorim.
In interiorul codului CSS, identificatorul este definit prin adaugarea unui caracter
diez (#) inaintea numelui, ca in exemplu urmator:
#nume_id { font-family:"Arial"; font-size:15px; }
<!DOCTYPE html>
<html>
<head>
#stil1 {width:450px;
height:70px;
background-color:#999999;
color:#990000;}
</style>
</head>
<body>
11
Manual CSS
<p id="stil1">This is a paragraph, shown in the Times New Roman font.</p>

</body>
</html>
In urmatoarea lectie va fi explicat mai amanuntit modul de definire si rolul
acestor obiecte CSS .
2. Componentele unui obiect CSS

Obiectele CSS, indiferent de tipul lor, au in componenta urmatoarele
elemente:
Selectorii - identifica un obiect; pot fi selectori de etichete HTML, clase
sau identificatori.
Proprietatile - identifica o proprietate a obiectului; se refera in special la
aspect.
Valorile - sunt atributele unei proprietati; pot fi cuvinte cheie, valori
numerice sau procentuale, tipul valorii depinzand de proprietate.
Sintaxa generala a unei reguli CSS este urmatoarea:
selector {proprietate: valoare; }
Proprietatile si valorile constituie definitia regulii (obiectului) CSS. Acestea se
regasesc sub forma de perechi,despartite de caracterul doua puncte :,
fiecare pereche se termina cu un caracter punct si virgula ";".
Etichetele HTML nu sunt sensibile la diferenta intre majuscule si litere mici. Dar
odata cu aparitia limbajului XHTML, acesta face distinctie intre majuscule si
minuscule, astfel ca toate etichetele si toti selectorii trebuie scrisi cu litere mici.
12
Manual CSS
Crearea Foilor de Stil

1. Etichete HTML si stiluri CSS
CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte, prin
stabilirea unui anume stil in interiorul ei, cu atributul "style". Acest lucru este
util mai ales pentru a anula alte stiluri ale elementului respectiv sau de a da
elemente grafice de stil doar etichetei respective.
Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este
urmatoarea:
<eticheta style="proprietate:valoare;"> text ... </eticheta>
<!DOCTYPE html>
<html>
<head>
<title>Exemplu</title>
</head>
<body>
<h1>Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este
urmatoarea</h1>
<p style="color: orange;
text-align: center;
font-size: 20px;">Acesta e un paragraf</p>
</body>
</html>
CSS permite si definirea unor reguli de stil generale intr-o pagina web. Acest set
de reguli trebuie scris in sectiunea de antet (head) a documentului, in cadrul
tag-ului <style>.
Sintaxa pentru definirea CSS intr-un document HTML, in interiorul etichetei
<head> </head>, este urmatoarea:
selector_1 {proprietate1:valoare1; proprietate2:valoare2; ... }
...
selector_n {proprietate1:valoare1; proprietate2:valoare2; ... }
</style>
- Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai
rapida a unei pagini.
Iata un exemplu practic de cod css:
13
Manual CSS
h1 { font-family:Arial; font-size:15px; font-weight:bold; color:#1111ff; }
p {font-family:Arial; font-size:12px; color:blue; }
</style>
<!DOCTYPE html>
<html>
<head>
<title>Exemplu</title>
p {font-family:Arial; font-size:12px; color:blue; }
</style>
</head>
<body>
<h1>Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este
urmatoarea</h1>
<p>Acesta e un paragraf</p>
</body>
</html>
Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de intreg
site. Astfel, trebuie creata o foaie de stil externa intr-un fisier separat, de
preferat cu extensia ".css", care poate fi inclus in pagina HTML prin doua
procedee: legatura sau import.
Crearea unei foi de stil externe se face scriind codul CSS intr-un fisier text cu
ajutorul unui editor de texte simplu (de exemplu Notepad in Windows), sau
specializat in acest sens (precum Notepad++). In fisierul extern creat se adauga
reguli CSS, fara insa ca aceste reguli sa fie incadrate in etichete STYLE.
Dupa ce a fost creata foaia de stil externa, aceasta poate fi folosita de un
document HTML utilizand urmatoarea sintaxa, in interiorul tag-ului <head>
</head>:
<link rel="stylesheet" href="nume_fisier.css" type="text/css">
P.special {
color : green;
border: solid red;
}
<HTML>
<HEAD>
<Title> Foaia de stil externa</title>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
14
Manual CSS
<P class="special">This paragraph should have special green text.</p>

</BODY>
</HTML>
- Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele

folosite transmit navigatorului tipul de legatura ("rel" - legatura cu o foaie de
stil, "type" - tipul codului din fisier) si locatia inspre fisierul ce contine codul CSS
("href" - calea si numele complet al fisierului, inclusiv extensia).
O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o
reprezinta importul acestora folosind comanda @import.
Sintaxa pentru importul unei foi de stil externe este urmatoarea:
@import url(nume_fisier.css);
</style>
P.special {
color : green;
border: solid red;
}
<HTML>
<HEAD>
<Title> Foaia de stil externa</title>
@import url(special.css);
</style>
</HEAD>
<BODY>
<P class="special">This paragraph should have special green text.</p>
</BODY>
</HTML>
Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a

documentului HTML eticheta STYLE. In cadrul acestei etichete este adaugata
instructiunea "@import" de mai sus, unde "nume_fisier.css" reprezinta calea si
numele fisierului ce contine regulile CSS definite.
Alaturi de instructiunea "@import", in cadrul etichetei STYLE, pot fi adaugate
definiti si selectori suplimentari.
Legatura la un fisier CSS extern sau importul acestuia intr-un document HTML
15
Manual CSS
are acelasi efect ca si cum stilurile incluse ar fi fost definire direct in eticheta
STYLE din sectiunea HEAD a documentului HTML.
2. Defi nirea selectorilor

- Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii
compatibilie cu eticheta HTML la care se refera, avand urmatoarea forma
generala:
selector_HTML { proprietate1:valoare1;
proprietate2:valoare2; ... }
Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul

HTML vor fi modificate automat. Prin redefinirea unei etichete, proprietatile
prestabilite existente nu sunt anulate, ci se adauga altele noi.
Utilizarea selectorilor de tip clasa ofera posibilitatea configurarii unor stiluri care
se pot aplica doar acelor elemente care sunt etichetate cu clasa respectiva.
Sintaxa generala de definire a unei clase CSS este:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
.central { text-align: center; color: red;}

Exista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna
ca acea clasa poate fi folosita doar cu eticheta HTML respectiva. Pentru a defini
o clasa care sa afecteze in mod direct un anume selector HTML, se foloseste
urmatoarea sintaxa:
selector_HTML .nume_clasa { proprietate1:valoare1;
<!DOCTYPE html>
<html>
<head>
p.stil {width:450px;
height:70px;
color:#990000;}
</style>
</head>
16
Manual CSS
<body>
<p class="stil">Paragraf 1.</p>
<p class="stil">Paragraf 2.</p>
</body>
</html>
Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase
e recomandat sa fie diferit de cuvintele rezervate JavaScript.
- Asemanator cu selectorii de clasa se definesc si identificatorii (id-ul). Acestia
sunt folositi pentru crearea de stiluri care pot fi atribuite unei singure etichete
HTML dintr-o pagina. Sintaxa generala de definire a unui identificator este:
#identificator { proprietate1:valoare1;
<!DOCTYPE html>
<html>
<head>
#stil {width:450px;
height:70px;
color:#990000;}
</style>
</head>
<body>
<p id="stil">Paragraf 1.</p>
<p id="stil">Paragraf 2.</p>
<h3 id="stil">Paragraf 3.</h3>
</body>
</html>
Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi
doar o singura data in cadrul unei pagini web pentru identificarea tag-ului
respectiv, astfel poate fi manipulat si cu ajutorul functiilor JavaScript.
Numele unui identificator e recomandat sa fie diferit de cuvantele rezervate
JavaScript.
3. Crearea etichetelor HTML personalizate

Majoritatea etichetelor HTML au unele proprietati prestabilite. Acestea fie
raman asa cum sunt, fie pot fi redefinite. Exista insa cazuri in care se doreste
crearea unor etichete personalizate, pornind de la zero. In acest caz se folosesc
etichetele <span> si <div>.
Eticheta <span> nu are proprietati mostenite. Ea reprezinta doar o locatie
17
Manual CSS
vida care creaza o eticheta in linie.

Pentru a configura o eticheta in linie trebuie definita o clasa sau identificator
care sa poata fi aplicat apoi unei etichete <span>. Iata un exemplu cu, forma
generala, in care selectori sunt precedati de eticheta <span> :
...
<span class="nume_clasa"> ... </span>
...
<span id="span1"> ... </span>
...
<span class="clasa_span"> ... </span>
...
Acum iata cum pot fi definiti acestia in interiorul unei foi de stil:
#span1 { proprietate1:valoare1; proprietate2:valoare2; ... }
span .clasa_span { proprietate1:valoare1; proprietate2:valoare2; ... }
<!DOCTYPE html>
<html>
.stil1 {color:blue;font-weight:bold}
.stil2 {color:green;font-weight:bold}
</style>
<body>
<p>My mother has <span class="stil1">blue</span> eyes and my father has
<span class="stil2">dark green</span> eyes.</p>
</body>
</html>
In momentul in care se doreste configurarea unui bloc separat de restul
continutului unui document HTML, solutia este eticheta <div>. Aceasta creaza o
zona proprie in pagina, cu linie noua atat deasupra sa cat si dedesubtul sau.
Pentru crearea etichetelor DIV se procedeaza la fel ca si in cazul etichetelor in
linie SPAN, prin definirea mai intai a unei etichete de tip clasa sau identificator,
urmata apoi de aplicarea ei asupra unei etichete <div>.
Iata forma generala de aplicare a unei etichete <div> intr-o pagina HTML :
...
<div class="nume_clasa"> ... </div>
...
<div id="div1"> ... </div>
...
Definirea acestor etichete <div> intr-un cod CSS se face astfel:

div { proprietate1:valoare1; proprietate2:valoare2; ... }
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }
<!DOCTYPE html>
<html>
18
Manual CSS
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
</body>
</html>
Regulile CSS pentru definirea etichetelor <span> sau <div>, pot fi plasate la fel
ca si celelalte tipuri de selectoare, in sectiunea "head" a documentului in
interiorul etichetei "style", sau intr-un fisier extern carev ulterior este legat sau
importat in documentul HTML.
Mai multe lucruri despre DIV si SPAN puteti invata de aici -> DIV si SPAN.
4. Defi nirea de reguli similare

Daca mai multi selectori folosesc aceleasi definitii css, acestia pot avea
aceeasi lista de elemente, fiind scrisi separat prin virgule. Sintaxa generala
pentru definirea unei liste cu mai multi selectori este urmatoarea:
selector1, selector2, ... { proprietate1:valoare1;
<!DOCTYPE html>
<html>
<head>
<style>
h1,p { font-family:Arial; font-size:15px; font-weight:bold; color:#0000FF; }
</style>
</head>
<body>
<h1>This is a heading.</h1>
</body>
</html>
Impreuna cu selectorii pot fi de asemenea definiti identificatorii si clasele.

Dezavantajul ar fi ca in momentul in care este modificata o valoare a unei
19
Manual CSS
proprietati incluse in definitie, valoarea respectiva se va modifica in toate

etichetele reprezentate de acesti selectori.
5. Defi nirea etichetelor in context (imbricate)

Cand o eticheta este inconjurata de alte etichete (aflandu-se astfel una in
interiorul alteia), spunem ca aceste etichete sunt imbricate. Eticheta exterioara
se numeste, in acest caz, eticheta parinte, iar cea inferioara se numeste copil.
Se pot crea reguli care revin numai etichetelor copil, sintaxa generala a unei
astfel de reguli fiind:
selector1 selector2 ... { proprietate1:valoare1;
- Unde "selector1" este selectorul parinte iar "selector2" este selectorul copil.
Lista de selectori imbricati poate fi mai mare de doi, ultimul selector din lista
este cel care primeste toate stilurile incluse in regula si in plus le mosteneste si
pe cele ale parintilor.
Ca si selectorii singuri, selectorii imbricati pot include in lista clase, identificatori
sau selectori HTML.
Toate etichetele HTML, cu exceptia etichetei BODY, au cel putin o eticheta
parinte care le inconjoara. De cele mai multe ori stilurile etichetelor din interior
preiau stilurile etichetelor parinte (exista insa cazuri in care proprietatile nu sunt
mostenite de etichetele imbricate). Acest mecanism se numeste mostenirea
stilurilor.
Prin redefinirea unui selector, eticheta nu-si pierde proprietatile prestabilite,
doar in cazul in care acestea sunt modificate. Astfel proprietatile mostenite pot fi
anulate prin redefinirea acestora in lista de definitii a etichetei imbricate.
6. Cresterea prioritatii unei defi nitii

Valoarea !important adaugata unei definitii atribuie maximum de prioritate
in determinarea ordinii unei executii.
Valoarea !important trebuie plasata inaintea caracterului ;, ca in exempul
urmator:
selector { proprietate1:valoare1; proprietate2:valoare2 !
important; ... }
7. Determinarea ordinii executiei

Deoarece exista mai multe moduri de a aplica stilurile, pot apare situatii in
care unei etichete sa-i fie aplicate mai multe stiluri. Foile de stil din doua sau
mai multe surse, folosite simultan, pot cauza contradictii. De aceea exista
cateva reguli care determina ordinea executiei (numita si cascada), acestea
sunt:
1. Regulile CSS scrise in interiorul paginii HTML, in cadrul etichetei "style"
din sectiunea "head" au o prioritate mai mare decat cele scrise intr-un
20
Manual CSS
fisier extern, iar regulile scrise in interiorul etichetelor au o prioritate mai

mare decat cele din cadrul etichetei "style" din sectiunea "head".
2. Existenta atributului !important - confera prioritate maxima la
afisare definitiei in care este utilizat.
3. Sursa regulilor - exista numeroase navigatoare care permit
utilizatorului sa-si defineasca propriile foi de stil. Totusi, foile de stil ale
autorului le anuleaza pe cele ale vizitatorului daca acestea din urma nu
au valoarea "!important".
4. Specificitate - cu cat o regula dispune de mai multi selectori HTML,
de clasa si de identificator, cu atat prioritatea ei creste. ID-urile au
valoarea 100, clasele au valoarea 10, iar selectorii HTML au valoarea 1.
5. Momentul aparitiei - cu cat un stil apare mai tarziu, cu atat
importanta lui este mai mare. Astfel, definitiile unei etichete copil au
prioritatea mai mare si anuleaza toate stilurile precedente cu care intra
in conflict.
8. Adaugarea comentariilor la CSS

Este bine ca uneori sa fie adaugate comentarii in codul CSS, mai ales in cazul
fisierelor externe. Comentariile ajuta la intelegerea codului, facandu-se astfel
cunoscut, pentru mai tarziu, rolul anumitor elemente din codul CSS.
Comentariile nu au nici un efect si pot fi plasate in jurul regulilor, fiind utile si in
cazul navigatoarelor care nu suporta CSS.
Pentru a adauga comentarii in regulile de stil avem la dispozitie doua
modalitati:
In cazul in care comentariul se intinde pe un singur rand este suficienta
folosirea perechii de caractere // urmata de comentariu.
In cazul in care comentariul contine mai multe linie, trebuie plasat intre
/* care deschide zona de comentariu si */ care indica sfarsitul
comentariului.
In cazul folosirii comentariilor cu // se pot adauga oricate slash-uri, minimul
fiind de doua.
Iata un exemplu in care puteti vedea cum pot fi adaugate comentariile:
/* Comentariu,
pe mai
multe linii */
// Comentariu pe o singura linie
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }
21
Manual CSS
Configurarea fonturilor
Alegerea potrivita a fonturilor si folosirea acestora in cadrul paginilor web
este importanta, poate atrage critici si comentarii din partea vizitatorilor, mai
ales daca formatarea clasica prin scris normal, aldin sau cursiv nu este folosita
corespunzator. CSS include facilitati de control asupra aspectului fonturilor, prin
posibilitatea de a stabili familia de fonturi, atributele ingrosat si inclinat,
dimensiunea literelor precum si spatiul dintre linii.
Exista cinci familii de fonturi de baza:
serif - au un ornament (serif) plasat la terminatia literei, care ii ofera o
distinctie speciala. Sunt folosite pentru tiparire, chiar daca textele sunt
mai mari sau mai mici. Nu sunt indicate pentru afisarea textelor pe
ecran.
sans serif - sunt fonturi care nu folosesc serife, fiind indicate pentru
continut text general.
monospace - fonturile monospatiate pot avea serife, ele se deosebesc
prin faptul ca fiecare litera ocupa aceeasi cantitate de spatiu. Sunt cele
mai indicate pentru textele care trebuie citite cu exactitate, ca de
exemplu liniile de program.
cursive - imita scrisul de mana, intr-o maniera stilizata. Sunt indicate in
scopuri decorative, nefiind recomandate pentru scrierea unor texte mai
lungi.
fantasy - nu se incadreaza in nici una dintre categoriile de mai sus, fiind
fonturi care au un caracter predominant ornamental (reprezentand
ilustratii sau pictograme).
1. Stabilirea fontului
Fontul folosit pentru afisarea unui text poate fi stabilit prin proprietatea
"font".
Pentru definirea fontului in cadrul unei reguli, trebuie specificata, dupa
selectorul din cadrul foii de stil, proprietatea font-family urmata de numele
fontului sau a fonturilor (despartite prin virgula). Este bine ca numele fonturilor
sa fie incadrate intre ghilimele simple sau duble, mai ales daca numele
acestora contine spatii.
Forma generala fiind urmatoarea:
selector { font-family:"nume_font1", "nume_font2", ...,
nume_generic }
22
Manual CSS
- Dupa ultima virgula se pot folosi urmatoarele nume generice de fonturi: "serif",
"sans-serif", "cursive", "monospace" sau "fantasy". Includerea unei asemenea
valori este optionala, insa recomandata.
Iata un exemplu practic:
h1 { font-family:"Arial", "Helvetica", sans-serif }
Cand este specificata o lista de fonturi, navigatorul incearca sa foloseasca

primul font din lista, daca nu este gasit parcurge lista pana in momentul in care
intalneste un font instalat. Daca nu exista fonturi echivalente, textul va fi afisat
cu fontul prestabilit de browser. Daca este specificat un nume generic, textul va
fi afisat cu un font apartinand aceluiasi stil, in cazul in care fonturile specificate
in lista nu sunt disponibile.
Exista posibilitatea folosirii unei palete largi de fonturi in crearea paginilor web,
nu doar a celor din lista limitata a fonturilor compatibile cu navigatoarele.
Solutia consta in inglobarea fontului in cadrul paginii si trimiterea lui in mod
automat in calculatorul vizitatorului, adica, descarcarea si folosirea lui automata.
Pentru a ingloba un font intr-o pagina si a-l descarca, se foloseste
intructiunea @font-face. Aceasta trebuie sa includa proprietatea font-family,
urmata de numele fontului si apoi trebuie indicata locatia pe server de unde
poate fi descarcat fontul respectiv.
Codul CSS este urmatorul:
@font-face { font-family:nume_font src: url(locatie_font); }
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.ttf);}
div { font-family: myFirstFont;}
</style>
</head>
<body>
<div>Paragraf 1</div>
<p><b>Note:</b> Paragraf 2</p>
</body>
</html>
Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un

anume format. Totusi, problema este ca nu exista un format valabil pentru toate
navigatoarele, de exemplu Internet Explorer foloseste fonturi in format "eof"
23
Manual CSS
(obtinute cu ajutorul unui program numit WEFT), iar Mozilla foloseste un format
"otf".
2. Stabilirea dimensiunii fontului

Cu ajutorul CSS se poate stabili dimensiunea fontului folosind valori absolute
(exprimate in diferite unitati de masura: pixeli, centimetri), procentuale, sau
chiar relative.
Pentru a defini dimensiunea fontului in cadrul unei reguli trebuie specificata
proprietatea font-size urmata de o valoare a dimensiunii care poate lua una
din urmatoarele tipuri de valori:
- unitate de masura - exprimata in pixeli, puncte, inci sau centimetri
- expresie absoluta - xx-small, x-small, small, medium, large, x-large si
xx-large
- expresiile smaller sau larger, ca raport cu elementul parinte
- procent - un numar exprimat in procente (cu %), care indica marimea
textului in raport cu dimensiunea elementului parinte
Iata forma generala a codului CSS pentru stabilirea dimensiunii fontului:
selector { font-size:valoare }
Este bine ca pentru foile de stil care formateaza iesirea la imprimanta sa se
foloseasca ca unitati de masura punctele, cm sau mm.
Pixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru
stabilirea dimensiunii fontului. Pixelii nu reprezinta o masura foarte sigura, dar,
de obicei, pentru afisarea pe ecran, constituie o masura mai sigura decat
dimensiunea in puncte.
Iata un exemplu practic exprimat in pixeli:
h1 { font-size:15px; }
3. Text inclinat
Atributul "font-style" permite scrierea textelor inclinate in doua moduri:
"cursiv" si "oblic". Notiunile pot fi confundate, insa cursivul se refera la
versiunea unui font a carui caractere au o inclinare spre dreapta, iar oblicul
este un font inclinat fortat spre dreapta.
Pentru a crea caractere cursive in cadrul unei reguli trebuie precizata
proprietatea font-style, astfel:
selector { font-style:valoare }
24
Manual CSS
Unde "valoare" poate fi unul din urmatoarele

cuvinte: normal, italic sau oblique
Iata un exemplu:
h1 { font-style:italic; }
Valoarea normal se poate folosi pentru a sterge formatarea cu caractere

inclinate atunci cand aceasta este mostenita.
4. Grosimea fontului
Ingrosarea este una dintre metodele utilizate des pentru scoaterea in
evidenta a unui text. CSS confera mai multa flexibilitate in utilizarea textului
ingrosat decat elementul HTML <b>, prin posibilitatea introducerii unei valori
proprietatii font-weight, dupa cum urmeaza:
bold - scrie fontul folosind caractere ingrosate
bolder - mareste grosimea fontului relativ la grosimea curenta
lighter - micsoreaza grosimea fontului fata de grosimea curenta
- o valoare cuprinsa intre 100 si 900 (multiplu de 100) - reprezinta
valoarea ingrosarii, bazata pe versiunile alternative disponibile ale
fontului
normal - elimina formatarea cu caractere aldine (ingrosate)
In cazul folosiri valorii cuprinse intre 100 si 900, 400 reprezinta valoarea
corespunzatoare textului normal, iar 700 valoarea ingrosarii pentru stilul aldin.
Majoritatea fonturilor nu dispun de noua ponderi, astfel ca daca este specificata
o valoare care nu este disponibila, va fi folosita o alta pondere.
Forma generala pentru stabilirea grosimii fontului este urmatoarea:
selector { font-weight:valoare }
Iata un exemplu practic:
h1 { font- weight:bold; }
5. Majuscule mici
Majusculele mici sunt folosite de obicei in cadrul titlurilor, ele fiind obtinute
prin convertirea literelor mici in majuscule cu o dimensiune mai mica decat
majusculelor normale. Astfel se obtin cuvinte in care toate literele sunt scrise
cu majuscule insa prima litera este mai inalta decat celelalte.
Stabilirea unei reguli pentru majuscule mici se realizeaza prin utilizarea
proprietatii font-variant cu valoarea small-caps. Prin folosirea
valorii normal, vor fi anulate celelalte valori mostenite ale proprietatii fontvariant.
Forma generala este urmatoarea:
25
Manual CSS
selector { font-variant:valoare }
Iata cum formatam un text dintr-o eticheta "h1" cu valoarea "small-caps":
h1 { font-variant:small-caps; }
6. Valori multiple pentru font

Deseori este util sa fie precizate toate elementele fontului intr-o singura
definitie.
Pentru a se realiza acest lucru este folosita proprietatea "font" urmata de
valorile pentru celelalte proprietati, separate prin spatiu.
Sintaxa generala este urmatoarea:
selector { font:val_font-family val_font-style val_font-variant
val_font-weight val_font-size val_height }
Daca o anumita valoare din lista este omisa, navigatorul va folosi valoarea
prestabilita.
Iata si un exemplu practic de folosire a mai multor valori in aceeasi definitie:
h1 { font:"Arial",sans-serif italic small-caps bold 14pt; }
<!DOCTYPE html>
<html>
<head>
<style>
h1 { font-size:15px; font-style:italic; fontweight:bold; font-variant:small-caps; }
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>
p {font: italic bold 30px Georgia, serif
}
</style>
</head>
<body>
<h1>Zona de titlu</h1>
<p>Zona de titlu</p>
</body>
</html>
</body>
</html>
26
Manual CSS
Configurarea textului
Textele alcatuiesc o buna parte din paginile web. Metodele de afisare a
textelor prin controlul nu numai a fontului, dimensiunii si culorilor, ci si prin alte
elemente, pot imbunatati aspectul pagini si pot atrage atentia asupra anumitor
elemente din text.
1. Spatiul intre litere

Spatierea se refera la cantitatea de spatiu dintre literele unui cuvant. Se
poate aduaga sau reduce spatiul dintre litere folosind proprietatea letterspacing, urmata de o valoare exprimata intr-o anumita unitate de masura, ce
poate lua si valori negative.
selector { letter-spacing:valoare }
Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la
valorile implicite (fara modificari suplimentare).
Daca se utilizeaza o valoare exprimata in em atunci dimensiunea rezultata va fi
calculata in raport cu cea a elementului parinte.
Exemplu:
h1 { letter-spacing:1,5em; }
- Puteti folosi si pixeli (px)
2. Spatiul dintre cuvinte

CSS da posibilitatea modificarii spatiului intre cuvinte atat prin marire, cat si
prin micsorare.
Spatiul dintre cuvinte poate fi modificat folosind proprietatea word-spacing,
urmata de o valoare exprimata intr-o anumita unitate, fiind de obicei stabilita
in pixeli.
Pentru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa
fie: normal.
selector { word-spacing:valoare }
O valoare pozitiva semnifica un plus de spatiu adaugat la valoarea implicita, iar
o valoare negativa reduce acest spatiu. Daca valoarea este egala cu 0 atunci
spatiul dintre cuvinte este fixat la valoarea prestabilita, neproducand de fapt nici
un efect, fiind similar cu valoarea normal.
Iata un exemplu in care marim spatiul intre cuvintele din eticheta "h2" cu 8
pixeli:
h2 { word-spacing:8px; }
3. Spatiul intre linii
27
Manual CSS
Inaltimea randurilor se refera la spatiul dintre liniile paragrafului.

Modificarea spatiului intre linii poate avea ca efect o mai buna si usoara citire a
textului in cazul in care aceasta este mai mare (creaza o regiune cu spatiu intre
liniile de text). Alteori, daca inaltimea este mai mica (folosita la randurile de
titlu), poate conferi un aspect mai stilat.
Pentru a modifiica inaltimea randurilor se foloseste proprietatea line-height,
urmata de o valoare care poate fi exprimata in trei moduri:
- un numar care inseamna multiplicarea dimensiunii fontului cu numarul
respectiv pentru a obtine valoarea spatierii;
- o valoare de tip absolut, exprimata in pixeli, puncte sau orice alta
unitate de masura folosita in CSS, care indiferent de dimensiunea
stabilita a fontului, inaltimea liniei va avea o valoare exacta;
- un procent, care stabileste inaltimea liniei ca fiind egala cu un anumit
procent din dimensiunea fontului folosit pentru scrierea textului.
Sintaxa generala pentru modificarea spatiului intre linii este:
selector { line-height:valoare }
Iata un exemplu in care marim inaltimea liniei cu 50% din dimensiunea fontului:
h1 { line-height:150%; }
Inaltimea liniei poate de asemenea fi definita si in cadrul proprietatii "font-size", prin

introducerea caracterului "/" urmat de valoarea pentru inaltimea randului, imediat dupa
dimensiunea fontului.
Exemplu: h1 { font-size:12px/28px; }
4. Marimea (tipul) literelor

Exista cazuri in care se doreste afisarea textului cu un anume tip de litere.
Folosind CSS, se poate specifica explicit ca textul sa apara cu majuscule
initiale, majuscule, minuscule, combinat sau asa cum a fost el scris.
Cu ajutorul proprietatii text-transform se poate controla marimea literelor din
text, indiferent de modul cum a fost el scris initial.
Pentru a schimba tipul literelor dintr-un text, proprietatea text-transform va fi
urmata de o valoare care poate fi:
capitalize - pentru ca primul caracter din fiecare cuvant sa fie scris cu
majuscula;
uppercase - pentru ca toate caracterele sa fie scrise cu majuscule;
lowercase - pentru ca toate caracterele sa fie scrise cu litere mici;
28
Manual CSS
none - pentru ca textul sa fie afisat asa cum este.

Sintaxa generala este:
selector { text-transform:valoare }
Iata un exemplu in care toate literele vor fi afisate cu majuscule:
h1 { text-transform:uppercase; }
Proprietatea "text-transform" este utila atunci cand textele sunt create in mod
dinamic (de exemplu, in cazul in care ele provin dintr-o baza de date sau form
HTML).
29
Manual CSS
5. Alinierea textului
Un text poate fi aliniat de la marginea din stanga, din dreapta, centrat sau la
ambele margini (stanga-dreapta).
Proprietatea text-align ofera posibilitatea controlului asupra alinierii textului.
Definirea alinierii se face specificand dupa proprietatea text-align una din
valorile: left, right, centersau justify.
Forma generala este:
selector { text-align:valoare }
Proprietatea poate fi aplicata numai elementelor la nivel de bloc (DIV, UL, Hx, p),
valoarea sa implicita fiind in majoritatea cazurilor stabilita la valoarea "left".
Iata un exemplu in care textul din eticheta "h2" este aliniat "stanga-dreapta":
h2 { text-align:justify; }
- In cazul in care alinierea textului este "stanga-dreapta", spatierea cuvintelor si

a literelor se schimba pentru a se obtine linii de aceeasi lungime.
<!DOCTYPE html>
<html>
<head>
<style>
h1 { letter-spacing: 2px;}
h2 { letter-spacing: -3px;}
p.s { word-spacing: 30px;}
p.small { line-height: 70%;}
p.big { line-height: 200%;}
p.uppercase { text-transform: uppercase;}
p.lowercase { text-transform: lowercase;text-align:center; }
p.capitalize { text-transform: capitalize; text-align: right;}
</style>
</head>
<body>
<p class="s">This is some text. This is some text.</p>
<p>This is a paragraph with a standard line-height.</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
30
Manual CSS

</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
</p>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
6. Alinierea pe verticala a textului
Cu ajutorul proprietatii vertical-align se poate preciza pozitia unor elemente
(in linie) in raport cu textul din jurul lor. Asta inseamna ca proprietatea poate fi
folosita doar cu etichete in linie care nu determina un salt la linie noua, de
obicei utilizandu-se cu eticheta "span".
Sintaxa pentru utilizarea proprietatii vertical-align este:
selector { vertical-align:valoare }
<!DOCTYPE html>
<html>
<head>
<style>
img.top { vertical-align: text-top;}
img.bottom { vertical-align: text-bottom;}
</style>
</head>
<body>
<p>O <img src="buton2.gif" width="270" height="50" /> imagine cu text
aliniat default/implicit.</p> <br>
<p>O <img class="top" src="buton2.gif" width="270" height="50" /> imagine
31
Manual CSS
cu text aliniat sus.</p>

<p>O <img class="bottom" src="buton2.gif" alt="W3Schools" width="270"
height="50" /> imagine cu text aliniat jos.</p>
</body>
</html>
Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele

optiuni:
super - pentru scrierea textului in stil exponent, deasupra liniei de baza;
sub - pentru scrierea textului in stil indice, sub linia de baza;
baseline - pentru scrierea textului pe linia de baza;
- una din valorile: "top", "middle", "bottom", "text-top", "text-bottom" pentru a alinia textul relativ la alinierea parintelui acestuia;
- valoare procentuala - care ridica sau coboara linia de baza a
elementului proportional cu dimensiunea fontului elementului parinte.
Iata un exemplu in care textul din eticheta <span> va aparea ca exponent fata
de textul din stanga-dreapta lui:
span { vertical-align:super; }
<!DOCTYPE html>
<html>
.stil1 {color:blue;font-weight:bold; background-color:yellow;vertical-align:50%;}
</style>
<body>
<p>My mother has <span class="stil1">blue</span> eyes </p>
</body>
</html>
7. Formarea paragrafelor
Cu ajutorul proprietatii text-indent se poate stabili ce spatiu suplimentar
este inserat la inceputul primei linii de text dintr-un paragraf. Pentru aceasta,
proprietatea text-indent este urmata de o valoare exprimata intr-o unitate de
masura (pixeli sau em) sau in procente (proportional cu latimea paragrafului).
selector { text-indent:valoare }
32
Manual CSS
Valorile pozitive determina o indentare tipica (spre dreapta), in timp ce valorile

negative determina o indentare inspre argine, fiind necesar sau marirea umplerii
(padding) sau marirea marginilor.
Iata un exemplu de cod CSS in care va fi determinat un spatiu de 20 pixeli la
inceputul paragrafului din eticheta <p>:
p { text-indent:20px; }
<!DOCTYPE html>
<html>
<head>
<style>
p {text-indent: 50px;text-align:justify; }
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've
been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he
told me, 'just remember that all the people in this world haven't had the advantages
that you've had.'</p>
</body>
</html>
Daca se utilizeaza o valoare exprimata in unitati "em", atunci rezultatul va fi

relativ la dimensiunea fontului elementului asupra caruia se aplica. Pentru
eliminarea decalarii se utilizeaza valoarea 0.
8. Aplicarea elementelor decorative

CSS permite ornarea textului prin scoaterea lui in evidenta in patru moduri:
subliniere, supraliniere, taierea textului cu o linie sau crearea de texte care
clipesc.
Aplicarea de elemente ornamentale unui text se realizeaza prin
proprietatea text-decoration, urmata de una din valorile:
underline -pentru a sublinia textul
overline - pentru a trasa o linie deasupra textului
line-through - pentru a taia textul cu o linie
blink - pentru a face textul sa apara si sa dispara intermitent
Forma generala este :
selector { text-decoration:valoare }
33
Manual CSS
Pentru a elimina decoratiile se foloseste valoarea "none". Prin folosirea acestei

valori se elimina si sublinierile link-urilor, chiar daca navigatorul are prestabilit
sa le arate subliniat.
Iata un exemplu de cod in urma caruia link-urile nu vor mai fi afisate subliniat:
a:link { text-decoration:none; }
<!DOCTYPE html>
<html>
<head>
<style>
h1 { text-decoration: overline;}
h2 { text-decoration: line-through;}
h3 { text-decoration: underline;}
</style>
</head>
<body>
<h1>Acesta este heading 1</h1>
</body>
</html>
Elementul decorativ "blink" a prezentat probleme, fiind de curand eliminat de unele

navigatoare.
9. Spatiile albe
Intreruperile de linie si spatiile albe dintr-un document HTML sunt tratate ca
un singur spatiu sau sunt ignorate, daca nu este utilizata eticheta <pre>.
CSS permite afisarea acestor spatii, precum si a intreruperilor textului, utilizand
proprietatea white-space, urmata de valoarea "pre".
selector { white-space:valoare }
In locul cuvantului "valoare" poate fi adaugat: "pre", "nowrap" sau "normal"
Utilizarea valorii "nowrap" impiedica trecerea la linia urmatoare.
Valoarea "normal" permite navigatorului sa decida asupra modului de tratare a
spatiilor. De obicei, acestea vor fi transformate intr-un singur spatiu.
Iata un exemplu in urma caruia spatiile albe si trecerea la linia noua vor fi afisate
asa cum au fost scrise:
p { white-space:pre; }
Spre deosebire de eticheta <pre> care schimba fontul cu unul monospatiat,

valoarea "pre" a proprietatii white-space nu are nici un efect asupra fontului
elementului la care se aplica.
34
Manual CSS
<!DOCTYPE html>
<html>
<head>
<style>
p { white-space: nowrap;}
</style>
</head>
<body>
<p>
This is some text. This is some
is some text.
is some text.
is some text.
is some text.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p { white-space: pre;}
</style>
</head>
<body>
text. This
text. This
text. This
text. This
<p>
This is
This is
This is
This is
This is
This is
This is
This is
</p>
some
some
some
some
some
some
some
some
</body>
</html>
35
text.
text.
text.
text.
text.
text.
text.
text.
This is some text.

This is some text.
This is some text.
This is some text.
Manual CSS
Configurari pentru culori si fundal

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. Confi gurarea 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 backgroundcolor, urmata de o valoare care reprezinta numele culorii sau valoarea RGB,
exprimata in cod hexa.
selector {background-color:valoare }
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; }
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: yellow;}
h1 {background-color: #00ff00;}
p {background-color: rgb(255,0,255);}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
b) Imaginea de fundal
Puteti utiliza pentru fundal si o imagine, pentru aceasta se foloseste
36
Manual CSS
proprietatea background-image, urmata de adresa URL a locatiei imaginii.

selector { background-image:url('adresa_URL'); }
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'); }
<!DOCTYPE html>
<html>
<head>
<style>
body { background-image: url("buton2.gif"); background-color: #cccccc;}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
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 backgroundrepeat, urmata de o valoare care poate avea una din urmatoarele optiuni:
repeat - pentru a repeta imaginea pe toata suprafata elementului
respectiv;
repeat-x - pentru a repeta imaginea numai pe orizontala;
repeat-y - pentru a repeta imaginea numai pe verticala;
no-repeat - pentru a afisa imaginea o singura data, fara repetare.
selector { background-repeat:valoare }
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; }
37
Manual CSS
<!DOCTYPE html>
<html>
<head>
<style>
body { background-image: url("buton2.gif"); background-color:
#cccccc;background-repeat: repeat-y;}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
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.
selector { background-attachment:valoare }
Iata un exemplu practic aplicat imaginii folosita pentru fundalul paginii:
body { background-attachment:scroll; }
<html>
<head>
<style>
body { background-image:
url('buton2.gif'); background-repeat: norepeat; background-attachment: fixed;}
</style>
</head>
<body>
<p>The background-image is fixed. Try to
scroll down the page.</p>
38
body { background-image:
url('buton2.gif'); backgroundrepeat: no-repeat; backgroundattachment: scroll;}
Manual CSS

<p>The background-image
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
is fixed. Try to
39
Manual CSS
<p>If you do not see any scrollbars, try to

resize the browser window.</p>
</body>
</html>
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:
selector { background-position:valoare }
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; }
<!DOCTYPE html>
<html>
<head>
<style>
body { background-image: url('buton2.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%; }
</style>
</head>
<body>
</body>
</html>
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.
40
Manual CSS
selector {background:val_bg-color val_bg-img val_bg-repet val_bgattach val_bg-position }
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:
selector { color:valoare }
Valoarea culorii poate fi:
numele culorii - una din cele 16 culori predefinite (red, green, blue,
white, silver, ...)
valoare in hexa - sub forma #rrggbb
valoare RGB - sub forma rgb(r, g, b), unde r, g, b pot fi reprezentate prin
numere intregi cuprinse intre 0 si 255 sau procente de rosu, verde si
albastru cu valori intre 0% si 100%.
Iata un exemplu de cod CSS in care culoarea textului din eticheta "h3" este
definita verde:
h3 { color:green; }
41
Manual CSS
Controale pentru chenare si afisarea elementelor

Indiferent daca o eticheta este de sine statatoare sau imbricata in alte
etichete, aceasta poate fi tratata ca un element distinct pe ecran si poate fi
controlata prin intermediul CSS.
Orice element creat intr-o foaie de stil este prezentat in propriul lui cadru.
Notiunea de element se refera la componentele unui document HTML,
configurate prin intermediul etichetelor HTML.
Caseta (cadrul elementului) dispune de numeroase proprietati, intre care se
numara: marginile, chenarul, completarea (umplerea, cunoscuta ca "padding"),
latimea si inaltimea, care pot fi modificate cu ajutorul CSS.
Elementele HTML au patru laturi (sus, dreapta, jos si stanga) la care se pot
aplica proprietatile CSS specifice, restul proprietatilor CSS (font, text, culoare,
fundal) se aplica in continutului casetei. Continutul poate include texte, liste,
formulare sau imagini.
1. Latimea si inaltimea unui element

Latimea si inaltimea elementelor pot fi specificate cu ajutorul
proprietatilor width si height.
In mod prestabilit acestea sunt determinate automat de catre navigator, fiind
egale cu necesarul afisarii intregului continut. Pentru definirea latimii si
inaltimii se folosesc urmatoarele tipuri de valori:
- o valoare de tip numeric, de obicei in pixeli;
- un procent, care stabileste o valoare proportionala in functie de cea a
elementului parinte;
- valoarea auto, care foloseste latimea si inaltimea calculata de navigator,
si care reprezinta cantitatea de spatiu maxim pe care o poate ocupa
elementul pentru afisarea intregului continut.
Sintaxa generala pentru configurarea latimii si inaltimii este:
selector { width:valoare; height:valoare }
Iata un exemplu in care elementul cu id="un_id" va avea latimea de 300 pixeli si
inaltimea de 500 pixeli:
#un_id { width:300px; height:500px; }
<!DOCTYPE html>
<html>
<head>
<style>
img.normal {height: auto;}
img.big {height: 220px;}
42
Manual CSS
p.ex {height: 100px;width: 100px;}
</style>
</head>
<body>
<img class="normal" src="buton2.gif" width="95" height="84"><br>
<img class="big" src="buton2.gif" width="95" height="84">
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>
2. Marginile unui element

Proprietatea margin permite stabilirea distantei dintre un element si alte
elemente alaturate, prin specificarea unei valori pentru marginea din fiecare
latura (sus, dreapta, jos, stanga).
Daca specificati cele 4 valori in aceeasi definitie, acestea reprezinta marginile
elementului in urmatoarea ordine: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, aceasta va fi aplicata tuturor marginilor.
In cazul in care specificati doua sau trei valori, atunci valorile care lipsesc sunt
copiate dupa valorile marginilor opuse.
Sintaxa generala pentru configurarea marginilor unui selector este:
selector { margin:valoare/valori; }
Tipul de valoare folosit poate avea urmatoarele optiuni:
- o valoare de tip lungime (numerica) - care poate fi si negativa;
- o valoare procentuala (procent) - creaza o margine proportionala cu
latimea elementului parinte;
- valoarea auto -lasa controlul marginilor la decizia navigatorului.
Iata un exemplu in care etichetele DIV vor avea distanta pentru marginea de sus
10 pixeli, dreapta 5 pixeli, jos 8 pixeli si in stanga 15 pixeli:
div { margin:10px 5px 8px 15px; }
Exista posibilitatea de a stabili valoarea marginii doar pentru o singura latura,

fara a tine cont de celelalte margini. Pentru aceasta sunt folosite
proprietatile margin-top,margin-bottom, margin-left si margin-right cu
aceleasi valori ca si in cazul proprietatii margin, dupa cum puteti vedea mai jos.
selector { margin-top:valoare; }
selector { margin-bottom:valoare; }
43
Manual CSS
selector { margin-left:valoare; }
selector { margin-right:valoare; }
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 { margin: 6cm 8cm 8cm 4cm;}
</style>
</head>
<body>
<p>A paragraph with no specified margins.</p>
<p class="ex1">A paragraph with specified margins.</p>
<p>A paragraph with no specified margins.</p>
</body>
</html>
3. Chenarul unui element

Proprietatea border permite stabilirea simultana a atributelor chenarului
pentru toate cele patru laturi ale casetei. Aceasta foloseste 3 valori distincte,
pentru a configura latimea (grosimea), stilul si culoarea liniei bordurii.
Sintaxa generala pentru definirea chenarului este:
selector { border:val_grosime val_stil val_culoare; }
Unde
- prima valoare (val_grosime) reprezinta grosimea chenarului si poate fi
una din urmatoarele tipuri:
o - o valoare de tip lungime (valoarea 0 determina anularea

afisarii chenarului);
- un cuvant cheie (thin, medium, thick) care caracterizeaza o
dimensiune relativa.
- a doua valoare (val_stil) reprezinta numele stilului atribuit chenarului
(valoarea "none" anuleaza afisarea chenarului);
- ultima valoare (val_culoare) reprezinta culoarea, exprimata in cod hexa
sau valoare RGB.
Iata un exemplu in care div-urile vor avea o bordura groasa de 1 pixel, solid si
culoare albastra:
44
Manual CSS
div { border:1px solid blue; }
- Pot fi folosite si proprietati separate pentru fiecare: "border-width", "borderstyle" si "border-color"; prezentate in continuare.
Un atribut care poate fi folosit in configurarea chenarului este border-width,
acesta furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din
jurul unei casete.
selector { border-width:valoare; }
Daca specificati toate cele patru valori, ele sunt aplicate in ordinea: sus,
dreapta, jos, stanga.
Daca specificati doar o valoare, ea va fi aplicata tuturor marginilor.
Daca folositi doua sau trei valori, valorile care lipsesc sunt copiate din valorile
marginilor opuse lor in caseta.
Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat
celor patru margini si este definit astfel:
selector { border-style:valoare; }
Pentru specificarea valorii, pot fi folosite urmatoarele tipuri:
Ultimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu
sunt acceptate de catre navigator, in locul lor se va folosi valoarea cu linie plina.
Un alt atribut care poate fi utilizat in configurarea chenarului este border-color,
acesta stabileste culoarea pentru toate cele patru laturi ale chenarului si
foloseste pentru valoarea ei un singur cuvant cheie exprimat in cod hexa,
valoare RGB sau numele culorii.
45
Manual CSS
selector { border-color:valoare; }
Puteti stabili culoarea fiecarei margini si separat, folosind proprietatile:
border-top-color, border-right-color, border-bottom-color si border
-left-color
Fiecare latura a chenarului poate avea valori configurate in mod separat (prin
care se stabilesc stilul si culoarea fiecarei borduri din jurul elementului) dupa
cum este prezentat mai jos:
selector { border-top:grosime stil culoare; }
selector { border-bottom:grosime stil culoare; }
selector { border-left:grosime stil culoare; }
selector { border-right:grosime stil culoare; }
<!DOCTYPE html>
<html>
<head>
<style>
p.stil1 { border: 5px solid red;}
p.stil2 { border-width: 10px;border-style: double;border-color: #ff0000
#00ff00 #0000ff rgb(250,0,255)}}
</style>
</head>
<body>
<p class="stil1">Textul are formatul din stil1.</p><br><br>
<p class="stil2">Textul are formatul din stil2.</p>
</body>
</html>
4. Adaugarea spatiului in interior, in jurul elementului

Proprietatea padding adauga o cantitate de spatiu suplimentar in jurul
continutului elementului, in interiorul chenarului, intre bordura si continut.
Forma generala pentru utilizarea acestei proprietati este:
selector { padding: valoare/valori; }
Valoarea pentru completarea spatiului poate fi una din urmatoarele:
- o valoare de tip lungime
46
Manual CSS
- o valoare procentuala - creaza umplerea in raport cu latimea

elementului parinte.
Cand specificati toate cele patru valori, ele sunt aplicate in ordinea: sus,
dreapta, jos, stanga.
Daca specificati doar o valoare, aceasta va fi aplicata tuturor celor patru directii.
Daca specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate
dupa valorile laturilor opuse.
Iata un exemplu in care etichetele DIV vor avea distanta padding: sus 4 pixeli,
dreapta 2 pixeli, jos 3 pixeli si in stanga 2 pixeli:
div { padding:4px 2px 3px 2px; }
Fiecare latura a chenarului poate avea proprietatea padding configurata

separat:
selector { padding-top:valoare; }
selector { padding-bottom:valoare; }
selector { padding-left:valoare; }
selector { pading-right:valoare; }
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 { padding: 2cm;}
p.ex2 { background-color:yellow; width:100px; padding:10px 1px
15px 50px}
</style>
</head>
<body>
<p class="ex1">This text has equal padding on each side. The
padding on each side is 2cm.</p>
<p class="ex2">This text has a top and bottom padding of 0.5cm
and a left and right padding of 3cm.</p>
</body>
</html>
5. Elemente fl oat
CSS ofera posibilitatea de a "infasura" anumite elemente in jurul altora. Acest
lucru se face prin intermediul proprietatii float, care determina o mutare
fortata a elementului in directia data de valoarea mentionata, lasand loc liber
in spatiul opus directiei, care va fi ocupat de urmatorul element din codul
HTML.
Sintaxa generala pentru utilizarea acestei proprietati este:
47
Manual CSS
selector { float:valoare; }
Unde "valoare" poate fi" left, right si none
Valoarea "none" permite elementului sa fie plasat acolo unde este posibil, iar
celelalte valori forteaza plasarea elementului in stanga sau in dreapta ecranului,
textul din exteriorul etichetei HTML respective va fi plasat in partea opusa, in
jurul elementului.
Iata un exemplu in care elementul cu id="un_id" va fi fortat sa fie pozitionat in
dreapta celorlaltor elemente:
#un_id { float:right; }
<!DOCTYPE html>
<html>
<head>
<style>
img.stil1 { float: right;}
img.stil2 { float: left;}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right and
left</b>. The result is that the image will float to the right and left in the
paragraph.</p>
<p><img class="stil1" src="buton2.gif" width="95" height="84" />
<img class="stil2" src="buton2.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
</p>
</body>
</html>
6. Anularea plasarii unui element in spatiul eliberat de

"fl oat"
Asemanator cu actiunea etichetei HTML <br>, care trece pe un nou rand
elementele ce o preced, este si proprietatea clear.
Cu ajutorul acesteia se poate anula ocuparea unui spatiu care a fost lasat liber
de un element care utilizeaza proprietatea "float".
Sintaxa generala pentru utilizarea proprietati clear:
48
Manual CSS
selector { clear:valoare; }
Unde "valoare" specifica latura in jurul careia este interzisa infasurarea textului
si poate lua valoarea: left, right sau both. Se poate folosi si valoarea "none",
ceea ce are ca efect anularea altor atribute ale proprietatii clear.
De exemplu, daca aveti un DIV pozitionat fortat in dreapta, un paragraful care
urmeaza dupa el va fi afisat in stanga DIV-ului respectiv. Pentru a anula acest
lucru, ca paragraful sa fie afisat sub DIV, se foloseste proprietatea "clear",
precum in exemplul urmator:
#un_div { float:right; }
p { clear:both; }
<!DOCTYPE html>
<html>
<head>
<style>
img { float: right;}
p.clear { clear: both;}
</style>
</head>
<body>
<img src="buton2.gif" width="95" height="84">
<p>This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also
some text. This is also some text. This is also some text. This is also some
text.</p>
</body>
</html>
7. Afi sarea si ascunderea elementelor

Proprietatea display poate stabili daca un element va fi de tip block,
incluzand linii noi deasupra si dedesubtul sau, daca este inclus in linie, daca
este tratat sub forma de lista sau daca elementul este afisat sau nu.
Sintaxa generala pentru aceasta proprietate este:
selector { display:valoare; }
Unde "valoare" poate fi una din urmatoarele optiuni:
list-item - plaseaza in prima linie a textului un indicator pentru articole
de tip lista, dar si un salt deasupra si dedesubtul articolului;
49
Manual CSS
block -defineste eticheta ca fiind de tip bloc si plaseaza un salt la linie

noua deasupra si dedesubtul ei;
inline - defineste eticheta ca o eticheta in linie si elimina caracterele de
salt la linie noua;
none - determina ascunderea elementului si neafisarea lui de catre
navigator; codul acestuia este incarcat insa continutul sau nu e afisat in
pagina.
Iata un exemplu in care elementele <li> sunt asezate in linie, iar un element cu
id="un_id" va fi ascuns in pagina:
li { display:inline; }
#un_id { display:none; }
<!DOCTYPE html>
<html>
<head>
<style>
p { display: inline;}
</style>
</head>
<body>
</body>
</html>
Proprietatea display nu trebuie confundata cu visibility. Spre deosebire

de visibility care nu afiseaza elementul dar lasa liber spatiu pentru element,
sintaxa display: none elimina complet elementul din pagina.
50
Manual CSS
Controale de pozitionare
Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul
obiectelor grafice HTML sau a tabelelor, afisarea facandu-se mult mai rapid.
Prin intermediul CSS este permisa pozitionarea exacta sau relativa a
elementelor intr-o fereastra sau in raport cu alte elemente.
Fereastra navigatorului este suprafata in care sunt afisate toate elementele. Ea
poate fi redimensionata sau pozitionata pe ecran, sau poate fi divizata in alte
ferestre prin intermediul cadrelor.
Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din
stanga-sus.
1. Stabilirea modului de pozitionare

Prin utilizarea proprietatii position se poate specifica pozitia elementului in
pagina web.
Un element poate avea una din urmatoarele valori de pozitionare:
static, relative, absolut si fixed.
Tipul de pozitie indica navigatorului cum sa trateze amplasarea unui element
intr-o fereastra.
a) Pozitionarea statica
Valoarea initiala, prestabilita, a pozitionarii elementelor in fereastra este
"static".
Cand nu este specificata o pozitionare "relativa", "absoluta" sau "fixa";
elementele sunt dispuse unul dupa altul in interiorul documentului.
Sintaxa pentru specificarea pozitionarii static este:
selector { position:static }
- Un element static nu poate fi repozitionat in mod explicit.
<!DOCTYPE html>
<html>
<head>
<style>
p { position:static;
width:100px;
height:100px;
background:red;}
</style>
</head>
<body>
<h1>Heading 1</h1>
51
Manual CSS
<h1>Heading 1</h1>
</body>
</html>
b) Pozitionarea relativa
Un element cu pozitionare "relativa" este amplasat la locul sau in cadrul
ferestrei sau a elementului parinte, in sensul ca el apare dupa toate elementele
dinaintea sa, respectiv inaintea tuturor elementelor amplasate dupa el.
Sintaxa pentru specificarea pozitionarii relative este:
selector { position:relative }
- Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile
"top" si "left" sau "bottom" si "right".
<!DOCTYPE html>
<html>
<head>
<style>
p { position:relative;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
</body>
</html>
c) Pozitionarea absoluta
Pozitionarea absoluta are ca efect crearea unui element neafectat de restul
documentului, plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita
prin intermediul coordonatelor x si y, indiferent de pozitiile altor elemente.
Sintaxa pentru specificarea pozitionarii absolute este:
selector { position:absolute }
52
Manual CSS
- Originea (punctul de coordonate 0,0) este coltul din stanga-sus al ferestrei sau
al obiectului in care este inclus elementul pozitionat absolut.
<!DOCTYPE html>
<html>
<head>
<style>
p { position:absolute;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
</body>
</html>
d) Pozitionarea fixa
Pozitionarea fixa a unui element este aproximativ la fel cu cea absoluta, cu
diferenta ca la derularea paginii elementul fixat ramane pe pozitia lui initiala,
fara a se derula.
Sintaxa pentru specificarea pozitionarii fixed este:
selector { position:fixed }
<!DOCTYPE html>
<html>
<head>
<style>
p { position:fixed;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;}
</style>
</head>
53
Manual CSS
<body>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
</body>
</html>
2. Pozitionarea in raport cu latura de sus, respectiv stanga

Dupa stabilirea tipului de pozitionare, se poate determina distanta intre
punctul de origine si laturile de sus si din stanga ale elementului sau parinte,
folosind proprietatiletop si left
selector { top:valoare; left:valoare; }
- Unde "valoare" poate fi:
- o valoare de tip numeric, care defineste distanta dintre laturile ferestrei
sau a elementului parinte si laturile elementului;
- o valoare procentuala, care semnifica deplasarea fata de laturile ferestrei
sau a elementului parinte;
- valoarea auto, care permite navigatorului sa calculeze el insusi valoarea.
Pot fi utilizate proprietatile top si left sau bottom si right, de asemenea pot
lua si valori negative.
In cazul in care este vorba despre elemente imbricate, acestea vor fi deplasate
solidar cu elementul parinte daca acesta are position:relative.
Iata un exemplu in care o eticheta <h1> este pozitionata la o distanta de 10
pixeli fata de marginile sus si stanga ale unui DIV in interiul caruia se afla:
div { position:relative; }
h1 { top:10px; left:10px; }
</style>
<div>
<h1>Text...</h1>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
img { position: relative;
img {
54
position: absolute;
Manual CSS
top: 15px; left: 40px;}
</style>
</head>
<body>
<img src="buton2.gif" width="95"
height="84">
<h1>Acesta este un heading de nivel
1</h1>
</body>
</html>
top: 15px; left: 40px;}
3. Pozitionarea in raport cu latura de jos, respectiv dreapta

In unele cazuri este necesara pozitionarea in raport cu laturile de jos,
respectiv dreapta. In acest caz originea va fi coltul din dreapta-jos al ferestrei
sau al elementului parinte.
Definirea marginilor fata de latura de jos, respectiv din dreapta se face cu
ajutorul proprietatilor bottom si right; ele pot lua aceleasi valori ca si "left" si
"top", de asemenea pot fi combinate cu acestea.
selector { bottom:valoare; right:valoare; }
In cazul in care pentru acelasi element sunt stabilite atat marginile "top / left"
cat si "bottom / right", rezultatul afisat depinde de navigator, dar in mod
prestabilit se folosesc pozitiile top si left.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<head>
<head>
<style>
<style>
img.ex1 {position: relative;
img.ex1 {position: absolute;
bottom:0px; right: 30px;}
bottom:0px; right: 30px;}
</style>
</style>
</head>
</head>
<body>
<body>
<img class="ex1" src="buton2.gif" width="95" <img class="ex1" src="buton2.gif" width="95"
height="84">
height="84">
<h1>Heading de nivel 1</h1>
<h1>Heading de nivel 1</h1>
</body>
</body>
</html>
</html>
4. Pozitionarea in spatiul 3D
55
Manual CSS
Elementele pot primi o a treia dimensiune, si anume asezarea lor in stiva,

unele in raport cu altele.
Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin
incrementare cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ
la elementele parinte.
Pentru pozitionarea elementelor in stiva unele peste altele se foloseste
proprietatea z-index. Valoarea acestei proprietati fiind relatia tridimensionala a
elementului in raport cu alte elemente din fereastra.
Sintaxa generala pentru proprietatea z-index este:
selector { z-index:valoare; }
Unde "valoare" este un numar intreg, pozitiv, 0 sau negativ.
In cazul in care continutul elementelor se suprapune, elementul cu numarul de
ordine mai mare apare deasupra elementului cu numar mai mic.
Utilizarea unei valori negative determina amplasarea elementului dedesubtul
parintelui sau cu atatea niveluri cu cate indica indexul z.
<!DOCTYPE html>
img { position: absolute;
<html>
left: 0px;
<head>
top: 0px;
<style>
z-index: 1;}
left: 0px;
top: 0px;
z-index: -1;}
</style>
</head>
<body>
<h1>Acesta este un heading de nivel 1</h1>
<p>Deoarece imaginea are z-index cu valoarea -1,
va fi plasata in spatele textului.</p>
</body>
</html>
5. Includerea unui element absolut intr-un element relativ

Un element poate fi pozitionat exact in cadrul unei ferestre, sau el poate fi
inclus intr-un element cu pozitionare relativa.
In cazul includerii unui element pozitionat absolut intr-un element pozitionat
relativ, elementul absolut este pozitionat folosind ca origine coltul din stangasus al elementului relativ.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="absolut")
este inclusa (imbricata) in alta eticheta <div> (cu class="relativ"):
56
Manual CSS
<div class=relativ>
...
<div class=absolut> ... </div>
...
</div>
Pentru a face o pozitionare absoluta a elementului inclus (care are

class="absolut") in elementul parinte (care are class="relativ"), caruia ii definim
o pozitionare relativa; scriem in foaia de stil urmatorul cod:
.relativ {position:relative; top:30px; left:50px; }
.absolut {position:absolute; top:15px; left:0px; }
<!DOCTYPE html>
<html>
<head>
<style>
.relativ {position:relative; top:30px; left:50px; background-color:green;}
.absolut {position:absolute; top:150px; left:0px; background-color:tan;}
</style>
</head>
<body>
<div class="relativ">
<p>Aici incepe o sectiune/div parinte care are pozitie relativa</p>
<div class="absolut">
<p>Aici incepe o subsectiune/div imbricat care are pozitie absoluta adica
este pozitionat folosind ca origine coltul din stanga-sus al div-ului relativ</p>
</div>
<p>Aici se termina o sectiune/div parinte care are pozitie relativa</p>
</div>
</body>
</html>
6. Includerea unui element relativ intr-un element absolut

Cand un element pozitionat absolut este inclus intr-un element pozitionat
relativ, primul foloseste ca origine coltul din stanga-sus al parintelui.
In cazul in care un element pozitionat relativ este plasat in interiorul unui
element pozitionat absolut, acesta se va deplasa o data cu elementul absolut.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="relativ") este
inclusa (imbricata) in alta eticheta <div> (cu class="absolut"):
<div class=absolut>
...
<div class=relativ> ... </div>
...
</div>
57
Manual CSS
Pentru a face o pozitionare relativa a elementului inclus (care are

class="relativ") in elementul parinte (care are class="absolut"), caruia ii definim
o pozitionare absoluta; adaugam in foaia de stil urmatorul cod:
.absolut {position:absolute; top:20px; left:25px; }
.relativ {position:relative; top:10px; left:5px; }
<!DOCTYPE html>
<html>
<head>
<style>
.absolut {position:absolute; top:150px; left:50px; background-color:tan;}
.relativ {position:relative; top:5px; left:50px; background-color:green;}
</style>
</head>
<body>
<div class="absolut">
<p>Aici incepe o sectiune/div parinte care are pozitie absoluta</p>
<div class="relativ">
<p>Aici incepe o subsectiune/div imbricat care are pozitie relativa; acesta
se va deplasa o data
cu div-ul absolut</p>
</div>
<p>Aici se termina o sectiune/div parinte care are pozitie absoluta</p>
</div>
</body>
</html>
58
Manual CSS
Configurari pentru vizibilitate si mouse

CSS ofera posibilitatea de a afisa sau ascunde unele elemente sau parti ale
unor elemente.
1. Stabilirea vizibilitatii unui element

Proprietatea visibility poate controla faptul ca un element sa fie vizibil sau
nu. Chiar daca elementul este invizibil, el va ocupa un spatiu liber in pagina,
acolo unde ar fi trebuit sa fie afisat.
Sintaxa pentru folosirea acestei proprietati este urmatoarea:
selector { visibility:valoare }
Unde "valoare" poate fi:
hidden - ascunde elementul de la afisarea pe ecran;
visible - afiseaza elementul;
inherit - vizibilitatea elementului este mostenita de la elementul parinte.
Iata un exemplu in urma caruia textul din interiorul etichetei <h1> va fi invizibil:
h1 { visibility:hidden; }
<!DOCTYPE html>
<html>
<head>
<style>
h1.vizibil { visibility: visible}
h1.ascuns { visibility: hidden}
</style>
</head>
<body>
<h1 class="vizibil">Heading de nivel 1 vizibil</h1>
<h1 class="ascuns">Heading de nivel 1 invizibil </h1>
<p>Headingul invizibil ocupa spatiu</p>
</body>
</html>
Pentru a ascunde complet afisarea unui element in pagina, se poate utiliza

formula display:none;
2. Stabilirea suprafetei vizibile a unui element

59
Manual CSS
Definirea suprafetei vizibile a unui element stabileste portiunea din elementul

respectiv care este vizibila in fereastra navigatorului. Restul continutului acelui
element nu dispare, ci este invizibil pentru vizitator.
Pentru a defini forma regiunii vizibile se foloseste proprietatea clip cu
valoarea rect (definita prin patru valori separate prin spatii si incadrate de
paranteze rotunde)
selector {clip:rect(val1 val2 val3 val4); }
- Valorile construiesc un patrulater, definesc distanta dintre coltul din stanga-sus
al elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile.
Iata un exemplu de cod CSS in care suprafata vizibila a unui element cu id="viz"
va fi cea incadrata de valorile atributului rect:
#viz { clip: rect(25 300 125 100); }
Daca se foloseste valoarea "auto", navigatorul calculeaza dimensiunea regiunii

vizibile la 100%. Regiunile de vizibilitate pot avea doar forma dreptunghiulara.
<!DOCTYPE html>
<html>
<head>
<style>
clip: rect(0px,60px,200px,0px);}
</style>
</head>
<body>
</body>
</html>
3. Defi nirea pozitiei depasirii

Uneori elementele nu sunt in totalitate continute in casetele lor, caseta
nefiind suficient de mare, astfel ca o parte a continutului nu este afisata sau
depaseste marginea stabilita.
Proprietatea overflow permite tratarea continutului in exces, controland astfel
modul de afisare sau nu al acesuia.
Forma generala a proprietatii overflow este:
selector { overflow:valoare; }
- Unde "valoare" stabileste unde va fi plasata depasirea, folosind una din
valorile:
60
Manual CSS
visible - extinde caseta elementului astfel incat sa incapa tot continutul

sau, ignorand delimitarea suprafetei vizibile. Este optiunea prestabilita.
hidden - ascunde continutul care nu incape in caseta elementului, si
impiedica aparitia barei de derulare.
scroll - adauga intotdeauna bare de derulare elementului, pentru ca sa se
poata accesa tot continutul elementului.
auto - barele de derulare apar doar atunci cand este necesar.
Iata un exemplu in care toate elementele cu class="extradim" vor avea bare de
scroll:
.extradim { overflow:scroll; }
Pentru definirea proprietatii "overflow" doar pentru una din directii: orizontala
sau verticala; adica bara de derulare sa fie disponibila sau nu doar pentru una
din aceste directii, se poate folosi o alta varianta a acestei proprietati, si anume:
overflow-x:valoare - pentru orizontala
overflow-y:valoare - pentru verticala
- Unde "valoare" poate fi una din valorile prezentate mai sus.
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: #00FFFF;
width: 100px;
height: 100px;
overflow: scroll;}
div.hidden { background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of
the element's box.</p>
<p>overflow:scroll</p>
61
Manual CSS
<div class="scroll">You can use the overflow property when you want to have better control of
the layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of
the layout. The default value is visible.</div>
</body>
</html>
4. Aspectul indicatorului de mouse
In mod normal, aspectul indicatorului de mouse este determinat de browser.
Navigatorul modifica indicatorul de mouse in functie de continutul deasupra
caruia se afla acesta.
Uneori este dorita anularea sau completarea preferintelor navigatorului si
configurarea unor aspecte personalizate.
Proprietatea cursor ajuta la stabilirea aspectului unui indicator de mouse.
Sintaxa este urmatoarea:
selector { cursor:valoare; }
Unde "valoare" poate avea urmatoarele nume pentru indicatoarele de mouse:
- Daca se foloseste valorea "auto", navigatorul decide asupra tipului de indicator

folosit.
<!DOCTYPE html>
62
Manual CSS
<html>
<body>
<h2>Mouse over the words to change the cursor.</h2>
<p style="cursor:auto">auto</p>
<p style="cursor:crosshair">crosshair</p>
<p style="cursor:default">default</p>
<p style="cursor:e-resize">e-resize</p>
<p style="cursor:grab">grab</p>
<p style="cursor:help">help</p>
<p style="cursor:move">move</p>
<p style="cursor:n-resize">n-resize</p>
<p style="cursor:ne-resize">ne-resize</p>
<p style="cursor:nw-resize">nw-resize</p>
<p style="cursor:pointer">pointer</p>
<p style="cursor:progress">progress</p>
<p style="cursor:s-resize">s-resize</p>
<p style="cursor:se-resize">se-resize</p>
<p style="cursor:sw-resize">sw-resize</p>
<p style="cursor:text">text</p>
<p style="cursor:w-resize">w-resize</p>
<p style="cursor:wait">wait</p>
<p style="cursor:not-allowed">not-allowed</p>
<p style="cursor:no-drop">no-drop</p>
</body>
</html>
63
Manual CSS
Pseudo-clase
Pseudo-clasele permit adaugarea de stiluri CSS doar la anumite elemente
ale aceluiasi selector, id sau clasa.
De exemplu, cand definiti un stil pentru un anumit tag HTML sau pentru o
clasa, continutul din toate aceleasi tag-uri sau aceeasi clasa vor avea acel stil,
iar daca doriti sa definiti un stil diferit pentru primul (sau ultimul) din acele taguri ori pentru primul continut definit de aceeasi clasa, puteti realiza asta
folosind pseudo-clasele.
De asemenea, acestea pot modifica stilul grafic al elementelor cand mouse-ul
actioneaza asupra lor.
Pentru a functiona in Internet Explorer 7+ este necesar declararea <!
DOCTYPE>, care se adauga la inceputul documentului HTML, mai multe detalii
(in engleza) gasiti Aici.
Sintaxa pentru utilizarea pseudo-clasei este urmatoarea:
element:pseudo-clasa { proprietate:valoare; }
- unde "element" este un selector, id sau clasa, iar "pseudo-clasa" este una din
expresiile urmatoare:
active - Adauga un stil unui element cand acesta este activat (actionat
prin click pe el)
first-child - Adauga un stil unui element care este primul din acel tip de
elemente
focus - Folosit pentru input-urile de formulare, le adauga un stil cand
acestea sunt active (dupa click si cursorul de text in ele)
hover - Adauga un stil unui element cand mouse-ul se afla deasupra lui
lang(cuvant) - Adauga un stil unui element care are
atributul lang="cuvant" (nu e suportat de Safari si IE mai mic de 8)
last-child - Adauga un stil unui element care este ultimul din acel tip de
elemente
link - Adauga un stil unui link nevizitat
visited - Adauga un stil unui link vizitat
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-clasele, studiati
exemplele care sunt prezentate in continuare.
1. Pseudo-clase cu selector
64
Manual CSS
Selectoarele fac referire la tag-urile HTML pe care le denumesc (de

ex.: p pentru <p>, li pentru <li>, div pentru <div>, etc.).
In exemplul urmator este folosit "first-child" pentru paragraf:
<html>
<head>
<title>Pseudo-clase cu selector</title>
<style>
p:first-child {color:blue;}
</style>
</head>
<body>
<p>Un text din primul paragraf</p>
<p>Continut din al doilea paragraf</p>
<p>Textul din al treilea paragraf</p>
</body>
</html>
- Rezultatul va fi urmatorul, primul paragraf va avea textul albastru.
Un text din primul paragraf
Continut din al doilea paragraf
Textul din al treilea paragraf
Iata si un exemplu cu "hover" pentru <li>
<html>
<head>
<title>Pseudo-clase cu selector</title>
li:hover { background-color:#88fe88;}
</style>
</head>
<body>
<ul>
<li>Text list 1 ...</li>
</ul>
</body>
</html>
65
Manual CSS
- Cand pozitionati mouse-ul deasupra fiecarui LI, acesta va avea background

verde, testati mai jos
Text list 1 ...
Text list 2 ...
Text list 3 ...
2. Pseudo-clase si clase
Trebuie stiut ca pseudo-clasele nu sunt acelasi lucru ca si clasele, acestea
fiind cele care fac referire la valoarea atributului "class" si in CSS se adauga
dupa un caracter punct (.).
Iata un exemplu in care sunt folosite pseudo-clasele "lang(cuvant)" (pt. IE
incepand cu versiunea 8) sl "last-child" la o clasa ".test'
<html>
<head>
<title>Pseudo-clase si clase</title>
.test:last-child { background-color:#88fe88;}
.test:lang(da) { color:blue;}
</style>
</head>
<body>
<ul>
<li class="test">Text in list cu class 1 ...</li>
<li class="test" lang="da">Text in list cu class 2 ...</li>
<li class="test">Text in list cu class 3 ...</li>
</ul>
</body>
</html>
- Observati ca stilul definit pentru ".test:last-child" va fi aplicat doar ultimului
element care are clasa "test", iar "lang(da)" se aplica numai elementului care pe
langaclass="test" are si lang="da".
- Rezultatul este acesta:
Text in list cu class 1 ...
66
Manual CSS
Iata un alt exemplu in care sunt combinate o clasa (test), un selector (tag <i>)
si "first-child":
<html>
<head>
<title>Pseudo-clase si clase</title>
.test i:first-child {font-weight:bold; background-color:red;}
</style>
</head>
<body>
<h2>Heading de nivel 2. Iata un alt exemplu in care sunt combinate o clasa
(test), un selector (tag-ul italic) si "first-child":</h2>
<i>Textul este formatat italic din HTML. Nu are stil CSS.</i>
<p class="test"><i>Paragraf cu pseudo-clasa "first-child"</i> cu mai multe
tag-uri I: <i>text oblic</i>, alt test <i>oblic</i></p>
<p class="test">Alt paragraf: <i>sir inclinat si bold cu pseudo-clasa "firstchild"</i>, alt sir <i>italic</i></p>
</body>
</html>
- Stilul CSS va fi aplicat primelor tag-uri <i> din fiecare clasa ".test", dupa cum
puteti vedea mai jos
Paragraf cu mai multe tag-uri I: text oblic, alt test oblic
Alt paragraf: sir inclinat si bold, alt sir italic
- Daca doriti ca stilul sa fie aplicat tuturor etichetelor <i> din prima clasa,
scrieti: .clasa:first-child i
- Daca vreti sa fie aplicat numai primului <i> din prima clasa, scrieti:
.clasa:first-child i:first-child
3. Pseudo-clase cu id-uri si elemente de formular

In CSS, id-urile fac referire la valoarea atributului ID si se scriu dupa
caracterul #.
Iata un exemplu in care este folosita pseudo-clasa "hover" impreuna cu un ID,
iar "focus" impreuna cu o clasa (focus nu functioneaza pe versiuni de IE mai
mici de 8)
<html>
<head>
<title>Pseudo-clase</title>
#unid:hover {background-color:red;}
.test:focus {background-color:tan;}
67
Manual CSS
</style>
</head>
<body>
<form action="" method="post">
<input type="text" class="test" /><br />
<textarea cols="20" rows="5" class="test"></textarea><br />
<input type="button" value="Buton" id="unid" />
</form>
</body>
</html>
- Stilul CSS definit in acest exemplu face ca atunci cand mouse-ul se afla
deasupra butonului (care are id="unid") acesta sa isi schimbe culoarea de
fundal, iar cand se da click pe zonele de text din formular (care au class="test"),
la fel se modifica culoarea background.
68
Manual CSS
Pseudo-elemente
Pseudo-elementele permit adaugarea de stiluri CSS anumitor parti din
continutul unui element HTML.
De exemplu, cand definiti un stil pentru un anumit tag HTML (sau pentru o
clasa), tot continutul incadrat de acel tag va avea acelasi stil, iar daca vreti sa
adaugati un stil CSS diferit primei litere sau primului rand dintr-un paragraf, se
folosesc pseudo-elemente.
Sintaxa pentru utilizarea pseudo-elementelor este urmatoarea:
obiect_css:pseudo-element { proprietate:valoare; }
- unde "obiect_css" este un selector, id sau clasa, iar "pseudo-element" este
una din expresiile urmatoare:
after - Adauga continut dupa un element HTML (nu e suportat de
versiuni IE mai mici de 8)
before - Adauga continut inaintea unui element HTML (nu e suportat de
versiuni IE mai mici de 8)
first-letter - Adauga un stil css primului caracter dintr-un text
first-line - Adauga un stil primei linii dintr-un text
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-elementele, iata
cateva exemple cu fiecare in parte.
1. after
Pentru a adauga un anumit continut (text, imagine, sunet .wav) prin CSS, se
foloseste proprietatea content si valoarea ce reprezinta continutul respectiv:
text se adauga intre ghilimele, iar imagine sau sunet .wav se adauga folosind
ca valoare url(adresa_fisier)
In urmatorul exemplu va fi adaugat un continut text dupa fiecare element
<h4>.
<html>
<head>
h4:after { content:"NumeSite";color:blue;}
</style>
</head>
<body>
<h4>Continutul din primul tag H4 ... </h4>
<h4>Un alt text din alt element H4 ... </h4>
</body>
</html>
69
Manual CSS
- Rezultatul va fi cel de jos.

- Observati cum este adaugat cuvantul "NumeSite", imediat dupa ultimul
caracter al fiecarui element <h4>, ca si cum ar face parte din textul initial, dar
putand avea stil propriu.
Continutul din primul tag H4 ... NumeSite

Un alt text din alt element H4 ... NumeSite
- In loc de selector puteti folosi si ID sau clasa.
2. before
Before este similar cu "after", continutul se adauga la fel, dar la inceputul
elementului.
Pentru o mai mare difersitate, puteti combina pseudo-clasele cu pseudoelemente folosind sintaxa:
obiect_css:pseudo-clasa:pseudo-element
{ proprietate:valoare; }
- Pseudo-clasele sunt explicate in lectia anterioara.
Ca sa vedeti efectul, iata un exemplu aplicat cu "before" acelorasi tag-uri H4
din exemplul precedent.
<html>
<head>
h4:first-child:before {content:"NumeSite - "; color:blue;}
</style>
</head>
<body>
<h4>Continutul din primul tag H4 ... </h4>
<h4>Un alt text din alt element H4 ... </h4>
</body>
</html>
- De data aceasta continutul "NumeSite- " este adaugat imediat in fata si doar
primului element <h4> (precizat prin 'first-child'), dupa cum puteti vedea mai
jos:
NumeSite - Continutul din primul tag H4 ...

Un alt text din alt element H4 ...
- Daca vreti sa adaugati in loc de continut text o imagine, de exemplu .gif, scrieti
codul CSS astfel: h4:first-child:before { content:url(imagine.gif); }
70
Manual CSS
3. fi rst-letter
First-letter aplica un stil CSS doar primului caracter dintr-un text.
In urmatorul exemplu este aplicat un stil CSS primului caracter din continutul
fiecarui element definit printr-o clasa "test".
<html>
<head>
.test:first-letter { font-size:25px; color:red;}
</style>
</head>
<body>
<p class="test">Textul din paragraf ...</p>
<div class="test">Alt continut int-un tag DIV, dar cu aceeasi clasa.</div>
</body>
</html>
- Dupa cum puteti vedea in rezultatul de mai jos, prima litera din continutul
fiecarui tag ce are class="test" este de culoare rosie si marime 25px.
Textul din paragraf ...

Alt continut int-un tag DIV, dar cu aceeasi clasa.
4. fi rst-line
First-line aplica un stil CSS doar primei linii din continutul elementului HTML.
Studiati exemplul urmator:
<html>
<head>
.test:first-line { font-weight:bold; color:blue;}
</style>
</head>
<body>
<p class="test">Paragraf cu mai multe linii<br />
A doua linie ...<br />
Alta linie din acelasi paragraf.</p>
<div class="test">Continut pe doua linii intr-un tag DIV<br />
A doua linie din DIV.</div>
</body>
</html>
71
Manual CSS
- Rezultatul este urmatorul, comform codului CSS, prima linie din fiecare
element cu class="test" are textul albastru si ingrosat.
Paragraf cu mai multe linii
A doua linie ...
Alta linie din acelasi paragraf.
Continut pe doua linii intr-un tag DIV
A doua linie din DIV.
72
Manual CSS
Creare Meniu Dublu cu CSS

Meniu Orizontal-Vertical
In acest tutorial puteti invata cum sa creati Meniu Dublu cu CSS (orizontal
si vertical).
Meniu dublu inseamna ca lista meniului contine inca un Meniu cu alte link-uri
(denumit si Sub-Meniu).
In general, Meniurile sunt create folosind tag-urile <ul> (sau <ol>) si <li>
tags.
- Presupunand ca deja stiti CSS si HTML, aplicati /adaptati codurile prezentate
mai jos, personalizandu-le si cu alte elemente CSS, dupa cum doriti sa creati
designul (colturi rotunjite, imagini pt. fundal, etc.).
Meniu Vertical Dublu

Meniul vertical este de obicei adaugat in marginile laterale ale paginii.
Iata un exemplu simplu (mutati cursorul mouse-ului pe el):
Pagina personala
+ Tutorialle CSS
+ Tutoriale HTML
Contact
- Codul HTML si CSS de mai jos creaza acest meniu (Proprietatile CSS trebuie
adaugate in zona <head>, sau intr-un fisier ".css"):
<html>
<head>
<style>
#menuv { width:200px;
border:1px solid blue;
background-color:#daedfe; padding:2px;}
/* Proprietati pentru primul nivel din meniul vertical */

#menuv li { margin:1px 0;
background-color:#f0f1fe;
padding:1px;
list-style-type:none;
font-weight:600;
text-align:left;}
#menuv li a { display:block; margin:0;
font-weight:normal;}
73
Manual CSS
#menuv li a:hover { background-color:#fefefe;

text-decoration:none;
font-style:oblique;}
/* Proprietati pentru nivelul doi din meniul vertical */
#menuv li:hover ul { display:block;}
#menuv li ul { display:none;
position:relative;
margin:-1px 0 -2px 0;
padding:1px 0;}
#menuv li ul li { margin:2px 0 0 20px;
background-color:#edfeed;
padding:1px 0;
border:1px dotted yellow;}
</style>
</head>
<body>
<ul id="menuv">
<li><a href="/" title="Pagina personala">Pagina personala</a></li>
<li> + Tutorialle CSS
<ul>
<li><a href="https://www.google.ro/?gws_rd=ssl" title="CSS - Background proprietati">CSS Background proprietati</a></li>
<li><a href="https://www.google.ro/?gws_rd=ssl" title="CSS opacity">CSS opacity</a></li>
</ul>
</li>
<li> + Tutoriale HTML
<ul>
<li><a href="https://www.google.ro/?gws_rd=ssl" title="Tutorial HTML5">Tutorial
HTML5</a></li>
<li><a href="https://www.google.ro/?gws_rd=ssl" title="HTML5 canvas">HTML5
canvas</a></li>
<li><a href="https://www.google.ro/?gws_rd=ssl" title="HTML5 tag-uri noi">HTML5 tag-uri
noi</a></li>
</ul>
74
Manual CSS
</li>
<li><a href="http://www.numeSite.net/coment/contact.php" title="Contact">Contact</a></li>
</ul>
</body>
</html>
- "Smecheria" la acest Meniu este acest cod (ceea ce face a doua lista UL vizibila
cand mouse-ul e deasupra listei LI parinte):
O alta varianta de meniu vertical dublu:

Pagina personala
+ Tutorialle CSS
+ Tutoriale HTML
Contact
- Codul CSS si HTML pt. acest meniu:
<html>
<head>
<style>
#menuv { position:relative;
width:160px;
background-color:#daedfe;
padding:2px;}
/* Proprietati pentru primul nivel din meniul vertical */

#menuv li { margin:1px 0;
padding:1px;
font-weight:600;
text-align:left;}
#menuv li a, #menuv li span { display:block;
margin:0;
font-weight:normal;}
#menuv li a:hover { background-color:#fefefe;
75
Manual CSS
/* Proprietati pentru nivelul doi din meniul vertical */

position:absolute;
z-index:9998;
width:100%;
left:151px;
margin:-20px auto 0 auto;
border:1px dashed blue;
padding:1px;}
#menuv li ul li { margin:1px;
padding:1px 0 1px 2px;}
</style>
</head>
<body>
<ul id="menuv">
<li><span> + Tutorialle CSS</span>
<ul>
<li><a href="p1.html" title="CSS - Background proprietati">CSS - Background
proprietati</a></li>
<li><a href="p2.html" title="CSS opacity">CSS opacity</a></li>
</ul>
</li>
<li><span> + Tutoriale HTML</span>
<ul>
<li><a href="p3.html" title="Tutorial HTML5">Tutorial HTML5</a></li>
<li><a href="p4.html" title="HTML5 canvas">HTML5 canvas</a></li>
<li><a href="p5.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
</ul>
</li>
<li><a href="p6.html" title="Contact">Contact</a></li>
76
Manual CSS
</ul>
</body>
</html>
- Sub-meniul (#menuv li ul) trebuie sa aibe urmatoarele proprietati CSS, ca sa-l
ascunda si sa nu afecteze celelalte liste cand e descoperit (proprietatea zindex:9998; il face sa fie afisat peste celelalte liste).
display:none;
position:absolute;
z-index:9998;
- In codul CSS al acestui Meniu este important ca selectorul #menu sa aibe

definita proprietatea "position" (relative, absolute). Aceasta e necesar ca sa
functioneze z-index:9998; (in #menuv li ul) in Internet Explorer.
Meniu Orizontal-Vertical
Meniul orizontal-vertical este un meniu cu lista afisata pe o linie orizontala,
iar fiecare lista poate sa contina un alt meniu cu liste verticale, care este initial
ascuns, si afisat cand mouse-ul e pe textul /imaginea din lista orizontala.
- Demonstratie (mutati cursorul mouse-ului peste Menu):
Pagina personala
Tutorialle CSS
Tutoriale HTML
Contact
- Codul sursa:
<html>
<head>
<style>
div {width:50%; margin-left:auto; margin-right:auto;}
#menuv { position:relative; padding:2px;}
/* Proprietati pentru lista orizontala */
#menuv li { float:left;
margin:1px 8px;
77
Manual CSS
padding:1px 2px;
font-weight:600;
text-align:left;
text-decoration:nderline;}
/* Proprietati pentru listele verticale */
position:absolute;
margin:1px auto 1px -8px;
border:1px dashed blue;
padding:1px;}
#menuv li ul li { position:relative;
clear:both;
width:99%;
margin:1px 0;
border:none;
padding:1px;}
/* Link-uri in sub-menu */
#menuv ul li a { display:block;
margin:0;
font-weight:normal;
padding:1px;}
#menuv ul li a:hover { background-color:#fefefe;
</style>
</head>
<body>
<div>
<ul id="menuv">
<li>Tutorialle CSS
78
Manual CSS
<ul>
<li><a href="p1.html" title="CSS - Background proprietati">CSS Background proprietati</a></li>
<li><a href="p2.html" title="CSS opacity">CSS opacity</a></li>
</ul>
</li>
<li>Tutoriale HTML
<ul>
<li><a href="p3.html" title="Tutorial HTML5">Tutorial HTML5</a></li>
<li><a href="p4.html" title="HTML5 canvas">HTML5 canvas</a></li>
<li><a href="p5.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
</ul>
</li>
<li><a href="p6.html" title="Contact">Contact</a></li>
</ul>
</div>
</body>
</html>
In codul CSS al acestui Meniu sunt importante urmatoarele proprietati:
- #menuv li trebuie sa contina aceasta proprietate ca sa aseze listele pe linie
orizontala:
float:left;
- Sub-meniul (#menuv li ul) trebuie sa aibe aceste proprietati CSS, ca sa-l

ascunda si sa nu afecteze celelalte liste cand e afisat.
display:none;
position:absolute;
- Listele din sub-meniu (#menuv li ul li) trebuie sa aibe aceste proprietati CSS,
care anuleaza efectul lui: float:left; mostenit de la lista LI parinte, si sa aiba o
lungime corespunzatoare:
position:relative;
clear:both;
width:99%;
79
Manual CSS
Butoane pentru link-uri folosind o singura imagine si CSS

O singura imagine pt meniu cu mai multe link-uri
Fiecare imagine care trebuie incarcata in pagina necesita o cerere de la
browser catre server si asteptarea raspunsului, astfel, daca aveti un meniu cu 5
link-uri cu imagine, pentru a face ca pagina sa se incarce mai repede, e bine sa
folositi un singur fisier cu imagini /butoane , nu 15 fisiere (5 * 3).
Acest tutorial arata cum se poate utiliza o singura imagine si CSS pentru
toate cele trei stari ale unui buton /link: normal, hover (mouse-ul
deasupra), si active (cand se apasa clic). De asemenea, cum se poate
folosi o singura imagine pentru mai multe link-uri intr-un meniu.
Este simplu, ideea este ca desenele butonului pt cele 3 stari sa fie simetric
asezate in imagine, vertical: top, center, bottom (sus, centru, jos); sau
orizontal: left, center, right (stanga, centru, dreapta). Este indicat ca
inaltimea imaginii (sau lungimea, in functie de cum sunt pozitionate butoanele
in imagine) sa se imparta exact la 3.
Apoi, in CSS setati proprietatile width si height ale link-ului cu aceeasi valoare
ca lungimea si inaltimea butonului desenat in imagine.
Daca butoanele pt starile link-ului (normal, hover, active) sunt desenate
vertical, precum acestea:
Setati proprietatea CSS background-position cu aceste perechi de valori: 0, 0;

0, 50%; si 0, 100% (sau: top, center, bottom); pt fiecare conditie (normal, hover,
active). Folosind valori in procente, ofera un control mai bun al
pozitionarii.
- Iata un exemplu (lungimea imaginii exte 125 pixeli, inaltimea 120 pixeli; cu
butoanele desenate vertical. Inaltimea butonului /link-ului este 40px):
<html>
<head>
<title>Exemplu link /buton folosind o singura imagine si CSS</title>
<style>
#buton { width: 100px;
height: 300px;
display: block;
background: url('click_here.gif');
background-position: top;
80
Manual CSS
border: none;
text-indent: -9999px;
/* Sa nu se afiseze textul din link */}
/* Cand cursorul de mouse e deasupra butonului */

#buton:hover { background-position: center; }
/* Cand butonul /link-ul e apasat */
#buton:active { background-position:bottom;}
//-->
</style>
</head>
<body>
<a href="p1.html" title="Curs Designer Pagini Web" id="buton">Pagina 1</a>
</body>
</html>
Daca butoanele pt starile link-ului (normal, hover, active) sunt desenate
orizontal, precum acestea:
- Setati proprietatea CSS background-position cu aceste perechi de valori: 0,

0; 50% 0; si 100% 0 (sau: left, center, right); pt fiecare conditie (normal, hover,
active).
- Iata un exemplu cu butoanele desenate orizontal:
<html>
<head>
<style>
#buton { width: 1000px;
height: 200px;
display: block;
background: url('images.jpg');
background-position: left;
border: none;
/* Cand cursorul de mouse e deasupra butonului */
#buton:hover { background-position: center; }
/* Cand butonul /link-ul e apasat */
#buton:active { background-position:right;}
81
Manual CSS
//-->
</style>
</head>
<body>
<a href="p1.html" title="Curs Designer Pagini Web" id="buton">Pagina 1</a>
</body>
</html>
O singura imagine pt meniu cu mai multe link-uri

In mod similar se poate folosi o singura imagine cu butoane pt un meniu cu mai
multe link-uri. Trucul este sa desenati butoanele simetric, apoi definiti
proprietatea CSSbackground-position in functie de pozitia butoanelor in
imagine, folosind procente ce reprezinta distanta fata de coltul stangasus, perechea de valori: stanga, sus (poate fi necesar sa testati mai multe
valori pana obtineti afisarea cea mai buna a fiecarui buton).
- Iata un exemplu, Meniu cu 4 link-uri folosind aceasta imagine:
<html>
<head>
<style>
/* Seteaza imaginea pt butoanele din link-uri si proprietatile comune in #menu */
#menu a { width: 125px;
height: 60px;
display: block;
background: url('Button_Add_Icon_48.png');
/* Butonul din imagine pt Primul link */
#menu #addnew { background-position: 0 0;}
/* Primul link hover */
#menu #addnew:hover { background-position: 48% 0;}
/* Primul link cand e apasat */
82
Manual CSS
#menu #addnew:active { background-position: 100% 0;}
/* Butonul din imagine pt al Doilea link */
#menu #delete { background-position: 0 32%;}
/* al Doilea link hover */
#menu #delete:hover { background-position: 48% 32%;}
/* al Doilea link cand e apasat */
#menu #delete:active { background-position: 100% 32%;}
/* Butonul din imagine pt al Treilea link */
#menu #accept { background-position: 0 66%;}
/* al Treilea link hover */
#menu #accept:hover { background-position: 48% 66%;}
/* al Treilea link cand e apasat */
#menu #accept:active { background-position: 100% 66%;}
/* Butonul din imagine pt al patrulea link */
#menu #cancel { background-position: 0 99%;}
/* al patrulea link hover */
#menu #cancel:hover { background-position: 48% 99%;}
/* al patrulea link cand e apasat */
#menu #cancel:active { background-position: 100% 99%;}
</style>
<div id="menu">
<a href="#" title="Add New" id="addnew">Add New</a>
<a href="#" title="Delete" id="delete">Delete</a>
<a href="#" title="Accept" id="accept">Accept</a>
<a href="#" title="Cancel" id="cancel">Cancel</a>
</div>
</html>
83

Manual CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Manual CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Manual CSS

2 - Crearea Foilor de Stil

3 - Confi gurarea fonturilor

4 - Confi gurarea textului

Spatiul dintre cuvinte

5 - Confi gurari pentru culori si fundal

6 - Controale pentru chenare si afi sarea elementelor

8 - Confi gurari pentru vizibilitate si mouse

Pseudo-clase cu id-uri si elemente de formular

cunoscute si utilizate browsere, cum ar fi: Mozilla Firefox, Internet Explorer,

Acest curs prezinta elementele de baza CSS si modul de lucru cu "foile de

Scrierea codului CSS

1. Obiectele (regulile) CSS

- Aici selectorul este "h1".

Roman", Times, serif;}

<p id="stil1">This is a paragraph, shown in the Times New Roman font.</p>

2. Componentele unui obiect CSS

Crearea Foilor de Stil

<P class="special">This paragraph should have special green text.</p>

- Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele

Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a

2. Defi nirea selectorilor

Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul

.central { text-align: center; color: red;}

3. Crearea etichetelor HTML personalizate

vida care creaza o eticheta in linie.

Definirea acestor etichete <div> intr-un cod CSS se face astfel:

4. Defi nirea de reguli similare

Impreuna cu selectorii pot fi de asemenea definiti identificatorii si clasele.

proprietati incluse in definitie, valoarea respectiva se va modifica in toate

5. Defi nirea etichetelor in context (imbricate)

6. Cresterea prioritatii unei defi nitii

7. Determinarea ordinii executiei

fisier extern, iar regulile scrise in interiorul etichetelor au o prioritate mai

8. Adaugarea comentariilor la CSS

Cand este specificata o lista de fonturi, navigatorul incearca sa foloseasca

Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un

2. Stabilirea dimensiunii fontului

Unde "valoare" poate fi unul din urmatoarele

Valoarea normal se poate folosi pentru a sterge formatarea cu caractere

6. Valori multiple pentru font

1. Spatiul intre litere

- Puteti folosi si pixeli (px)

2. Spatiul dintre cuvinte

3. Spatiul intre linii

Inaltimea randurilor se refera la spatiul dintre liniile paragrafului.

Inaltimea liniei poate de asemenea fi definita si in cadrul proprietatii "font-size", prin

4. Marimea (tipul) literelor

none - pentru ca textul sa fie afisat asa cum este.

- In cazul in care alinierea textului este "stanga-dreapta", spatierea cuvintelor si

This is a paragraph with a smaller line-height.<br>

cu text aliniat sus.</p>

Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele

Valorile pozitive determina o indentare tipica (spre dreapta), in timp ce valorile

Daca se utilizeaza o valoare exprimata in unitati "em", atunci rezultatul va fi

8. Aplicarea elementelor decorative

Pentru a elimina decoratiile se foloseste valoarea "none". Prin folosirea acestei

Elementul decorativ "blink" a prezentat probleme, fiind de curand eliminat de unele

Spre deosebire de eticheta <pre> care schimba fontul cu unul monospatiat,

This is some text.

Configurari pentru culori si fundal

1. Confi gurarea fundalului

proprietatea background-image, urmata de adresa URL a locatiei imaginii.

scroll down the page.</p>