Suport Curs CSS

SUPORT DE CURS
CSS

Suport de curs: CSS

_______________________________________________________ ___________________________________________
Swiss WebSchool E-mail: office@swissacademy.ro Telefon: +40 732 815 983

OBIECTIVUL CURSULUI:

Dupa studierea acestui curs, studentii vor fi capabili sa realizeze pagini web de complexitate ridicata prin :

- combinarea HTML cu CSS si DHTML
- definirea foilor de stil in cascada
- stabilirea unor proprietati ale fonturilor si textului, in general legate de aspect
- impartirea documentului in sectiuni logice, formatarea acestora, precum si stabilirea diverselor proprietati a
unor elemente componente in mod individual
- controlul fonturilor printr-o gama larga de proprietati in special legate de aspectul acestora
- controlul textului atat din punct de vedere al aspectului cat si din punct de vedere al aranjarii si pozitionarii lui in
pagina sau intr-o anumita sectiune
- crearea unor efecte utilizand DHTML si bazandu-se pe DOM
- includerea de functii in vederea realizarii unor interactiuni cu utilizatorul

Tema finala va consta in reproiectarea site-ului propus ca tema la cursul de HTML, de data aceasta fiind bazat pe
formatarea elementelor utilizand pe cat posibil CSS si incluzand animatie folosind DHTML.

Suport de curs: CSS

_______________________________________________________ ___________________________________________

CUPRINS

CUPRINS ........................................................................................................................................................................ 3
CAPITOLUL 1. NOTIUNI INTRODUCTIVE ............................................................................................................................. 5
1.1. Ce sunt foile de stil in cascada ............................................................................................................................. 5
1.2. Tipuri de reguli CSS .............................................................................................................................................. 5
1.3. Componentele unei reguli CSS ............................................................................................................................. 6
CAPITOLUL 2. CREAREA FOILOR DE STIL IN CASCADA.......................................................................................................... 7
2.1. Adaugarea unui stil la o eticheta HTML ............................................................................................................... 7
2.2. CSS adaugat direct in pagina HTML ..................................................................................................................... 7
2.3. CSS extern ........................................................................................................................................................... 9
2.4. Definirea unui selector HTML (Redefinirea unei etichete HTML) ......................................................................... 11
2.5. Definirea unui selector de clasa ......................................................................................................................... 11
2.6. Definirea unui identificator ID............................................................................................................................ 12
2.7. Crearea etichetelor HTML personalizate ............................................................................................................ 13
2.8. Definirea de reguli similare ................................................................................................................................ 16
2.9. Definirea etichetelor in context (imbricate) ........................................................................................................ 16
2.10. Determinarea ordinii cascadei ......................................................................................................................... 18
2.11. Cresterea prioritatii unei definitii ..................................................................................................................... 19
2.12. Mostenirea stilurilor (proprietati mostenite si existente) .................................................................................. 19
2.13. Adaugarea comentariilor................................................................................................................................. 20
CAPITOLUL 3. CONTROALE PENTRU FONTURI .................................................................................................................. 21
3.1. Generalitati ....................................................................................................................................................... 21
3.2. Stabilirea familiei de font .................................................................................................................................. 22
3.3. Font-uri personalizate ....................................................................................................................................... 23
3.4. Stabilirea dimensiunii font-ului .......................................................................................................................... 24
3.5. Text inclinat ...................................................................................................................................................... 26
3.6. Text ingrosat ..................................................................................................................................................... 27
3.7. Majuscule mici .................................................................................................................................................. 29
3.8. Valori multiple pentru font ................................................................................................................................ 30
3.9. Tabel recapitulativ ............................................................................................................................................ 32
CAPITOLUL 4. CONTROALE PENTRU TEXT ........................................................................................................................ 33
4.1. Spatiul intre litere.............................................................................................................................................. 33
4.2. Spatiul intre cuvinte .......................................................................................................................................... 34
4.3. Spatiul intre linii ................................................................................................................................................ 35
4.4. Marimea / tipul literelor .................................................................................................................................... 36
4.5. Alinierea textului pe orizontala .......................................................................................................................... 38
4.6. Alinierea textului pe verticala ............................................................................................................................ 39
4.7. Decalarea paragrafelor ..................................................................................................................................... 41
4.8. Aplicarea elementelor decorative ...................................................................................................................... 43
4.9. Spatiile albe ...................................................................................................................................................... 44
4.10. Text colorat .............................................................................................................................................. 46
4.11. Particularizarea legaturilor ....................................................................................................................... 47
4.12. Directia textului ........................................................................................................................................ 49
4.13. Tabel recapitulativ .......................................................................................................................................... 50
CAPITOLUL 5. CONTROALE PENTRU CULORI SI FUNDAL .................................................................................................... 52
5.1. Configurarea fundalului..................................................................................................................................... 52
5.2. Stabilirea culorii din prim-plan ........................................................................................................................... 59
CAPITOLUL 6. CONTROALE PENTRU CHENARE SI MARGINI ............................................................................................... 63
6.1. Notiunea de caseta ........................................................................................................................................... 63
6.2. Latimea si inaltimea unui element ..................................................................................................................... 63
6.3. Marginile unui element ..................................................................................................................................... 63
6.4. Chenarul unui element ...................................................................................................................................... 65
Suport de curs: CSS

_______________________________________________________ ___________________________________________

6.5 Linie exterioara pentru un element ..................................................................................................................... 70
6.6. Adaugarea umplerii in jurul elementului ............................................................................................................ 71
6.7. Elemente flotante.............................................................................................................................................. 73
6.8. Locul unde plutesc elementele ........................................................................................................................... 74
6.9. Afisarea si ascunderea elementelor ................................................................................................................... 76
6.10. Tabel recapitulativ .......................................................................................................................................... 78
CAPITOLUL 7. CONTROALE DE POZITIONARE ................................................................................................................... 80
7.1. Stabilirea tipului de pozitionare ......................................................................................................................... 80
7.2. Stabilirea pozitiei in raport cu latura sus, respectiv stanga ................................................................................. 81
7.3. Stabilirea pozitiei in raport cu latura jos, respectiv dreapta ................................................................................ 81
7.4. Stabilirea pozitiei in spatiul 3D........................................................................................................................... 83
7.5. Imbricarea unui element absolut intr-un element relativ .................................................................................... 85
7.6. Imbricarea unui element relativ intr-un element absolut .................................................................................... 86
CAPITOLUL 8. CONTROALE DE VIZIBILITATE ..................................................................................................................... 88
8.1. Stabilirea vizibilitatii unui element ..................................................................................................................... 88
8.2. Stabilirea suprafetei vizibile a unui element ....................................................................................................... 89
8.3. Stabilirea pozitiei depasirii................................................................................................................................. 90
CAPITOLUL 9. CONTROALE PENTRU MOUSE .................................................................................................................... 94
9.1. Aspectul indicatorului de mouse ........................................................................................................................ 94
CAPITOLUL 10. CSS3 ........................................................................................................................................................ 97
10.1. Border ............................................................................................................................................................. 97
10.2. Background ................................................................................................................................................... 100
10.3. Setarea nivelului de transparenta / opacitate ................................................................................................ 103
10.4. Efecte pentru text .......................................................................................................................................... 104
10.5. Transformari 2D si 3D.................................................................................................................................... 105

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Capitolul 1. NOTIUNI INTRODUCTIVE

Crearea paginilor HTML este un lucru relativ simplu, invatarea etichetelor HTML si crearea unor
imagini ducand la realizarea documentelor HTML de o complexitate medie. Odata cu patrunderea
HTML-ului dinamic (DHTML) si a foilor de stil in cascada (CSS), proiectarea paginilor Web a devenit o
sarcina ceva mai dificila, insa totodata ele sunt standarde utilizate in continuare la crearea site-urilor
web.

1.1. Ce sunt foile de stil in cascada

Stilurile inglobeaza, sub un anumit nume, atribute de formatare care se aplica asupra unui element
individual sau la nivel de document.

CSS functioneaza cu HTML, insa nu este HTML. El extinde functionalitatile HTML, permitand printre
altele redefinirea etichetelor HTML existente.

1.2. Tipuri de reguli CSS

Configurarea si definirea foilor de stil in cascada este un lucru relativ simplu, nefiind nevoie decat de
anumite reguli. Exista trei tipuri de reguli CSS.

1.2.1. Selector HTML

Selectorul HTML se foloseste intr-o regula CSS pentru a redefini modul de afisare a continutului
etichetei HTML.

h1 { font:Verdana; 14px/24px; bold; }

Un selector HTML reprezinta partea etichetei HTML care indica navigatorului tipul de eticheta.
Definirea unui selector HTML folosind CSS implica de fapt redefinirea etichetei HTML. Selectorul si
eticheta desi par identice, totusi nu sunt.

1.2.2. Clasa

Clasa este o regula care poate fi aplicata oricarei etichete HTML, fiind cel mai adaptabil tip de
selector.

.MyClass {font-family:Arial; font-size:12px; font-style:normal;}

O clasa poate fi denumita in orice mod, dupa preferintele utilizatorului.

Suport de curs: CSS

_______________________________________________________ ___________________________________________

1.2.3. Identificator

Regulile de tip identificator (ID) sunt asemanatoare cu selectorii de clasa. Ele pot fi aplicate oricarei
etichete HTML.

#MyObject {position: relative; top:10px; left:5px;}

Selectorii ID sunt aplicati, de obicei, o singura data unei etichete HTML.

1.3. Componentele unei reguli CSS

Regulile CSS, indiferent de tipul lor, au in componenta urmatoarele:

Selectorii identifica o regula; pot fi selectori de etichete HTML, clase sau identificatori.
Proprietatile identifica o entitate definita; se refera in special la aspect.
Valorile sunt atributele unei proprietati; pot fi cuvinte cheie, valori numerice sau
procentuale, tipul valorii depinzand foarte mult de proprietate.

Sintaxa elementara a unei reguli CSS este urmatoarea:

selector {proprietate: valoare; }

Proprietatile si valorile constituie definitia regulii CSS. Ele se regasesc sub forma de perechi,
despartite de :, fiecare pereche fiind urmata de ;. Este bine ca si dupa ultima enumerare sa se
foloseasca ; pentru a impiedica aparitia unor probleme ulterioare la adaugarea unui nou element in
definitie.

Etichetele HTML nu sunt sensibile la diferenta intre majuscule si litere mici, pe cand cele XHTML, da
(astfel ca, toti selectorii trebuie scrisi cu litere mici).

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Capitolul 2. CREAREA FOILOR DE STIL IN CASCADA

Prin utilizarea CSS aspectul documentului per ansamblu, sau a unui element individual din interiorul
sau, poate fi controlat mult mai usor. Stilurile pot fi aplicate asupra unui element, asupra unui
document, sau chiar asupra unui intreg site web.

Exista insa dezavantajul ca unele navigatoare nu sunt compatibile CSS, astfel ca documentele HTML
sunt afisate ca si cum CSS n-ar exista.

Stilurile pot fi specificate:
- in cadrul unui element HTML cu ajutorul atributului style
- in cadrul sectiunii antet a documentulului HTML
- intr-un fisier CSS extern

2.1. Adaugarea unui stil la o eticheta HTML

CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte, prin stabilirea unui anume stil.
Adaugarea este utila mai ales in scopul de a anula alte stiluri pentru elementul respectiv sau de a
aduce noi elemente de stil etichetei respective.

Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:

<eticheta style="proprietate:valoare;"> ... text ... </eticheta>

Este bine ca pentru delimitarea listei de definitii sa se foloseasca ghilimele duble (), iar pentru valori
in cadrul listei, ghilimele simple ().

<h1 style="color:blue;">Antet personalizat</h1>

2.2. CSS adaugat direct in pagina HTML

CSS permite definirea unor reguli aplicabile intr-un document. Acest set de reguli apare in sectiunea
de antet (head) a documentului, fiind delimitate cu ajutorul etichetei STYLE, care se comporta ca un
container.

Sintaxa pentru definirea CSS la nivel de document HTML este urmatoarea:

<style type="text/css">
selector_1 {proprietate1:valoare1; proprietate2:valoare2; ...}
...
selector_n {proprietate1:valoare1; proprietate2:valoare2; ...}
</style>

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Exemplul 2.1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML cu CSS definit intern</title>
h1{
color: red;
}
</style>
</head>
<body>
<h1>Adaugarea unui stil la o eticheta HTML</h1>
<h2>Heading 2 - format implicit.</h2>
<h2 style="color: blue;">Heading 2 formatat cu ajutorul CSS.</h2>
</body>
</html>
Definirea tuturor stilurilor intr-o locatie comuna faciliteaza modificarea mai rapida a unui document.
h1 {font-family: Arial; font-size: 16px; font-weight: bold; color: red;}
p {font-family: Arial; font-size: 12px; color: blue;}
</style>

Este bine sa se utilizeze etichetele de comentariu HTML pentru a ascunde codul CSS de navigatoarele
care nu recunosc acest limbaj, altfel va fi afisat in fereastra definirea foilor de stil in format text.

Exemplul 2.2.
<html>
<head>
<title>HTML cu CSS definit intern</title>

</style>
</head>
<body>
<h1>Adaugarea unui stil la o eticheta HTML</h1>
<h2>Heading 2 - format implicit.</h2>
<h2 style="color: blue;">Heading 2 formatat cu ajutorul CSS.</h2>
</body>
</html>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

2.3. CSS extern

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, care apoi va fi inclus in documentul HTML prin
doua procedee: legatura sau import.

2.3.1. Crearea CSS extern

Crearea unui fisier de tip foaie de stil externa implica crearea unui fisier text cu ajutorul unui editor
de texte simplu sau specializat in acest sens. In fisierul nou creat se adauga reguli CSS, fara insa ca
aceste reguli sa fie incapsulate in etichete STYLE.

Dupa definirea regulilor fisierului i se atribuie un nume, iar ca extensie este bine sa se foloseasca
.css pentru o identificare mai rapida a tipului de fisier.

2.3.2. Legarea CSS extern

Foile de stil externe pot fi legate la un document HTML folosind urmatoarea sintaxa:

<link rel="stylesheet" href="nume_fisier.css">

Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele folosite transmit
navigatorului tipul de legatura (rel legatura cu o foaie de stil) si locatia inspre fisierul ce contine
regulile CSS (href calea relativa sau absoluta si numele complet al fisierului, inclusiv extensia).

Exemplul 2.3.
<html>
<head>
<title>HTML cu CSS definit extern</title>
<link rel="stylesheet" href="stil-2-3.css">
</head>
<body>
<h1>Utilizarea foilor de stil in cascada</h1>
<h2 style="color: blue;">Adaugarea unui stil la o eticheta HTML</h2>
<p>Regulile CSS pot fi definite intr-un document HTML, in sectiunea HEAD, cu ajutorul etichetei STYLE, sau
pot fi definite intr-un fisier CSS extern si apelate cu ajutorul etichetei LINK.</p>
</body>
</html>
stil-2-3.css
body{
background-color:#f0e68c;
}
Suport de curs: CSS

_______________________________________________________ ___________________________________________

h1{
color: red;
}

p{
font-family:"verdana";
font-size:16pt;
background-color:#ffffff;
}

2.3.3. Importul CSS extern

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>

Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a documentului HTML
eticheta container STYLE. In cadrul acestei etichete va aparea instructiunea @import, unde
nume_fisier.css reprezinta adresa URL a fisierului ce contine regulile CSS definite.
Alaturi de instructiunea @import, in cadrul etichetei STYLE pot exista definiti si selectori care definesc
reguli CSS suplimentare.

Exemplul 2.4.
<html>
<head>
<title>HTML cu CSS definit extern</title>
<style>
@import url('stil-2-3.css');
</style>
</head>
<body>
<h1>Utilizarea foilor de stil in cascada</h1>
<h2 style="color: blue;">Adaugarea unui stil la o eticheta HTML</h2>
<p>Regulile CSS pot fi definite intr-un document HTML, in sectiunea HEAD, cu ajutorul etichetei STYLE, sau
pot fi definite intr-un fisier CSS extern si apelate cu ajutorul etichetei LINK.</p>
</body>
</html>
stil-2-3.css
Suport de curs: CSS

_______________________________________________________ ___________________________________________

body{
}

h1{
color: red;
}

p{
font-size:16pt;
background-color:#ffffff;
}

Legarea unui fisier CSS extern sau importul acestuia intr-un document HTML are acelasi efect ca si
cum stilurile incluse ar fi fost definire direct in eticheta STYLE din sectiunea HEAD a documentului
HTML.

In cadrul unui document HTML se poate face referinta la unul sau mai multe fisiere CSS. De
asemenea, un document HTML care are definit un stil CSS intern, poate apela si un fisier CSS extern.

2.4. Definirea unui selector HTML (Redefinirea unei etichete
HTML)

Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii practic limitat doar de
compatibilitatea proprietatilor cu eticheta HTML la care se refera.

selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ...}

Dupa redefinirea etichetei HTML, toate aparitiile etichetei din documentul HTML vor fi modificate
automat. Prin redefinirea unei etichete, proprietatile prestabilite existente nu sunt anulate, ci se
adauga altele noi.

h1{color:green; font-size:14pt;}

2.5. Definirea unui selector de clasa

Utilizarea selectorilor de clasa ofera posibilitatea configurarii unor stiluri independente care se pot
aplica doar acelor elemente care sunt etichetate cu clasa respectiva. Spre deosebire de un selector
HTML, care defineste un anume tip de eticheta, clasele au un nume unic. Sintaxa generala de definire
a unei clase CSS este:

.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ...}
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Numele unei clase trebuie sa fie compact (fara spatiu) si nu trebuie sa contina simbolul . (punct).

.el_rosu {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 asociata in mod direct unui selector
HTML se foloseste urmatoarea sintaxa:

selector_HTML.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ...}

Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase nu poate fi un cuvant
rezervat JavaScript.

2.6. Definirea unui identificator ID

Asemanator cu selectorii de clasa se definesc si identificatorii. Acestia sunt folositi pentru crearea de
stiluri care pot fi atribuite oricarei etichete HTML. Sintaxa generala de definire a unui identificator
este:

#identificator { proprietate1:valoare1; proprietate2:valoare2; ...}

Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o singura data
in cadrul unei pagini web pentru identificarea obiectului unic in scopul manipularii acestuia cu
ajutorul functiilor JavaScript.

Identificatorii devin functionali doar atunci cand sunt specificati intr-o eticheta HTML individuala, in
cadrul unui document. Numele unui identificator nu poate fi cuvant rezervat din JavaScript.

Exemplul 2.5.
<html>
<head>
<title>Ex. definire: selector, clasa, identificator</title>
</head>
<body>
<div id="wrapper">
<div class="header"><p>Titlu site</p></div>
<div class="header"><h1>Titlu site</h1></div>
<p>CSS</p>
</div>
</body>
</html>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

stil-2-5.css
body {
}

#wrapper {
margin-left:50px;
margin-right:100px;
}

.header {
height:160px;
background-color:#c0b870;
color:#ffffff;
}

h1 {
color:red;
}

p {
font-size:20pt;
background-color:#908a54;
}

2.7. 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>.

2.7.1. In linie

Eticheta <span> nu are proprietati mostenite. Ea reprezinta doar o locatie vida menita sa creeze o
eticheta in linie.
#span1 { proprietate1:valoare1; proprietate2:valoare2; ...}
span.clasa_span { proprietate1:valoare1; proprietate2:valoare2; ...}
...
<span class="nume_clasa"> ... </span>
...
<span id="span1"> ... </span>
...
<span class="clasa_span"> ... </span>
...
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Pentru a configura o eticheta in linie trebuie configurata o clasa sau identificator care sa poata fi
aplicat apoi unei etichete <span>. In cazul in care selectorul de clasa este precedat de selectorul
HTML span, definitia respectiva poate fi utilizata doar intr-o eticheta span.
Exemplul 2.6.
<html>
<head>
<title>Etichete HTML personalizate</title>
</head>
<body>
<div id="wrapper">
<p>Personalizarea etichetelor HTML <span class="pers_in_line">in linie</span> cu ajutorul etichetei
<span class="clasa_pers_inline">span</span>.</p>
</div>
</body>
</html>
stil-2-6.css
body{
background-color:#b8e6e6;
}

#wrapper{
margin-left:50px;
}

p{
font-size:14pt;
}

.pers_in_line{
background-color:#ffebff;
color:red;
}

span.clasa_pers_inline{
font-size:24pt;
color:blue;
}

2.7.2. La nivel de bloc

In momentul in care este necesara configurarea unui bloc separat de restul continutului unui
document HTML, solutia este eticheta <div>. Aceasta determina un salt atat deasupra sa, cat si
dedesubtul sau.
Suport de curs: CSS

_______________________________________________________ ___________________________________________

#div1 { proprietate1:valoare1; proprietate2:valoare2; ...}
span.clasa_div { proprietate1:valoare1; proprietate2:valoare2; ...}
...
<div class="nume_clasa"> ... </div>
...
<div id="div1"> ... </div>
...
<div class="clasa_div"> ... </div>
...
Pentru crearea etichetelor la nivel de bloc se procedeaza la fel ca si in cazul etichetelor in linie, prin
configurarea mai intai a unei etichete de tip clasa sau identificator, urmata apoi de aplicarea ei
asupra unei etichete <div>.
Regulile CSS pentru definirea etichetelor personalizate in linie sau la nivel de bloc pot fi plasate in
sectiunea head a documentului in cadrul etichetei container style, sau intr-un fisier extern care
ulterior este legat sau importat in documentul HTML.
Exemplul 2.7.
<html>
<head>
<title>Etichete HTML personalizate</title>
</head>
<body>
<div id="wrapper">
<div class="pers_niv_bloc">Eticheta DIV.</div>
<div class="clasa_pers_bl">Personalizarea etichetelor HTML la nivel de bloc.</div>
</div>
</body>
</html>
stil-2-7.css
body{
}

#wrapper{
margin-left:50px;
}

.pers_niv_bloc{
width:170px;
}

div.clasa_pers_bl{
Suport de curs: CSS

_______________________________________________________ ___________________________________________

width:200px;
background-color:#adff2f;
}

2.8. Definirea de reguli similare

Daca mai multi selectori folosesc aceleasi definitii, acestia se insereaza intr-o lista de elemente
separate prin virgule. Sintaxa generala pentru definirea unei liste cu selectori este:

selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ...}

Impreuna cu selectorii pot fi de asemenea definiti si identificatorii si clasele. Dezavantajul definirii
regulilor similare este ca in momentul in care este modificata o valoare a unei proprietati incluse in
definitie, valoarea respectiva se va modifica in toate etichetele listei de reguli.
Exemplul 2.8.
<html>
<head>
<title>Definirea de reguli similare</title>
</head>
<body>
<div id="wrapper">
<h1>Definirea de reguli similare</h1>
<h2>Definirea de reguli similare</h2>
</div>
</body>
</html>
stil-2-8.css
body{
}

#wrapper{
margin-left:50px;
}

h1, h2{
color:blue;
}

2.9. Definirea 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
Suport de curs: CSS

_______________________________________________________ ___________________________________________

cea inferioara se numeste copil. Se pot crea reguli aferente etichetelor copil, sintaxa generala a unei
reguli contextuale fiind:

selector1 selector2 ... { proprietate1:valoare1; proprietate2:valoare2; ...}

Ultimul selector din lista este cel care primeste toate stilurile incluse in regula si le mosteneste pe
cele ale parintilor.

Ca si selectorii grupati, selectorii contextuali pot include in lista selectori de clasa, identificatori sau
selectori HTML.
Exemplul 2.9.
<html>
<head>
<title>Definirea etichetelor in context</title>
</head>
<body>
<div id="wrapper">
<div class="div_ex">
<h1>h1 in clasa div_ex</h1>
</div>
<h1>ex. h1</h1>
<h2>ex. h2</h2>
<h3>ex. h3</h3>
</div>
</body>
</html>
stil-2-9.css
body{
background-color:#e6e68a;
}

#wrapper{
margin-left:50px;
}

/* definim culoarea verde pentru h1, h2, h3 (reguli similare) */
h1, h2, h3{
color:green;
}

/* definim clasa div_ex */
.div_ex {
width:50%;
Suport de curs: CSS

_______________________________________________________ ___________________________________________

background-color:#ffff99;
}

/* definim o regula contextuala in care cei doi selectori sunt: selctorul de clasa div_ex si selectorul HTML h1
*/
/* setam culoarea rosu pentru h1 in cadrul clasei div_ex */
.div_ex h1{
color:red;
}

/* definim o alta regula contextuala in care cei doi selectori sunt: selctorul de clasa div_ex si selectorul HTML
h3 */
/* setam culoarea albastru pentru h3 in cadrul clasei div_ex */
.div_ex h3{
color:blue;
}

2.10. Determinarea ordinii cascadei

Exista mai multe moduri de a aplica stilurile, astfel ca ne putem afla in situatia in care unui singur
element 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 cascadei, si acestea sunt:

1. Existenta atributului !important confera prioritate maxima la afisarea definitiei in care este
utilizat.
2. 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.
3. Specificitate cu cat o regula dispune de mai multi selectori HTML, de clasa si de
identificator, cu atat prioritatea ei creste. Selectorii ID au valoarea 100, clasele au valoarea 10,
iar selectorii HTML au valoarea 1.
4. Momentul aparitiei cu cat un stil apare mai tarziu, mai aproape de elementul caruia i se
aplica, cu atat importanta lui este mai mare. Astfel, definitiile in linie au prioritatea cea mai
mare si anuleaza toate stilurile precedente cu care intra in conflict.

In situatia in care pentru un element HTML sunt definite mai multe stiluri, toate aceste stiluri sunt
imbinate virtual intr-unul singur, dupa urmatoarele reguli, in care nr. 1 reprezinta cel mai inalt nivel
de prioritate:

1. Stil inline (in cadrul unei etichete HTML)
2. Foi de stil in cascada definite intern (in cadrul sectiunii HEAD a documentului HTML)
3. Foi de stil in cascada definite intr-un fisier CSS extern (referit in sectiunea HEAD a
documentului HTML)
4. Stilul implicit al browser-ului.

Suport de curs: CSS

_______________________________________________________ ___________________________________________

De exemplu,
Daca pentru elementul H1 este definit intern urmatorul stil in cascada:
h1
{
color:red;
font-size:8pt;
}
iar intr-un fisier CSS extern este definit pentru acelasi element H1 urmatorul stil:
h1
{
text-align:left;
font-size:20pt;
}
atunci, proprietatile elementului H1 in cadrul documentului vor fi urmatoarele:
color:red; - proprietate mostenita de la stilul extern CSS
text-align:left; - proprietate definita in stilul CSS intern
font-size:20pt; - valoarea proprietatii font-size este cea definita in stilul CSS intern; in cazul in
care stilul CSS intern si cel extern au definite proprietati comune, atunci stilul CSS intern suprascrie
stilul CSS extern

Nota: Daca link-ul catre fisierul CSS extern este plasat in partea de <head> a documentului HTML
dupa stilul intern, atunci stilul extern acesta va suprascrie stilul intern.

2.11. Cresterea prioritatii unei definitii

Valoarea !important adaugata unei definitii atribuie maximum de prioritate in determinarea ordinii
unei cascade.

selector { proprietate1:valoare1; proprietate2:valoare2 !important; ...}

Valoarea !important trebuie plasata inaintea caracterului ;, altfel determina navigatorul sa ignore
definitia si, in anumite cazuri, chiar intreaga regula.

In cazul in care unui element ii sunt aplicate mai multe stiluri, regulile de aplicare a acestor stiluri
(stilul cel mai apropiat de element are prioritate maxima) poate altera valabilitatea regulilor de
prioritate prezentate in capitolul precedent.

2.12. Mostenirea stilurilor (proprietati mostenite si existente)

Toate etichetele HTML, cu exceptia etichetei BODY au cel putin o eticheta parinte, de tip container,
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.
Suport de curs: CSS

_______________________________________________________ ___________________________________________

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 reinitializarea proprietatii in
lista de definitii a etichetei imbricate.

2.13. Adaugarea comentariilor

Este necesar uneori sa fie adaugate comentarii CSS, pentru a explica anumite elemente de cod, sau
pentru a fixa puncte de reper. Ca si comentatiile HTML, comentariile CSS vor fi ignorate de catre
browser.
Un comentariu CSS incepe cu /* si se termina cu */.
/* comentariu css */
Cometariile pot fi folosite intre sau in cadrul seturilor de reguli si se pot extinde pe unul sau mai
multe randuri.
De exemplu:
/* Comentariu... */

p
{
margin: 1em; /* Comentariu... */
padding: 2em;
/* color: white; */
background-color: blue;
}

/*
Comentariu
care se intinde
pe mai multe linii
*/

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Capitolul 3. CONTROALE PENTRU FONTURI

Alegerea potrivita a fonturilor si folosirea acestora in cadrul paginilor web poate avea efecte benefice
sau poate atrage critici si comentarii din partea vizitatorilor, mai ales daca formatarea clasica prin
scris normal, aldin sau cursiv nu este folosita corespunzator. Un alt inconvenient il reprezinta
folosirea etichetelor individuale de formatare in contextul unor site-uri mari si sofisticate, deoarece
trebuie parcurse cantitati mari de cod pentru a face anumite modificari.

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.

3.1. Generalitati

In CSS exista doua tipuri de nume pentru familii de fonturi:
- fonturi de baza un grup de familii de fonturi cu aspect similar (ex. Serif sau Monospace)
- familii de fonturi o familie de fonturi specifica (ex. Times New Roman sau Arial)

Exista cinci familii de fonturi de baza / nume generice de fonturi:
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 texte mai mici afisate pe
ecran.
monospace fonturile monospatiate pot avea nu nu 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).

Diferenta intre fonturile Serif si Sans-serif:

Nota: Pe un monitor decomputer fonturile sans-serif sunt considerate mai usor de citit decat
fonturile serif.

Font de baza Familii de fonturi
Serif Times New Roman
Georgia
Sans-serif Arial
Verdana
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Monospace
Courier New
Lucida Console
Cursive
Comic Sans MS
Monotype Corsiva
Fantasy Impact
Alegerian

3.2. Stabilirea familiei de font

Fontul folosit pentru afisarea unui text poate fi stabilit prin proprietatea font. Pentru definirea
fontului in cadrul unei reguli se foloseste proprietatea font-family urmata de numele fontului sau a
fonturilor (despartite prin virgula).

Pentru ca exista o gama foarte larga de fonturi, iar unele dintre ele sunt contra cost, acestea nu sunt
disponibile pe toate calculatoarele/sistemele. In acest sens, CSS ofera posibilitatea precizarii a mai
mult de un font in cadrul definirii proprietatii font-family, despartite prin virgula.

selector { font-family: nume_font1, nume_font2,..., nume_generic;}

Dupa ultima virgula (dupa ultimul nume de font) se pot folosi urmatoarele nume generice de fonturi:
serif, sans-serif, cursive, monospace si fantasy. Includerea unei asemenea valori este optionala, insa,
in acelasi timp, recomandata.

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, trece la urmatorul, parcurgand astfel lista pana in momentul in care intalneste un font
instalat. Daca nu este regasit niciun font, textul va fi afisat cu fontul prestabilit. In cazul in care
fonturile specificate in lista nu sunt disponibile, daca este specificat un nume generic / font de baza,
textul va fi afisat cu un font apartinand acelui stil.

Nota: Daca un nume de font contine mai mult de un cuvant (contine spatii), atunci numele se scrie
intre ghilimele simple sau duble.

h1 { font-family: "Times New Roman", Times , serif; }
Exemplul 3.1.
<html>
<head>
<title>Controale pentru fonturi - font-family</title>
</head>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<body>
<div id="wrapper">
<h2>Control Aspect Font - CSS</h2>
<p class="stil_font_ar">Text Arial, Sans-serif</p>
<p class="stil_font_trn">Text Times New Roman, Sans-serif</p>
</div>
</body>
</html>
stil-3-1.css
body{
background-color:#ffffb8;
}

#wrapper{
margin-left:50px;
}

h2{
font-family: "Monotype Corsiva", "Comic Sans MS", cursive;
}

.stil_font_ar{
font-family: Arial, Helvetica, sans-serif;
}

.stil_font_tnr{
font-family: "Times New Roman", Georgia, serif;
}

3.3. Font-uri personalizate

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, altfel spus, 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 unde poate fi gasit fontul respectiv.

@font-face { font-family: "nume_font" src: url(locatie_font_descarcabil);}

Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un anume format. Insa,
problema este ca nu exista un format valabil pentru toate navigatoarele, de exemplu Internet
Explorer foloseste fonturi in format eof, obtinute cu ajutorul unui program numit WEFT.

Suport de curs: CSS

_______________________________________________________ ___________________________________________

@font-face { font-family: "StopD"; src: url(StopD.eof); }

3.4. Stabilirea dimensiunii font-ului

HTML pune la dispozitie sapte dimensiuni ale fontului, insa acestea sunt relative la o dimensiune
prestabilita de vizitator. Cu ajutorul CSS se poate stabili dimensiunea fontului folosind valori absolute
(exprimate in diferite unitati de masura), 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 fi:
unitate de masura (exprimata in pixeli, puncte, inci, centimetri, etc.)
expresie absoluta (xx-small, x-small, small, medium, large, x-large si xx-large)
expresia smaller sau larger, in raport cu elementul parinte
procent, care indica marimea textului in raport cu dimensiunea elementului parinte

selector { font-size: valoare;}

Este bine ca pentru foile de stil care formateaza iesirea la imprimanta sa se foloseasca unitati de
masura precum: puncte, cm sau mm.

h1 { font-size:12px; }

Pixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru stabilirea dimensiunii
fontului. Pixelii nu reprezinta o masura foarte sigura, dar, de obicei, constituie o masura mai sigura
decat dimensiunea in puncte.

Dimensiunile exprimate in puncte constituie o modalitate comuna de a nota marimea unui font. Este
bine totusi, din motive de siguranta, sa nu se depaseasca dimensiunea de 50 de puncte pentru
stabilirea dimensiunii unui font.

Folosirea unitatii pt sau em pentru dimensiunea unui font permite ca textul din pagina/paginile web
sa fie redimensionat in functie de setarile de sistem ale fiecarui utilizator in parte, astfel ca, aspectul
paginii este posibil sa apara uneori distorsionat.

De asemenea, dimensiunea fontului (ex. 12px) difera in functie de familia de fonturi, font-family
(Arial, Times New Roman, etc.).

Exemplul 3.2.
<html>
<head>
<title>Controale pentru fonturi - font-size</title>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

</head>
<body>
<div id="wrapper">
<p class="stil_font_dim1">Text de dimensiune 14px, font predefinit.</p>
<p class="stil_font_dim2">Text de dimensiune 20px, font predefinit.</p>
<p class="stil_font_1">Text de dimensiune 16px, font Arial.</p>
<p class="stil_font_2">Text de dimensiune 16px, font Times New Roman.</p>
<br>
<p class="stil_dim_abs1">Text de dimensiune absoluta xx-small.</p>
<p class="stil_dim_abs2">Text de dimensiune absoluta x-small.</p>
<p class="stil_dim_abs3">Text de dimensiune absoluta small.</p>
<p class="stil_dim_abs4">Text de dimensiune absoluta medium.</p>
<p class="stil_dim_abs5">Text de dimensiune absoluta large.</p>
<p class="stil_dim_abs6">Text de dimensiune absoluta x-large.</p>
<p class="stil_dim_abs7">Text de dimensiune absoluta xx-large.</p>
</div>
</body>
</html>
stil-3-2.css
body{
}

#wrapper{
margin-left:50px;
}

.stil_font_dim1{
font-size: 14px;
}

.stil_font_dim2{
font-size: 20px;
}

.stil_font_1{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}

.stil_font_2{
font-family: "Times New Roman", Georgia, serif;
font-size: 16px;
}

.stil_dim_abs1{
font-size:xx-small;
}
Suport de curs: CSS

_______________________________________________________ ___________________________________________

.stil_dim_abs2{
font-size:x-small;
}

.stil_dim_abs3{
font-size:small;
}

.stil_dim_abs4{
font-size:medium;
}

.stil_dim_abs5{
font-size:large;
}

.stil_dim_abs6{
font-size:x-large;
}

.stil_dim_abs7{
font-size:xx-large;
}

3.5. 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 urmata
de una din valorile: normal (valoare implicita), italic, sau oblique.

selector { font-style:valoare;}
Ex.:
h1 { font-style:italic; }

Pentru a sterge formatarea cu caractere inclinate, valorea proprietatii font-style trebuie sa fie:
normal.

Exemplul 3.3.
<html>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<head>
<title>Controale pentru fonturi - font-style</title>
</head>
<body>
<div id="wrapper">
<p class="stil_font1">Text normal.</p>
<p class="stil_font2">Text cursiv.</p>
<p class="stil_font3">Text oblic.</p>
</div>
</body>
</html>
stil-3-3.css
body{
}

#wrapper{
margin-left:50px;
}

.stil_font1{
font-style:normal;
}

.stil_font2{
font-style:italic;
}

.stil_font3{
font-style:oblique;
}

3.6. Text ingrosat

Ingrosarea este una dintre metodele utilizate des pentru scoaterea in evidenta a unui text. Daca
limbajul HTML permite doar o optiune de text scris aldin prin folosirea etichetei <b>, lucrurile se
prezinta altfel in cazul utilizarii CSS.

Foile de stil in cascada confera mai multa flexibilitate in utilizarea textului ingrosat prin posibilitatea
introducerii unei valori a proprietatii font-weight dupa cum urmeaza:

bold scrie fontul folosind caractere ingrosate
bolder, lighter mareste, respectiv micsoreaza ponderea fontului relativ la ponderea curenta
valoare cuprinsa intre 100 si 900 (multiplu de 100) reprezinta valoarea ponderii, bazata pe
versiunile alternative disponibile ale fontului.
normal elimina formatarea cu caractere aldine (valoare implicita)
Suport de curs: CSS

_______________________________________________________ ___________________________________________

selector { font-weight:valoare;}
Ex.:
h1 { font- weight:bold; }

400 reprezinta valoarea corespunzatoare ponderii normale, iar 700 valoarea ponderii 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.
Exemplul 3.4.
<html>
<head>
<title>Controale pentru fonturi - font- weight</title>
</head>
<body>
<div id="wrapper">
<p class="font_normal">Text normal</p>
<p class="mai_subtire">Text lighter</p>
<p class="font_ingrosat">Text bold</p>
<p class="mai_ingrosat">Text bolder</p>
<p class="font_900">Text - 900</p>
</div>
</body>
</html>
stil-3-4.css
body{
}

#wrapper{
margin-left:50px;
}

p.font_normal{
font-style:normal;
}

p.mai_subtire{
font-style:lighter;
}

p.font_ingrosat{
font-weight:bold;
}

Suport de curs: CSS

_______________________________________________________ ___________________________________________

p.mai_ingrosat{
font-weight:bolder;
}

p.font_900{
font-weight:900;
}

3.7. Majuscule mici

Majusculele mici sunt folosite de obicei in cadrul titlurilor, ele fiind obtinute prin convertirea literelor
mici in majuscule cu o dimensiune inferioara majusculelor normale. Astfel se obtin cuvinte in care
toate literele sunt scrise cu majuscule insa prima litera este mai inalta decat celelalte.

selector { font-variant:valoare;}
Ex.:
h1 { font-variant:small-caps; }

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 font-variant.
Exemplul 3.5.
<html>
<head>
<title>Controale pentru fonturi - font- variant</title>
</head>
<body>
<div id="wrapper">
<h3 class="majuscule_mici">Text scris cu Majuscule Mici.</h3>
<p class="font_normal">Text normal text normal text normal text normal text normal.</p>
</div>
</body>
</html>
stil-3-5.css
body{
}

#wrapper{
margin-left:50px;
}

Suport de curs: CSS

_______________________________________________________ ___________________________________________

h3.majuscule_mici{
font-variant:small-caps;
}

p.font_normal{
font-variant:normal;
}

3.8. 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 valori pentru celelalte proprietati, separate prin
spatiu.
Proprietatile care pot fi setate sunt in ordine:
selector { font: val_font-style val_font-variant val_font-weight val_font-size/val_line_height val_font-
family;}
Ex.:
h1 { font: italic small-caps bold 14pt arial, sans-serif; }

font-size si font-family sunt obligatorii. Daca una din celelalte valori este omisa, navigatorul va folosi
valoarea prestabilita.
Proprietatea line_height seteaza spatiul dintre randuri.
Exemplul 3.6.
<html>
<head>
<title>Controale pentru fonturi - font</title>
</head>
<body>
<div id="wrapper">
<h1>Antet H1</h1>
<h2>Antet H2</h2>
<p class="stil1">Text1 text1 text1 text1 text1 text1 text1.<br>Text1 text1 text1 text1 text1 text1
text1.<br>Text1 text1 text1 text1 text1 text1 text1.</p>
<p class="stil2">Text2 text2 text2 text2 text2 text2 text2.<br>Text2 text2 text2 text2 text2 text2
text2.<br>Text2 text2 text2 text2 text2 text2 text2.</p>
</div>
</body>
</html>
stil-3-6.css
body{
Suport de curs: CSS

_______________________________________________________ ___________________________________________

}

#wrapper{
margin-left:50px;
}

h1{
font:italic small-caps bold 24px arial,sans-serif;
}

h2{
font:bold 20px georgia,serif;
}

p.stil1{
font:italic lighter 14px arial,sans-serif;
}

p.stil2{
font:italic lighter 14px/40px arial,sans-serif;
}

Suport de curs: CSS

_______________________________________________________ ___________________________________________

3.9. Tabel recapitulativ

Proprietate Valoare
font-family <family-name>
Arial
Times New Roman
Courier New
Monotype Corsiva
Impact
etc.
<generic-family>
serif
sans-serif
cursive
fantasy
monospace
font-size <length>
<percentage>
smaller
larger
xx-small
x-small
small
medium
large
x-large
xx-large
font-style normal
italic
oblique
font-weight normal
bold
lighter
bolder
100-900
font-variant normal
small-caps
font font-family
font-style
font-variant
font-weight
font-size
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Capitolul 4. CONTROALE PENTRU TEXT

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 mari gradul de lizibilitate, dar
pot si atrage atentia asupra anumitor aspecte.

4.1. Spatiul intre litere

Spatierea selectiva se refera la cantitatea de spatiu dintre literele unui cuvant. Se poate mari sau
reduce spatiul dintre litere folosind proprietatea letter-spacing, urmata de o valoare exprimata intr-o
anumita unitate de masura, ce poate lua si valori negative.

selector { letter-spacing:valoare;}
Ex.:
h1 { letter-spacing:1,5em; }

Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la valorile implicite (adica
fara spatii suplimentare).
Exemplul 4.1.
<html>
<head>
<title>Controale pentru text - letter-spacing</title>
</head>
<body>
<div id="wrapper">
<p class=" ltr_sp1">Text cu spatiere normala intre litere.</p>
<p class=" ltr_sp2">Text cu spatiere intre litere de 0.75em.</p>
<p class=" ltr_sp3">Text cu spatiere intre litere de 9px.</p>
<p class=" ltr_sp4">Text cu spatiere intre litere de -1px</p>
</div>
</body>
</html>
stil-4-1.css
body{
background-color: #ffefe6;
}

#wrapper{
margin-left:50px;
}

p. ltr_sp1{
letter-spacing:normal;
Suport de curs: CSS

_______________________________________________________ ___________________________________________

}

p. ltr_sp2{
letter-spacing:0.75em;
}

p. ltr_sp3{
letter-spacing:9px;
}

p. ltr_sp4{
letter-spacing:-1px;
}

4.2. Spatiul intre cuvinte

CSS da posibilitatea modificarii spatiului intre cuvinte atat prin marire, cat si prin micsorare.
Adaugarea sau reducerea spatiului poate influenta pozitiv sau negativ lizibilitatea.

Pentru definirea spatierii intre cuvinte se foloseste proprietatea word-spacing, urmata de o valoare
exprimata intr-o anumita unitate de masura, px, pt, cm, em, etc., care poate fi si negativa si care
defineste o cantitate de spatiu intre cuvinte.

selector { word-spacing:valoare;}
Ex.:
h1 { word-spacing:10px; }
Pentru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa fie: normal.
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, valoarea 0 fiind similara cu valoarea normal.
Exemplul 4.2.
<html>
<head>
<title>Controale pentru text - word-spacing</title>
</head>
<body>
<div id="wrapper">
<p class="wrd_sp1">Text cu spatiere normala intre cuvinte.</p>
<p class="wrd_sp2">Text cu spatiere intre cuvinte de 5px.</p>
</div>
</body>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

</html>
stil-4-2.css
body{
background-color: #ffefe6;
}

#wrapper{
margin-left:50px;
}

p.wrd_sp1{
word-spacing:normal;
}

p.wrd_sp2{
word-spacing:0.75em;
}

4.3. Spatiul intre linii

Inaltimea randurilor se refera la interlinierea paragrafului, adica la spatiul dintre liniile acestuia.
Utilizarea interlinierii 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 stabili inaltimea randurilor se foloseste proprietatea line-height, urmata de o valoare care
poate fi exprimata in urmatoarele:

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, care
indiferent de dimensiunea stabilita a fontului, inaltimea liniei are o valoare exacta;
un procent, care stabileste inaltimea liniei ca fiind egala cu un anumit procent din
dimensiunea fontului folosit pentru scrierea textului;
normal vlaoarea implicita.

selector { line-height:valoare;}
Ex.:
h1 { line-height:150%; }
Pentru anularea interlinierii, valoarea proprietatii trebuie sa fie: 0.
Inaltimea liniei poate de asemenea fi definita in cadrul proprietatii font prin introducerea caracterului
/ urmat de valoarea pentru inaltimea randului, imediat dupa dimensiunea fontului (ca in
Exemplul3.6.).
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Exemplul 4.3.
<html>
<head>
<title>Controale pentru text - line-height</title>
</head>
<body>
<div id="wrapper">
<p class="ln_sp1">Paragraf cu spatiere normala intre randuri. Paragraf cu spatiere normala intre
randuri. Paragraf cu spatiere normala intre randuri. Paragraf cu spatiere normala intre randuri. Paragraf cu
spatiere normala intre randuri. Paragraf cu spatiere normala intre randuri.</p>
<p class="ln_sp2">Paragraf cu spatiere intre randuri de 200%. Paragraf cu spatiere intre randuri de
200%. Paragraf cu spatiere intre randuri de 200%. Paragraf cu spatiere intre randuri de 200%. Paragraf cu
spatiere intre randuri de 200%.</p>
<p class="ln_sp3">Paragraf cu spatiere intre randuri de 30px. Paragraf cu spatiere intre randuri de
30px. Paragraf cu spatiere intre randuri de 30px. Paragraf cu spatiere intre randuri de 30px. Paragraf cu
spatiere intre randuri de 30px.</p>
</div>
</body>
</html>
stil-4-3.css
body{
background-color:#ffefe6;
}

#wrapper{
margin-left:50px;
}

p.ln_sp1{
line-height:normal;
}

p.ln_sp2{
line-height:200%;
}

p.ln_sp3{
line-height:50px;
}

4.4. Marimea / tipul literelor

Exista cazuri in care se doreste afisarea textului cu un anume tip de litere. Astfel va trebui specificat
explicit ca textul sa apara cu majuscule initiale, majuscule, minuscule, combinat sau asa cum a fost el
Suport de curs: CSS

_______________________________________________________ ___________________________________________

scris. Cu ajutorul proprietatii text-transform se poate controla marimea/tipul literelor din text,
indiferent de modul cum a fost el scris initial.

selector { text-transform:valoare;}
Ex.:
h1 { text-transform:uppercase; }

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;
none pentru ca textul sa fie afisat asa cum este.
Pentru ca un anume text sa apara scris cu majuscule si in cazul folosirii unui navigator mai vechi, este
bine ca respectivul text sa fie introdus ca atare.

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), oferind o lizibilitate sporita acestora.
Exemplul 4.4.
<html>
<head>
<title>Controale pentru text - text-transform</title>
</head>
<body>
<div id="wrapper">
<p class="txt_tr1">Text transformat cu proprietatea text-transform: capitalize.</p>
<p class="txt_tr2">Text transformat cu proprietatea text-transform: uppercase.</p>
<p class="txt_tr3">Text transformat cu proprietatea text-transform: LOWERCASE.</p>
<p class="txt_tr4">Text transformat cu proprietatea text-transform: NONE.</p>
</div>
</body>
</html>
stil-4-4.css
body{
}

#wrapper{
margin-left:50px;
}

p.txt_tr1{
Suport de curs: CSS

_______________________________________________________ ___________________________________________

text-transform:capitalize;
}

p.txt_tr2{
text-transform:uppercase;
}

p.txt_tr3{
text-transform:lowercase;
}

p.txt_tr4{
text-transform:none;
}

4.5. Alinierea textului pe orizontala

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 (stanga), right (dreapta),
center (centru), justify (stanga-dreapta).

selector { text-align:valoare;}
Ex.:
h1 { text-align:justify; }
Proprietatea poate fi aplicata numai elementelor la nivel de bloc, valoarea sa implicita fiind in
majoritatea cazurilor stabilita la valoarea left.
In cazul in care alinierea textului este stanga-dreapta, spatierea cuvintelor si a literelor se schimba
pentru a se obtine limite stanga-dreapta uniforme pentru continut. Aceasta are uneori efecte
negative asupra lizibilitatii textului.
Exemplul 4.5.
<html>
<head>
<title>Controale pentru text - text-align</title>
</head>
<body>
<div id="wrapper">
<h1 class="txt_aln1">Titlu aliniat la centru</h1>
<h2 class="txt_aln2">Titlu aliniat la stanga</h2>
<h3 class="txt_aln3">Titlu aliniat la dreapta</h3>
<p class="txt_aln4">Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-
Suport de curs: CSS

_______________________________________________________ ___________________________________________

dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat
stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text
aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta.
Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-dreapta. Text aliniat stanga-
dreapta. </p>
</div>
</body>
</html>
stil-4-5.css
body{
}

#wrapper{
margin-left:50px;
}

.txt_aln1{
text-align:center;
}

.txt_aln2{
text-align:left;
}

.txt_aln3{
text-align:right;
}

.txt_aln4{
text-align:justify;
}

4.6. Alinierea textului pe verticala

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, amplasat anterior sau ulterior acestora.

selector { vertical-align:valoare;}
Ex.:
span { vertical-align:baseline; }

Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele optiuni:
super pentru scrierea elementului ca indice superior, deasupra liniei de baza;
sub - pentru scrierea elementului ca indice inferior, sub linia de baza;
Suport de curs: CSS

_______________________________________________________ ___________________________________________

baseline pentru scrierea elementului pe linia de baza;
top partea superioara a elementului este aliniata cu partea superioara a celui mai inalt
element din randul curent;
middle elementul este pozitionat la mijlocul elementului parinte
bottom partea inferioara a elementului este aliniata cu cel mai inferior element din randul
curent;
text-top partea superioara a elementului este aliniata cu partea superioara a fontului
elementului parinte;
text-bottom partea inferioara a elementului este aliniata cu partea inferioara a fontului
elementului parinte;
valoare procentuala care ridica sau coboara linia de baza a elementului proportional cu
dimensiunea fontului elementului parinte;
marime in px, em, cm, etc. ridica sau coboara un element, in functie de marimea specificata.

Exemplul 4.6.
<html>
<head>
<title>Controale pentru text - vertical-align</title>
</head>
<body>
<div id="wrapper">
<p>Imaginea: <img src="imagini/element_css.jpg" width="280" height="40" alt="">cu stil de aliniere
implicit.</p>
<p>Imaginea: <img src="imagini/element_css.jpg" class="vtl_aln1" width="280" height="40"
alt="">cu stil de aliniere text-top.</p>
<p>Stil de aliniere text-bottom pentru imaginea: <img src="imagini/element_css.jpg"
class="vtl_aln2" width="280" height="40" alt=""></p>
<p>Stil de aliniere baseline pentru imaginea: <img src="imagini/element_css.jpg" class="vtl_aln3"
width="280" height="40" alt=""></p>
alt="">cu stil de aliniere 50%.</p>
alt="">cu stil de aliniere -50%.</p>
alt="">cu stil de aliniere 20px.</p>
alt="">cu stil de aliniere -10px.</p>
<p>Indice <span class="vtl_aln8">superior</span> creat cu align:super.</p>
<p>Indice <span class="vtl_aln9">inferior</span> creat cu align:sub.</p>
</div>
</body>
</html>
stil-4-6.css
body{
Suport de curs: CSS

_______________________________________________________ ___________________________________________

}

#wrapper{
margin-left:50px;
}

.vtl_aln1{
vertical-align:text-top;
}

.vtl_aln2{
vertical-align:text-bottom;
}

.vtl_aln3{
vertical-align:baseline;
}

.vtl_aln4{
vertical-align:50%;
}

.vtl_aln5{
vertical-align:-50%;
}

.vtl_aln6{
vertical-align:20px;
}

.vtl_aln7{
vertical-align:-10px;
}

.vtl_aln8{
vertical-align:super;
}

.vtl_aln9{
vertical-align:sub;
}

4.7. Decalarea paragrafelor

Cu ajutorul proprietatii text-indent se poate stabili ce spatiu suplimentar este inserat la inceputul
primei linii de text dintr-un paragraf. Pentru a adauga indentari se foloseste proprietatea mai sus
Suport de curs: CSS

_______________________________________________________ ___________________________________________

mentionata, urmata de o valoare exprimata intr-o unitate de masura (px, pt, em, cm, etc.) sau in
procente (proportional cu latimea elementului parinte).

selector { text-indent:valoare;}
Ex.:
p { text-indent:10%; }
Valorile pozitive determina o indentare tipica, in timp ce valorile negative determina o indentare
agatata, fiind necesara fie marirea umplerii, fie marirea marginilor.
Pentru eliminarea decalarii se utilizeaza valoarea 0.
Exemplul 4.7.
<html>
<head>
<title>Controale pentru text - text-indent</title>
</head>
<body>
<div id="wrapper">
<p class="txt_indt1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo.</p>
<p class="txt_indt2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo.</p>
</div>
</body>
</html>
stil-4-7.css
body{
}

#wrapper{
margin-left:50px;
}

.txt_indt1{
text-indent:30px;
}

.txt_indt2{
Suport de curs: CSS

_______________________________________________________ ___________________________________________

text-indent:10%;
}

4.8. Aplicarea elementelor decorative

Foile de stil in cascada permit 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;
none niciun element decorativ pentru text.

selector { text-decoration:valoare;}
Ex.:
a:link { text-decoration:none; }
Pentru a elimina decoratiile se foloseste valoarea none. Prin folosirea acestei valori se elimina si
sublinierile legaturilor, chiar daca vizitatorul si-a configurat navigatorul astfel incat acesta sa
sublinieze legaturile.
Elementul decorativ blink are un trecut cu probleme, fiind eliminat de marea majoritate a
navigatoarelor.
Exemplul 4.8.
<html>
<head>
<title>Controale pentru text - text-decoration</title>
</head>
<body>
<div id="wrapper">
<p class="txt_dcrn1">Text cu decorare underline</p>
<p class="txt_dcrn2">Text cu decorare overline</p>
<p class="txt_dcrn3">Text cu decorare line-through</p>
<p><a href="#" class="txt_dcrn4">Legatura</a> pentru care a fost anulata sublinierea</p>
</div>
</body>
</html>
stil-4-8.css
body{
Suport de curs: CSS

_______________________________________________________ ___________________________________________

}

#wrapper{
margin-left:50px;
}

.txt_dcrn1{
text-decoration:underline;
}

.txt_dcrn2{
text-decoration:overline;
}

.txt_dcrn3{
text-decoration:line-through;
}

.txt_dcrn4{
text-decoration:none;
}

4.9. Spatiile albe

Implicit, 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.

selector { white-space:valoare;}
Ex.:
p { white-space:pre; }
Valorile pe care le poate lua white-space sunt:
normal succesiunile de spatii albe vor colapsa intr-un singur spatiu, iar randul se va
intrerupe (se va trece la o noua linie) cand va fi necesar; acesta este modul implicit;
nowrap succesiunile de spatii albe vor colapsa intr-un singur spatiu si randul va fi unul
continuu pana la intalnirea unei intreruperi de linie <br> ;
pre succesiunile de spatii albe sunt pastrate de catre browser si randul se va intrerupe la
intalnirea intreruperilor de linie <br>;
pre-line succesiunile de spatii albe vor colapsa intr-un singur spatiu si randul se va intrerupe
cand va fi necesar si la intalnirea intreruperilor de linie <br>;
pre-wrap succesiunile de spatii albe sunt pastrate de catre browser si randul se va intrerupe
cand va fi necesar si la intalnirea intreruperilor de linie <br>.
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Pentru a activa afisarea tuturor spatiilor si a intreruperilor de linie din text, proprietatea va lua
valoarea pre. Utilizarea valorii nowrap impiedica trecerea la linia urmatoare in cazul in care nu este
specificata eticheta <br>.
Valoarea normal permite navigatorului sa decida asupra modului de tratare a spatiilor. De obicei,
acestea vor fi transformate intr-un singur spatiu.
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.
Exemplul 4.9.
<html>
<head>
<title>Controale pentru text - white-space</title>
</head>
<body>
<div id="wrapper">
<p class="wht_sp1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. <br>Nulla
consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<hr>
<hr>
<hr>
</div>
</body>
</html>
stil-4-9.css
body{
}

#wrapper{
margin-left:50px;
}
Suport de curs: CSS

_______________________________________________________ ___________________________________________

.wht_sp1{
white-space:pre;
}

.wht_sp2{
white-space:nowrap;
}

.wht_sp3{
white-space:pre-wrap;
}

.wht_sp4{
white-space:pre-line;
}

4.10. Text colorat
Proprietatea folosita pentru colorarea textului este color.
Culoarea poate fi specificata astfel:
Dupa nume: un nume de culoare precum red;
RGB: o valoare RGB ca de exemplu rgb(100,0,0);
Hex: o valoare hexazecimala ca de exemplu #0000ff.

selector {color:valoare;}
Ex.:
p {color:blue;}
Exista urmatoarele 16 nume de culori (culori predefinite) recunoscute de toate browserele: white,
silver, gray, black, red, maroon, yellow, olive, lime, green, aqua, teal, blue, navy, fuchsia, purple.
Exemplul 4.10.
<html>
<head>
<title>Controale pentru text - color</title>
</head>
<body>
<div id="wrapper">
<h1>Titlu H1</h1>
<p>Paragraf obisnuit de culoare albastra, asa cum a fost definita proprietatea <b>color</b> pentru
eticheta BODY.</p>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<p class="col_green">Paragraf de culoare verde, asa cum a fost definita proprietatea <b>color</b>
in clasa <b>col_green</b> pentru paragrafe.</p>
</div>
</body>
</html>
stil-4-10.css
body{
color:blue;
}

#wrapper{
margin-left:50px;
}

h1{
color:#cc3300;
}

p.col_green{
color:#009900;
}

4.11. Particularizarea legaturilor

Prin intermediul CSS pot fi definite stiluri particularizate pentru legaturile dintr-o pagina HTML (ex.
culoare, familie de font, culoare de fundal, etc.). O particularitate a legaturilor/link-urilor este aceea
ca aspectul lor poate fi particulariza in functie de starea in care se afla.
Cele 4 stari in care se pot afla link-urile sunt:
a:link un link normal, nevizitat inca
a:visited un link vizitat deja de catre utilizator
a:hover un link atunci cand se trece cu mouse-ul peste el
a:active un link in momentul in care este actionat
Ex.:
a:link {color: #ff0000;}
a:visited {color: #800000;}
a:hover {color: #800080;}
a:active {color: #ff00ff;}
Pe langa proprietatea color, mai pot fi setate pentru particularizarea link-urilor si proprietati precum:
text-decoration, font-family, background-color, etc.
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Pentru ca aceste setari sa aiba efect trebuie ca a:hover sa vina dupa a:link si a:visited, iar a:active
dupa a:hover.
Exemplul 4.11.
<html>
<head>
<title>Controale pentru link-uri</title>
</head>
<body>
<div id="wrapper">
<p><a href="#">Acesta este un link</a> si acesta este un text obisnuit.</p>
</div>
</body>
</html>
stil-4-11.css
body{
color:#0f0f0a;
}

#wrapper{
margin-left:50px;
}

a:link {
color: #ff0000;
}

a:visited {
color: #008000;
}

a:hover {
color: #800080;
text-decoration:underline;
}

a:active {
color: #ff00ff;
}

Suport de curs: CSS

_______________________________________________________ ___________________________________________

4.12. Directia textului

Proprietatea direction specifica directia textului sau directia de scriere.

selector {direction:valoare;}
Ex.:
p {direction: ltr;}
Valori posibile:
ltr directia de scriere este de la stanga la dreapta (left-to-right); aceasta este valoarea
implicita;
rtl directia de scriere este de la dreapta la stanga (right-to-left).

Exemplul 4.12.
<html>
<head>
<title>Controale pentru text - direction</title>
</head>
<body>
<div id="wrapper">
<p>Text. Directie implicita de la stanga la dreapta.</p>
<p class="dir_rtl">Text. Directie de scriere de la dreapta la stanga.</p>
</div>
</body>
</html>
stil-4-12.css
body{
}

#wrapper{
margin-left:50px;
margin-right:50px;
}

p.dir_rtl {
direction:rtl;
}

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Proprietate Valoare
letter-spacing normal
<length>
word-spacing normal
<length>
line-height normal
<number>
<length>
<percentage>
text-transform capitalize
uppercase
lowercase
none
text-align left
right
center
justify
vertical-align baseline
super
sub
top
text-top
middle
bottom
text-bottom
<lenght>
<percentage>
text-indent <length>
<percentage>
text-decoration none
underline
overline
line-through
blink
white-space normal
pre
nowrap
color <color name>
<color RGB>
<color Hex>
a:link, a:visited, a:hover, a:active <color name>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<color RGB>
<color Hex>
direction ltr
rtl

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Capitolul 5. CONTROALE 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, oferind
astfel o mai mare flexibilitate in proiectare.

5.1. Configurarea fundalului

Se poate schimba nu doar pentru fundalul intregii pagini, ci si pentru un anumit element din pagina,
fie el de tip imagine, tabel sau formular.

5.1.1. Culoarea fundalului

Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color, urmata de o
valoare care reprezinta numele culorii, valoarea RGB, sau valoare hexazecimala.

selector {background-color:valoare; }
Ex.:
body { background-color:#c0c0c0; }

Valoarea transparent indica navigatorului sa utilizeze culoarea prestabilita sau pe cea a elementului
parinte.
Culoarea de fundal acopera intreaga zona de desfasurare a elementului, inclusiv zonele padding si
border, dar nu margin.
Exemplul 5.1.
<html>
<head>
<title>Configurarea fundalului - background-color</title>
</head>
<body>
<div class="bg_clr1">
<h1>Titlu H1</h1>
<p>Paragraf obisnuit.</p>
<p class="bg_clr3">Paragraf cu proprietatea <b>background-color</b>:transparent.</p>
<p class="bg_clr4">Paragraf cu background color.</p>
</div>
<br>
<div class="bg_clr2"><p><b>background-color</b> nu acopera zona "margin-left" (100px).</p></div>
</body>
</html>
stil-5-1.css
body{
Suport de curs: CSS

_______________________________________________________ ___________________________________________

background-color:#deffbd;
}

div.bg_clr1{
width:500px;
height:200px;
padding-left: 100px;
}

div.bg_clr2{
width:500px;
height:200px;
margin-left: 100px;
}

h1{
background-color:#cedead;
}

p.bg_clr3{
background-color:transparent;
}

p.bg_clr4{
background-color:#ffccff;
}

5.1.2. Imaginea de fundal

Pentru a utiliza ca fundal o imagine se foloseste proprietatea background-image, urmata de adresa
URL a locatiei imaginii.

selector { background-image:valoare; }
Valoarea se specifica in felul urmator: url(fisier.imagine)
Ex.:
body { background-image: url(imagine.gif);}
Alternativ, in locul adresei URL se poate folosi valoarea none, ceea ce inseamna ca navigatorul nu
foloseste nici o imagine.
Odata cu setarea imaginii de fundal, se pot seta de asemenea si: culoarea de fundal, metoda de
repetare a imaginii de fundal, etc.
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Nota: Este recomandat ca pe langa imaginea de fundal sa fie setata si o culoare de fundal pentru
cazul in care imaginea nu poate fi accesata (din diferite motive).
Exemplul 5.2.
<html>
<head>
<title>Configurarea fundalului - background-image</title>
</head>
<body>
<div class="bg_clr">
<p>Proprietatea <b>background-image</b> setata pentru eticheta BODY are ca efect repetarea
imaginii pe intreg fundalul paginii.</p>
</div>
</body>
</html>
stil-5-2.css
body{
background-image:url('imagini/background1.gif');
}

div.bg_clr{
background-color:#ffffc2;
width:500px;
height:100px;
padding-left: 10px;
color:#2e1f0f;
}

5.1.3. Repetarea imaginii de fundal

CSS ofera nu numai posibilitatea afisarii unui element grafic ca fundal pentru un element sau pentru
o pagina, ci si posibilitatea controlarii modul de repetare a acestuia.

selector { background-repeat:valoare; }
Ex.:
body { background-repeat:no-repeat; }

Pentru a repeta imaginea de fundal se foloseste proprietatea background-repeat, insotita de una din
urmatoarele valori:
repeat pentru a repeta imaginea atat pe verticala cat si pe orizontala;
repeat-x pentru a repeta imaginea numai pe orizontala;
repeat-y pentru a repeta imaginea numai pe verticala;
Suport de curs: CSS

_______________________________________________________ ___________________________________________

no-repeat pentru a afisa imaginea o singura data, fara repetare.

Nota: Imaginea de fundal este plasata conform proprietatii background-position. Daca proprietatea
background-position lipseste, atunci imaginea va fi plasata in coltul stanga-sus al elementului.
Exemplul 5.3.
<html>
<head>
<title>Configurarea fundalului - background-repeat</title>
</head>
<body>
<p>Proprietatea <b>background-image</b> setata pentru eticheta BODY are ca efect repetarea imaginii de
fundal pe verticala (200px incepand cu limita din stanga a ferestrei curente).<br>Restul zonei de fundal nu
are setata o culoare.</p>
<div class="bg_img">
<p>Proprietatea <b>background-image</b> setata pentru eticheta DIV are ca efect repetarea
imaginii de fundal pe orizontala (150px incepand cu limita de sus a elementului / diviziunii curente).</p>
<p>Parte din fundalul diviziunii curente este ocupat de imaginea de fundal care se repeta pe
orizontala, iar restul zonei de fundal este colorata cu proprietatea <b>background-color</b>.</p>
</div>
</body>
</html>
stil-5-3.css
body{
background-image:url('imagini/bg_vert.jpg');
background-repeat:repeat-y;
}

p {
padding-left: 10px;
padding-top: 10px;
color:#333333;
font-family:arial, sans-serif;
font-size:14px;
}

div.bg_img{
background-image:url('imagini/bg_oriz.jpg');
background-repeat:repeat-x; /* no-repeat */
background-color:#f4fbb5;
width:500px;
height:300px;
}

Suport de curs: CSS

_______________________________________________________ ___________________________________________

5.1.4. Controlul imaginii de fundal

Pentru a defini modul de tratare a fundalului la derularea paginii se foloseste proprietatea
background-attachment cu optiunea fixed, pentru a lipi imaginea de fundal de fereastra
navigatorului sau scroll (valoare implicita), pentru a permite derularea imaginii de fundal alaturi de
elementul corespunzator atunci cand vizitatorul deruleaza pagina.

selector { background-attachment:valoare; }
Ex.:
body { background-attachment:scroll; }
Exemplul 5.4.
<html>
<head>
<title>Configurarea fundalului - background-attachment</title>
</head>
<body>
<p>text ................<br>text ................<br>text ................<br>text ................<br>text
................<br>text ................<br>text ................<br>text ................<br>text ................<br>text
................<br>text ................</p>
</div>
</body>
</html>
stil-5-4.css
body{
background-repeat: no-repeat;
background-attachment:fixed;
margin-left: 20px;
}

div.bg_clr{
background-color:#f0f5f5;
width:500px;
height:800px;
padding-left: 10px;
color:#2e1f0f;
}

5.1.5. Pozitia imaginii de fundal

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Pentru a indica pozitia imaginii de fundal relativ la coltul din stanga-sus al elementului se utilizeaza
proprietatea background-position urmata de doua valori (coordonate x si y) separate prin spatiu.
Proprietatea background-position defineste pozitia de inceput a imaginii de fundal.

selector { background-position:valoare; }
Ex.:
body { background-position:center; }

Coordonatele x si y pot fi exprimate prin:
- cuvinte cheie:
left top (stanga sus)
left center (stanga centru)
left bottom (stanga jos)
right top (dreapta sus)
right center (dreapta centru)
right bottom (dreapta jos)
center top (centru sus)
center center (centru centru)
center bottom (centru jos)
Nota: Daca este precizat doar un cuvant cheie, al doilea va fi in mod implicit center.
- valori absolute: xpoz ypoz
Prima valoare este pozitia pe orizontala, iar a doua valoare este pozitia pe verticala. Coltul
stanga sus este 0 0. Unitatile pot fi pixeli (0px,0px) sau alte unitati CSS. Daca este
specificata doar o valoare, cea de-a doua va fi in mod implicit 50% Pot fi combinate
valorile absolute cu valorile procentuale.
- valori procentuale: x% y%
Prima valoare este pozitia pe orizontala, iar a doua valoare este pozitia pe verticala. Coltul
stanga sus este de coordonate (0%,0%). Coltul dreapta jos este de coordonate
(100%,100%). Daca este specificata doar o valoare, cea de-a doua va fi in mod implicit 50%

Valoarea implicita a proprietatii background-position este 0% 0%.
Nota: Pentru anumite browsere, pentru ca proprietatea background-position sa aiba efect trebuie
setata background-attachment:fixed;

Exemplul 5.5.
<html>
<head>
<title>Configurarea fundalului - background-position</title>
</head>
<body>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<div class="ex1">
................<br>text ................</p>
</div>
</body>
</html>
stil-5-5.css
body{
background-attachment:fixed;
background-position: 50px 20px; /* alte ex.: background-position:left center; background-
position:center center; background-position:right bottom; etc.*/
}

div.ex1{
width:500px;
height:800px;
padding-left: 10px;
color:#293d3d;
}

5.1.6. Stabilirea simultana a proprietatilor fundalului

Toate proprietatile fundalului pot fi configurate cu ajutorul proprietatii background. Pentru aceasta
se stabilesc simultan printr-o lista de valori proprietatile fundalului, existand posibilitatea enumerarii
lor in orice ordine.
Proprietatile care pot fi setate sunt in ordine:

selector { background: val_background-color val_background-image val_background-repeat
val_background-attachment val_background-position; }
Ex.:
body { background: transparent url('imagine.gif') no-repeat scroll center; }

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.
Cand se utilizeaza proprietatea implicita background, nu este necesar sa fie specificate toate
proprietatile, cele nespecificate fiind stabilite la valoare lor implicita.
Ex.:
body { background: #f9f5d1 url('imagine.gif'); }
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Exemplul urmator defineste simultan aceleasi proprietati de fundal folosite pentru exemplul
precedent 5.5.
Exemplul 5.6.
<html>
<head>
<title>Stabilirea simultana a proprietatilor de fundal</title>
</head>
<body>
<div class="ex1">
................<br>text ................</p>
</div>
</body>
</html>
stil-5-6.css
body{
background: url('imagini/background2.gif') no-repeat fixed 50px 20px;
}

div.ex1{
width:500px;
height:800px;
padding-left: 10px;
color:#293d3d;
}

5.2. Stabilirea culorii din prim-plan

Utilizand proprietatea color se poate schimba culoare oricarui element, fie el text, linie orizontala sau
element de tip formular.

selector { color:valoare; }

Valoarea culorii poate fi: numele culorii (una din cele 16 culori predefinite), o valoare in sistem
hexazecimal (sub forma #rrggbb) sau o 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%).
Ex.:
p { color:blue; }

Exemplul 5.7.
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<html>
<head>
<title>Stabilirea culorii de prim plan</title>
</head>
<body>
<br>
<p>text ................<br>text ................<br>text ................<br>text ................<br>text ................</p>
<hr>
<p>text ................<br>text ................<br>text ................<br>text ................<br>text ................</p>
<br>
<form action="#" method="post">
Nume: <input type="text" name="nume" value="Numele si prenumele" size="30"><br>
<input type="submit" name="submit" value="Trimite">
</form>
</div>
</body>
</html>
stil-5-7.css
body{
background: url('imagini/background2.gif');
}

div.bg_clr{
background-color:#c2d699;
width:500px;
height:500px;
padding-left: 10px;
}

p{
color:#7a0000;
background-color:#faf4c8;
}

hr{
color:blue;
}

form{
color:teal;
}

input{
color:gray;
}
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Proprietate Valoare
background-color <color-rgb>
<color-hex>
<color-name>
transparent
background-image URL
none
background-repeat repeat
repeat-x
repeat-y
no-repeat
background-attachment scroll
fixed
background-position left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpoz ypoz
background <background-color>
<background-image>
<background-repeat>
<background-attachement>
<background-position>
color <color-rgb>
<color-hex>
<color-name>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Capitolul 6. CONTROALE PENTRU CHENARE SI MARGINI

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.

6.1. Notiunea de caseta

Fiecare element creat intr-o foaie de stil este prezentat in propria lui caseta. Termenul de element se
refera la diferitele componente ale unui document HTML, configurate prin intermediul etichetelor
HTML de tip container.

Caseta dispune de numeroase proprietati, intre care se numara: marginile, chenarul, completarea
(umplerea), latimea si inaltimea, care pot fi modificate cu ajutorul CSS.

Elementele HTML au patru laturi (superioara, inferioara, stanga si dreapta) la care se pot aplica
proprietatile CSS mai sus enumerate, restul proprietatilor CSS (font, text, culoare, fundal) aplicandu-
se continutului. Continutul poate include texte, liste, formulare sau imagini.

6.2. Latimea si inaltimea unui element

Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilor width si height. In mod
prestabilit acestea sunt determinate in mod automat de catre navigator, fiind egale cu necesarul
afisarii intregului continut.

selector { width:valoare; height:valoare; }

Pentru definirea latimii si inaltimii se folosesc urmatoarele:
o valoare de tip numeric;
un procent, care stabileste o valoare proportionala cu 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.

6.3. Marginile unui element

Proprietatea margin permite stabilirea spatiului dintre element si alte elemente alaturate din
fereastra prin specificarea unui numar de valori cuprins intre 1 si 4.

Daca specificati cele 4 valori, ele sunt aplicate in urmatoarea ordine: sus, dreapta, jos, stanga. Daca
specificati doar o valoare, aceasta va fi aplicata tuturor marginilor. Daca specificati doua sau trei
valori, atunci valorile care lipsesc sunt copiate dupa valorile marginilor opuse.

selector { margin:valoare/valori; }
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Pentru a introduce o valoare marginii se foloseste una din urmatoarele valori:
valoare de tip lungime (numerica) defineste o margine fixa, care poate fi si negativa (pentru
a suprapune continut);
valoare procentuala (procent) defineste o margine proportionala cu latimea elementului
parinte;
valoarea auto lasa controlul marginilor la latitudinea navigatorului. Rezultatul depinde de
fiecare browser.
Ex.:

margin:25px 70px 30px 100px;
/* marginea de sus este 25px,
marginea din dreapta este de 70px,
marginea de jos este de 30px,
marginea din stanga este de 100px */

margin:25px 70px 30px;
/* marginea de sus este 25px,
marginea din dreapta si cea din stanga sunt de 70px,
marginea de jos este de 30px */

margin:25px 70px;
/* marginea de sus si cea de jos sunt de 25px,
marginea din dreapta si cea din stanga sunt de 70px */

margin:25px;
/* toate marginile, sus, dreapta, jos, stanga, sunt de 25px */

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 (auto, lungime, procent).
Ex.:
selector { margin-top:valoare; }
selector { margin-bottom:valoare; }
selector { margin-left:valoare; }
selector { margin-right:valoare; }

Daca proprietatea background-color este setata pentru un element, aceasta nu acopera si zona
definita de margin.
Exemplul 6.1.
<html>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<head>
<title>Width si margin</title>
</head>
<body>
<div class="bottom_m">
................
<p>Paragraf in cadrul diviziunii cu margin-bottom:10%.</p>
................
</div>
<p>Acesta este un paragraf fara margini specificate.</p>
<p class="top_m">Acesta este un paragraf cu <b>margine superioara de 50px</b>.</p>
<p>Acesta este un paragraf fara margini specificate.</p>
</body>
</html>
stil-6-1.css
body{
background-color: #ffffc2;
}

div.bottom_m {
width:500px;
height:130px;
margin-bottom:10%;
background-color:teal;
color:yellow;
}

p.top_m {
margin-top:50px;
}

6.4. Chenarul unui element

Cu ajutorul CSS pot fi configurate latimea (grosimea), stilul si culoarea chenarului.
Aceste atribute ale chenarului unui element pot fi stabilite printr-o singura declaratie, sau individual.
De asemenea, chenarul unui element poate fi stabilit pentru fiecare latura in parte, sau pentru toate
cele 4 laturi deodata (sus, jos, stanga, dreapta).
6.4.1. Stabilirea simultana a atributelor chenarului

Proprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele 4 laturi
ale elementului.

selector { border:valoare/valori; }

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Proprietatea border este urmata de o lista de definitii a foii de stil, in ordinea:
border-width - reprezinta grosimea chenarului si poate fi una din urmatoarele:
- o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);
- un cuvant cheie (thin, medium, sau thick) care caracterizeaza o dimensiune relativa.
border-style - reprezinta numele stilului atribuit chenarului (valoarea none anuleaza afisarea
chenarului);
border-color - reprezinta culoarea, exprimata in cod hexa sau valoare RGB.
Nu este obligatoriu sa apara toate valorile de mai sus, doar cea care defineste stilul, care este o
valoare obligatorie.
Exemplul 6.2.
<html>
<head>
<title>Border</title>
</head>
<body>
<div class="border1">
<p>Diviziune cu <b>border: 5px solid green;</b>.</p>
<p>................</p>
</div>
</body>
</html>
stil-6-2.css
body{
}

div.border1 {
width:300px;
height:100px;
background-color:#fffaf5;
color:teal;
border:5px solid green;
}

6.4.2. Stabilirea individuala a atributelor chenarului

Atributele chenarului latimea (grosimea), stilul si culoarea pot fi stabilite individual astfel:

6.4.2.1. Latimea chenarului

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Atributul border-width furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din jurul
unui element / al unei casete.

selector { border-width:valoare; }

Daca precizati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga. Daca
precizati 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.

6.4.2.2. Ornamentarea chenarului (aspectul)

Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat tuturor celor patru
margini si este definit astfel:

selector { border-style:valoare; }

Atributele proprietatii border-style sunt urmatoarele:

Valoare Aspect
none (nicio bordura)

dotted (linie punctata)

dashed (linie intrerupta)

solid (linie plina)

double (linie dubla)

groove (tridimensional brazdata)

ridge (tridimensional stil creasta)

inset (tridimensional inauntru)

outset (tridimensional in afara)

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 solid (linie plina).

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Nota: Niciuna dintre proprietatile chenarului nu va avea efect daca nu este setata proprietatea
border-style.

6.4.2.3. Culoarea chenarului

Atributul border-color stabileste culoarea pentru toate cele patru laturi ale chenarului si foloseste
pentru valoarea ei un singur cuvant cheie exprimat in cod hexa sau valoare RGB sau numele culorii.
selector { border-color:valoare; }

Puteti stabili culoarea fiecarei margini si separat:
selector { border-color:#98bf21 #fa8072 #4682b4 #ba55d3; }

Nu este necesar sa includeti toate atributele individuale ale unui chenar. In cazul in care exista
atribute omise, navigatorul va folosi valorile prestabilite ale acestora.

Exemplul 6.3.
<html>
<head>
</head>
<body>
<p>Diviziune de clasa <b>border1</b>.</p>
</div>
<br>
<p>Diviziune de clasa <b>border2</b>.</p>
</div>
<br>
<p class="border3">Paragraf cu un chenar verde...</p>
</body>
</html>
stil-6-3.css
body{
}

div.border1 {
width:300px;
height:100px;
color:teal;
border-width:5px;
border-style:solid;
Suport de curs: CSS

_______________________________________________________ ___________________________________________

border-color:green;
}

div.border2{
width:300px;
height:100px;
color:teal;
border-width:thin;
border-style:dotted;
border-color:grey;
}

.border3{
border-width:10px;
border-style:ridge;
border-color:olive; /* border-color:#98bf21 #fa8072 #4682b4 #ba55d3; */
color: maroon;
}

6.4.3. Stabilirea chenarului pentru o latura

Fiecare latura a chenarului poate avea valori configurate in mod independent (prin care se stabilesc
stilul si culoarea fiecarei borduri din jurul elementului) dupa cum urmeaza:

selector { border-top:valori; }
selector { border-bottom:valori; }
selector { border-left:valori; }
selector { border-right:valori; }
Exemplul 6.4.
<html>
<head>
</head>
<body>
<div class="left_border">
<p>Diviziune de clasa <b>left_border</b>.</p>
</div>
<br>
<div class="top_bottom_border">
<p>Diviziune de clasa <b>top_bottom_border</b>.</p>
</div>
<br>
<p class="bottom_border">Paragraf cu border bottom.</p>
</body>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

</html>
stil-6-4.css
body{
}

div.left_border{
width:300px;
height:100px;
color:teal;
border-left: 5px solid green;
}

.bottom_border{
border-bottom: 3px dotted olive;
}

div.top_bottom_border{
width:300px;
height:100px;
color:teal;
border-top: thin solid grey;
border-bottom: thin solid grey;
}

6.5 Linie exterioara pentru un element

Cu ajutorul CSS putem adauga o linie in exteriorul unui element (in exteriorul bordurii elementului)
pentru a scoate in evidenta elementul.
Proprietatile liniei exterioare specifica stilul (outline-style), latimea (outline-width) si culoarea
(outline-color) liniei exterioare.
Ca si in cazul proprietatii border, proprietatile liniei exterioare pot fi definite printr-o declaratie unica,
sau individual.
Proprietatea outline permite stabilirea simultana a atributelor liniei exterioare a unui element pentru
toate limitele acestuia (sus, dreapta, jos, stanga).
selector { outline: valoare/valori; }
Proprietatea outline este urmata de o lista de definitii a foii de stil, in ordinea:
outline-color - reprezinta culoarea, exprimata in cod hexa sau valoare RGB;
outline-style - reprezinta numele stilului atribuit liniei exterioare: none, dotted, dashed, solid,
double, groove, ridge, inset, outset (valoarea none anuleaza afisarea liniei exterioare);
outline-width - reprezinta grosimea liniei exterioare si poate fi una din urmatoarele:
Suport de curs: CSS

_______________________________________________________ ___________________________________________

- o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);
- un cuvant cheie (thin, medium, sau thick) care caracterizeaza o dimensiune relativa.
Daca vreuna din valorile de mai sus lipseste, va fi inlocuita cu valoarea implicita (daca exista).
Exemplul 6.5.
<html>
<head>
<title>Outline</title>
</head>
<body>
<div class="outline1">
<p>Diviziune de clasa <b>outline1</b>.</p>
</div>
</body>
</html>
stil-6-5.css
body{
}

div.outline1{
width:300px;
height:100px;
color:teal;
border: 3px solid green;
outline: red dotted 5px;
}
Proprietatile outline-color, outline-style si outline-width pot fi definite individual, ca si in cazul
proprietatilor border-color, border-style si border-width.

6.6. Adaugarea umplerii in jurul elementului

Umplerea adauga o cantitate de spatiu suplimentar in jurul continutului elementului, dar in interiorul
chenarului.

selector { padding: valoare/valori; }

Valoarea pentru completarea spatiului poate fi una din urmatoarele:
o valoare de tip lungime defineste o valoare fixa (in pixeli, pt, em, etc.);
o valoare procentuala creaza umplerea in raport cu latimea elementului parinte.
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Cand sunt specificate toate cele patru valori intr-o singura declaratie, ele sunt aplicate in ordinea: sus,
dreapta, jos, stanga. Daca este specificata doar o valoare, aceasta va fi aplicata tuturor celor patru
spatii. Daca sunt specificate doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile
laturilor opuse.

selector { padding: 20px 30px 40px 50px; }
Completarea spatiului pentru un element se poate face si pentru fiecare limita in parte a elementului,
ca in exemplul urmator:
selector { padding-top: 20px; }
selector { padding-right: 30px; }
selector { padding-bottom: 40px; }
selector { padding-left: 50px; }
Exemplul 6.6.
<html>
<head>
<title>Padding</title>
</head>
<body>
<div class="padd_1">
................
<p>Paragraf in cadrul diviziunii cu padding sus, dreapta, jos, stanga: 50px;</p>
................
</div>
<br />
................
<p>Paragraf in cadrul diviziunii cu padding: 10px 20px 40px 80px; (sus: 10px, dreapta: 20px,
jos: 40px, stanga: 80px)</p>
................
</div>
<br />
................
<p>Paragraf in cadrul diviziunii cu padding-top:10px; padding-right:20px; padding-
bottom:40px; padding-left:80px;</p>
................
</div>
</body>
</html>
stil-6-6.css
Suport de curs: CSS

_______________________________________________________ ___________________________________________

body{
}

div.padd_1 {
width:500px;
padding:50px; /* spatiu suplimentar in jurul continutul, dar in interiorul chenarului
http://w3schools.com/css/css_boxmodel.asp */
color:yellow;
}

div.padd_2 {
width:500px;
padding:10px 20px 40px 80px;
color:yellow;
}

div.padd_3 {
width:500px;
padding-top:10px;
padding-right:20px;
padding-bottom:40px;
padding-left:80px;
color:yellow;
}

6.7. Elemente flotante

CSS ofera posibilitatea ca elementele sa pluteasca / sa fie impinse catre stanga sau catre dreapta,
permitand astfel sa se infasoare unele in jurul altora. Acest lucru este realizabil prin intermediul
proprietatii float.

selector { float:valoare; }

Cele trei valori posibile sunt: 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 (in
limitele cadrului care il contine), textul urmand sa fie plasat in partea opusa, in jurul elementului.
Elementul care urmeaza dupa cel cu proprietatea float il va infasura / va curge in jurul acestuia.
Elementul dinaintea celui cu proprietatea float nu va fi afectat.
Exemplul 6.7.
<html>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<head>
<title>Float</title>
</head>
<body>
<div class="cadru1">
<p>
<img src="imagini/html_css_icon.jpg" alt="html/css" width="66" height="59" />
Paragraf in care am adaugat o imagine pentru care este definita in CSS proprietatea
<b>float: right</b>. Astfel, textul pluteste in stanga imaginii.
</p>
</div>
</body>
</html>
stil-6-7.css
body{
}

img {
float:right;
}

.cadru1 {
width:500px;
height:80px;
color:#003399;
}

6.8. Locul unde plutesc elementele

Asemanator cu atributul clear al etichetei HTML <BR> este si proprietatea clear. Cu ajutorul acestei
proprietati se poate preciza daca sa fie sau ocupat un spatiu liber in jurul unui element cu
proprietatea "float".

selector { clear:valoare; }

Valoarea proprietatii specifica latura in jurul careia este interzisa infasurarea textului.
Poate lua una din valoarile: left, right sau both. Alternativ se poate folosi valoarea none, ceea ce are
ca efect anularea altor atribute ale proprietatii clear.

Proprietatea clear impiedica afisarea elementului afectat (cel caruia i se aplica) pana cand latura
desemnata nu este eliberata de alte elemente flotante.
Exemplul 6.8.
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<html>
<head>
<title>Clear</title>
</head>
<body>
<div class="cadru">
<img src="imagini/html_css_icon.jpg" alt="html/css" width="66" height="59"/>
<p>Imaginea este pozitionata in dreapta conform <b>float: right;</b>. Paragraful este unul
obisnuit care urmeaza dupa imagine in cod. Acesta este afisat pe pagina in stanga imaginii (in
spatiul lasat liber de imaginea cu proprietatea <b>float:right;</b>).</p>
</div>
<br />
<div class="cadru">
<img src="imagini/html_css_icon.jpg" alt="html/css" width="66" height="59" />
<p class="prg">Imaginea este pozitionata in dreapta conform <b>float: right;</b>.
Paragraful este unul de clasa <b>prg</b> si urmeaza dupa imagine in cod. Acesta este afisat pe
pagina dupa imagine, datorita proprietatii <b>clear:both;</b> din clasa <b>prg</b>.</p>
</div>
</body>
</html>
stil-6-8.css
body{
background-color: #f0e68c;
}

img {
float:right;
}

.cadru {
width:500px;
height:150px;
color:#003399;
}

.prg {
clear:both;
}

Suport de curs: CSS

_______________________________________________________ ___________________________________________

6.9. Afisarea si ascunderea elementelor

Proprietatea display stabileste daca un element va include salturi la linie noua deasupra si dedesubtul
sau, daca este inclus in linie, daca este tratat sub forma de lista sau daca este afisat sau nu.

selector { display:valoare; }

Definirea modului de afisare a elementului se face alegand 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;
block defineste eticheta ca o eticheta la nivel de bloc si plaseaza un salt la linie noua
deasupra si dedesubtul elementului;
inline defineste eticheta ca o eticheta in linie si elimina caracterele de salt la linie noua;
none determina ascunderea elementului si ignorarea lui de catre navigator; totusi acesta
este incarcat insa continutul sau nu exista in pagina.

Proprietatea display nu trebuie confundata cu visibility (Cap. 8). Spre deosebire de visibility care lasa
un spatiu pentru element, sintaxa display: none elimina complet elementul din pagina.
Exemplul 6.9.
<html>
<head>
<title>Display</title>
</head>
<body>
<div id="wrapper">
<div class="lista">
<ul>
<li>elem1</li>
<li>elem2</li>
<li>elem3</li>
<li>elem4</li>
<li>elem5</li>
</ul>
</div>
<hr />
<p>A</p>
<p class="elem_ascuns_1">B - Acesta este text ascuns</p>
<p>C</p>
<hr />
<p>D</p>
<p class="elem_ascuns_2">E - Acesta este text ascuns</p>
<p>F</p>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

</div>
</body>
</html>
stil-6-9.css
body{
background-color: #f0e68c;
}

#wrapper{
margin-left:50px;
}

.lista ul{
background-color: #9ACD32;
}

.lista ul li {
display:inline;
}

p.elem_ascuns_1 {
display:none; /* ascunde elementul si nu genereaza rand liber / spatiu pentru el */
}

p.elem_ascuns_2{
visibility:hidden; /* ascunde elementul, dar ocupa spatiul ca si cand ar exista pe pagina - Cap.7*/
}

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Proprietate Valoare
width <length>
<percentage>
auto
height <length>
<percentage>
auto
margin <length>
<percentage>
auto
border <border-width>
<border-style>
<border-color>
border-width thin
medium
thick
border-style none
dotted
dashed
solid
double
groove
ridge
inset
outset
border-color <color>
border-top [border-width] [border-style] [border-color]
border-bottom [border-width] [border-style] [border-color]
border-left [border-width] [border-style] [border-color]
border-right [border-width] [border-style] [border-color]
outline < outline-color >
<outline-style>
< outline-width>
outline -color <color>
outline -width thin
medium
thick

padding <length>
<percentage>
padding-top <length>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<percentage>
padding-right <length>
<percentage>
padding-bottom <length>
<percentage>
padding-left <length>
<percentage>
float left
right
none
clear left
right
both
none
display list-item
block
inline
none

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Capitolul 7. CONTROALE DE POZITIONARE

Pozitionarea elementelor cu ajutorul CSS este mai precisa decat prin intermediul obiectelor grafice
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.

Fereastra navigatorului constituie cel mai important element in proiectarea paginii web, fiind
parintele tuturor elementelor; are, de asemenea, doua caracteristici importante si anume: latimea,
respectiv inaltimea.

Toatele elementele amplasate in fereastra sunt pozitionate relativ la originea suprafetei ferestrei,
care este coltul din stanga-sus.

7.1. Stabilirea tipului de pozitionare

La definirea atributelor unei etichete HTML in cadrul unui selector dintr-o foaie de stil, prin utilizarea
proprietatii position se poate specifica pozitia elementului in pagina web.

Un element poate avea una din cele patru valori de pozitionare: static, relative, absolut si fixed. Tipul
de pozitie indica navigatorului cum sa trateze amplasarea unui element intr-o fereastra.

7.1.1. Pozitionarea statica

Implicit, elementele sunt pozitionate static in fereastra, cu exceptia cazurilor in care este specificata o
pozitionare relativa, absoluta sau fixa; ele sunt dispuse unul dupa altul in interiorul documentului.

selector { position:static; }

Un element static nu poate fi pozitionat sau repozitionat in mod explicit.

7.1.2. 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.

selector { position:relative; }

Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile top si left.

Suport de curs: CSS

_______________________________________________________ ___________________________________________

7.1.3. Pozitionarea absoluta

Pozitionarea absoluta are ca efect crearea unui element independent de restul documentului, plasat
in fereastra intr-o locatie precisa definita prin intermediul coordonatelor x si y.

selector { position:absolute; }

Originea (punctul de coordonate 0,0) o reprezinta coltul din stanga-sus al ferestrei sau al obiectului in
care este inclus elementul pozitionat absolut.

7.1.4. Pozitionarea fixa

Marea majoritate a navigatoarelor nu recunosc valoarea fixed; astfel, in mod prestabilit ele vor folosi
tipul static pentru a pozitiona elementele. 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.

selector { position:fixed; }

7.2. Stabilirea pozitiei in raport cu latura sus, respectiv
stanga

Dupa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si laturile
de sus, respectiv stanga ale elementului sau parinte, utilizand proprietatile top si left.

selector { top:valoare; left:valoare; }

Distanta fata de laturi poate lua:
o valoare de tip numeric, care defineste distanta intre 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 valoarea.

Proprietatile top si left pot sa nu fie incluse simultan intr-o regula; ele pot lua si valori negative; nu
sunt proprietati mostenite, insa in cazul in care este vorba despre elemente imbricate, acestea vor fi
deplasate solidar cu elementul parinte.

7.3. Stabilirea pozitiei in raport cu latura jos, respectiv
dreapta

Uneori este utila si pozitionarea in raport cu laturile de jos, respectiv dreapta. In acest caz originea va
fi coltul din dreapta-jos (si nu cel din stanga-sus) al ferestrei sau al elementului parinte.
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Definirea marginilor fata de latura de jos, respectiv din dreapta se realizeaza cu ajutorul proprietatilor
bottom si right; ele pot lua aceleasi valori ca si left si top si 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.
Exemplul 7.1.
<html>
<head>
<title>Position</title>
</head>
<body>
<div id="wrapper">
<p>text</p>
<p>text</p>
<p class="pos_relative_left">text</p>
<p class="pos_relative_right">text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p class="pos_absolute">text cu proprietatea <b>position:absolute;</b></p>
<p class="pos_fixed">text cu proprietatea <b>position:fixed;</b></p>
</div>
</body>
</html>
stil-7-1.css
body{
margin-top:0px;
}

Suport de curs: CSS

_______________________________________________________ ___________________________________________

#wrapper{
margin-left:50px;
}

/*in mod implicit elementele sunt pozitionate static */

p.pos_relative_left{
position:relative; /* elementul cu aceasta proprietate este pozitionat relativ la pozitia sa normala */
left:-30px;
}

p.pos_relative_right{
position:relative; /* elementul cu aceasta proprietate este pozitionat relativ la pozitia sa normala */
left:30px;
}

p.pos_absolute {
position:absolute; /* elementul cu aceasta proprietate este pozitionat relativ la ferestra
browserului*/
top:50px;
right:200px;
}

p.pos_fixed {
position:fixed; /* proprietatea este asemanatoare cu pozitionarea absolute, diferenta fiind ca
elementul cu proprietatea fixed ramane fix la derularea continutului ferestrei */
/* IE afiseaza elementele cu acesta proprietate doar daca !DOCTYPE e specificat */
top:70px;
right:200px;
}

7.4. Stabilirea pozitiei in spatiul 3D

Cu toate ca ecranul este o suprafata bidimensionala, elementele pot primi o a treia dimensiune, si
anume amplasarea lor in stiva, unele in raport cu altele. Amplasarea se face in mod automat,
incepand cu valoarea 0 si continuand prin incrementare cu pas 1 in ordinea aparitiei lor in
documentul HTML si relativ la elementele parinte.

Acest sistem se numeste index z, valoarea proprietatii z-index pentru un element fiind relatia
tridimensionala a elementului in raport cu alte elemente din fereastra.

selector { z-index:valoare; }

In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare
apare deasupra elementului cu numar mai mic.

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Index z poate lua ca valori numere intregi pozitive, 0 sau negative. Utilizarea unei valori negative
determina amplasarea elementului dedesubtul parintelui sau cu atatea nivele cu cate indica indexul
z.

Exemplul 7.2.
<html>
<head>
<title>Position 3D</title>
</head>
<body>
<div id="wrapper">
<img src="imagini/next.png" width="128" height="128" />
<p>Imaginea "next.png" pentru care z-index este -1 va fi afisata in spatele textului, iar
diviziunea cu background galben (de clasa <b>d1</b>), cu z-index -2, va fi afisata atat in spatele
textului, cat si in spatele imaginii.</p>
<div class="d1"></div>
</div>
</body>
</html>
stil-7-2.css
body{
margin-top:0px;
}

#wrapper{ /* controleaza pozitionarea continutului text in acest exemplu */
margin-left:25px;
margin-top:54px;
}

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

.d1{
position:absolute;
left:0px;
top:0px;
width:200px;
height:200px;
background-color:yellow;
Suport de curs: CSS

_______________________________________________________ ___________________________________________

z-index:-2;
}

7.5. Imbricarea unui element absolut intr-un element relativ

Un element poate fi pozitionat exact in cadrul unei ferestre. De asemenea, el poate fi imbricat intr-un
element cu pozitionare relativa. In cazul imbricarii, elementul absolut este pozitionat relativ la coltul
din stanga-sus al elementului relativ.

...
.clsElRel {position: relative; top: 50px; left: 100px; }
.clsElAbs {position: absolute; top: 25px; left: 0px; }
...
<div class=clsElRel>
...
<div class=clsElAbs> ... </div>
...
</div>
...

Configurarea unui element cu pozitionare absoluta in interiorul unui element cu pozitionare relativa
se realizeaza prin:
crearea unei clase cu pozitionare relativa;
crearea unei clase cu pozitionare absoluta;
stabilirea clasei cu pozitionare relativa pentru elementul parinte;
stabilirea clasei cu pozitionare absoluta pentru elementul copil imbricat in elementul parinte.

Exemplul 7.3.
<html>
<head>
<title>Controale de pozitionare: imbricarea elementelor absolute si relative</title>
</head>
<body>
<div class="clsElRel">
<div class="clsElAbs">text text text</div>
</div>
</body>
</html>
stil-7-3.css
body{
margin-top:0px;
Suport de curs: CSS

_______________________________________________________ ___________________________________________

}

.clsElRel {position: relative; top: 30px; left: 100px; background-color:green;}
.clsElAbs {position: absolute; top: 25px; left: 0px; background-color:yellow;}

7.6. Imbricarea unui element relativ intr-un element absolut

Cand un element pozitionat absolut este imbricat intr-un element pozitionat relativ, primul foloseste
ca origine coltul din stanga-sus al parintelui sau. 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.

...
.clsElAbs {position: absolute; top: 50px; left: 10px; }
.clsElRel {position: relative; left: 40px; }
...
<div class=clsElAbs> ...
<div class=clsElRel> ... </div>
</div>
...

Exemplul 7.4.
<html>
<head>
<title>Controale de pozitionare: imbricarea elementelor absolute si relative</title>
</head>
<body>
<div class="clsElAbs">
<div class="clsElRel">text text text</div>
</div>
</body>
</html>
stil-7-3.css
body{
margin-top:0px;
}

.clsElRel {position: relative; top: 30px; left: 100px; background-color:green;}
.clsElAbs {position: absolute; top: 25px; left: 0px; background-color:yellow;}
Suport de curs: CSS

_______________________________________________________ ___________________________________________


Proprietate Valoare
position static
relative
absolute
fixed
top si left <length>
<percentage>
auto
bottom si right <length>
<percentage>
auto
z-index <number>
auto

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Capitolul 8. CONTROALE DE VIZIBILITATE

O caracteristica importanta a CSS o constituie posibilitatea de a afisa sau ascunde unele elemente sau parti ale unor
elemente.

8.1. Stabilirea vizibilitatii unui element

Proprietatea visibility indica faptul ca un element este vizibil sau nu. Chiar daca elementul este
invizibil, el ocupa un spatiu liber in document, acolo unde ar fi trebuit sa se gaseasca.

selector { visibility:valoare;}

Exista trei posibilitati de a specifica modul de tratare a vizibilitatii unui element:
hidden ascunde elementul de la afisarea pe ecran;
visible afiseaza elementul;
inherit vizibilitatea elementului este mostenita de la elementul parinte.

.ascuns { visibility:hidden; }
Exemplul 8.1.
<html>
<head>
<title>Visibility</title>
</head>
<body>
<div id="wrapper">
<p>Controale de vizibilitate</p>
<p class="ascuns">Text ascuns</p>
<p class="vizibil">Text vizibil</p>
<p class="vizibil">Text cu proprietatea de vizibilitate <span class="ascuns"><span
class="viz_mostenita">mostenita</span></span> !</p>

</div>
</body>
</html>
stil-8-1.css
body{
margin-top:0px;
}

#wrapper{
margin-left:50px;
Suport de curs: CSS

_______________________________________________________ ___________________________________________

}

.ascuns{
visibility:hidden; /* Spatiul pentru elementele ascunse ramane ocupat */
}

.vizibil{
visibility:visible;
}

.viz_mostenita{
visibility:inherit;
}

8.2. Stabilirea suprafetei vizibile a unui element

Stabilirea suprafetei vizibile a unui element reprezinta 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 definesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, jos si
stanga ale regiunii vizibile.

.partial { clip: rect(25 200 100 50); }

Daca se foloseste valoarea auto, navigatorul calculeaza automat dimensiunea regiunii vizibile la
100%. Regiunile de vizibilitate pot avea doar forma dreptunghiulara.
Exemplul 8.2.
<html>
<head>
<title>Controale de vizibilitate</title>
</head>
<body>
<img src="imagini/next.png" width="128" height="128" />
</body>
</html>
stil-8-2.css
body{
margin-top:0px;
}
Suport de curs: CSS

_______________________________________________________ ___________________________________________

img
{
position:absolute;
clip:rect(0px,80px,200px,10px);
}

8.3. Stabilirea pozitiei depasirii

Elementele nu sunt intotdeauna continute in casetele lor. Uneori caseta nu este suficient de mare,
astfel ca o parte a continutului nu este afisata.

Proprietatea overflow permite specificarea modului de tratare a continutului in exces, controland
astfel suprafata din afara casetei.

selector { overflow:valoare; }

Pentru a determina unde va fi plasata depasirea se foloseste una din valorile:
visible extinde caseta elementului astfel incat sa incapa continutul sau, ignorand delimitarea
suprafetei vizibile. Este optiunea implicita.
hidden ascunde continutul care nu incape in caseta elementului, si impiedica aparitia barei
de derulare;
scroll adauga intotdeauna bare de derulare elementului, pentru ca vizitatorul sa poata
accesa tot continutul elementului;
auto barele de derulare apar doar atunci cand este necesar.

.supradim { overflow:scroll; }
Exemplul 8.3.
<html>
<head>
<title>Controale de vizibilitate</title>
</head>
<body>
<div id="wrapper">
<p><b>overflow:scroll</b></p>
<div class="derulare">Proprietatea overflow stabileste modul de afisare a continutului
atunci cand acesta depaseste suprafata casetei din care face parte.</div>
<p><b>overflow:hidden</b></p>
<div class="fara_derulare">Proprietatea overflow stabileste modul de afisare a continutului
<p><b>overflow:auto</b></p>
<div class="derulare_auto">Proprietatea overflow stabileste modul de afisare a continutului
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<p><b>overflow:visible</b></p>
<div class="continut_vizibil">Proprietatea overflow stabileste modul de afisare a
continutului atunci cand acesta depaseste suprafata casetei din care face parte.</div>
</div>
</body>
</html>
stil-8-3.css
body{
margin-top:20px;
}

#wrapper{
margin-left:50px;
}

div.derulare
{
background-color:#b0c4de;
width:150px;
height:100px;
overflow:scroll;
}

div.fara_derulare
{
width:150px;
height:100px;
overflow:hidden;
}

div.derulare_auto
{
width:150px;
height:100px;
overflow:auto;
}

div.continut_vizibil
{
Suport de curs: CSS

_______________________________________________________ ___________________________________________

width:150px;
height:100px;
overflow:visible;
}

Suport de curs: CSS

_______________________________________________________ ___________________________________________


Proprietate Valoare
visibility hidden
visible
inherit
clip rect (<top>, <right>, <bottom>, <left>)
auto
overflow scroll
hidden
visible
inherit

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Capitolul 9. CONTROALE PENTRU MOUSE

In mod normal, aspectul indicatorului de mouse este determinat de navigator. Navigatorul modifica
indicatorul de mouse in functie de continutul curent deasupra caruia se afla acesta la un moment dat.

9.1. Aspectul indicatorului de mouse

Uneori este utila anularea sau completarea preferintelor navigatorului si configurarea unor aspecte
personalizate.

Stabilirea aspectului unui indicator de mouse se realizeaza cu ajutorul proprietatii cursor, sintaxa fiind
urmatoarea:

selector { cursor:valoare; }

Numele posibile pentru indicatoarele de mouse sunt:

Nume Aspect
crosshair +
hand
pointer
move

n-resize q
ne-resize 7
e-resize
se-resize N
s-resize +
sw-resize v
w-resize +
nw-resize R
text ][
wait
help

In cazul folosirii valorii auto, navigatorul decide asupra tipului de indicator folosit.
Exemplul 9.1.
<html>
<head>
<title>Controale pentru mouse</title>
</head>
<body>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<div id="wrapper">
<h3>Controale pentru mouse:</h3>
<p>
<span style="cursor:auto">auto</span><br />
<span style="cursor:crosshair">crosshair</span><br />
<span style="cursor:default">default</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:help">help</span><br />
<span style="cursor:move">move</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:pointer">pointer</span><br />
<span style="cursor:progress">progress</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:wait">wait</span><br />
</p>
</div>
</body>
</html>
stil-9-1.css
body{
margin-top:20px;
}

#wrapper{
margin-left:50px;
}

p{
line-height:150%;
}
Suport de curs: CSS

_______________________________________________________ ___________________________________________


Proprietate Valoare
cursor <cursor name>
<URL>
auto
none

Suport de curs: CSS

_______________________________________________________ ___________________________________________

Capitolul 10. CSS3

CSS3 impreuna cu HTML5 raspund nevoii de optimizare si eficienta a design-ului web.
Conceptia dezvoltatorilor s-a schimbat odata cu aparitia HTML5 si CSS3, intrucat s-a imbunatatit
extrem de mult procesarea imaginilor direct din codul HTML/CSS si se pot reduce simtitot costurile de
productie si mentinere a paginilor web, spre deosebire de paginile HTML mai vechi. Rezultatele
imediate pentru vizitatori si pentru dezvoltatori constau in reducerea lungimii de banda necesara si a
spatiului pe hard disk.

Printre functiile noi oferite, se numara cele care permit crearea de: umbre, colturi rotunjite, coloane,
gradiente, reflectii, fundaluri, rotiri, scalari, etc.

CSS3 nu este inca un standard W3C, iar ceea ce se prezinta in continuare urmareste introducerea in
noua tehnologie.
Suportul browserelor importante pentru CSS3 este inca deficitar. Pentru ca unele proprietati sa aiba
efect in anumite browsere, la sintaxa lor obisnuita se adauga un prefix, precum:
-moz- pentru Mozilla Firefox
-webkit- pentru Google Chrome si Safari

10.1. Border

Cu CSS3 se pot crea borduri rotunjite, se pot adauga umbre si se pot folosi imagini ca si borduri, fara a
utiliza programe de design (precum Photoshop).
Etichetele CSS3 care definesc proprietati ale bordurii unui element sunt:
- border-radius pentru colturi rotunjite la bordura unui element;
- box-shadow pentru a adauga umbra la bordura unui element;
- border-image se foloseste o imagine pentru a crea bordura pentru un element.
Suportul in browsere nu este asigurat in totalitate.
Exemplul 10.1a.
<html>
<head>
<title>CSS3: border-radius</title>
<link rel="stylesheet" href="stil-10-1a.css">
</head>
<body>
<div>Proprietatea <b>border-radius</b> permite rotunjirea colturilor bordurii unui
element.</div>
</body>
</html>
stil-10-1a.css
body{
Suport de curs: CSS

_______________________________________________________ ___________________________________________

margin-top:20px;
}

div
{
border:2px solid #6b8e23;
padding:10px 40px;
background-color:#fffacd;
width:300px;
border-radius:20px;
-moz-border-radius:20px; /* pentru Mozilla Firefox */
}

Exemplul 10.1b.
<html>
<head>
<title>CSS3: border-shadow</title>
<link rel="stylesheet" href="stil-10-1b.css">
</head>
<body>
<div class="div1">Proprietatea <b>border-shadow</b> permite adaugarea unei umbre la
bordura unui element.</div>
<br>
<div class="div2">Proprietatea <b>border-shadow</b> permite adaugarea unei umbre la
bordura unui element si poate fi combinata cu alte proprietati ale bordurii.</div>
</body>
</html>
stil-10-1b.css
body{
margin-top:20px;
}

.div1
{
width:300px;
padding:10px 40px;
background-color:#fffafa;
border: 1px solid #808080;
box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888; /* pentru Firefox */
-webkit-box-shadow: 10px 10px 5px #888888; /* pentru Safari si Chrome */
}

.div2
{
Suport de curs: CSS

_______________________________________________________ ___________________________________________

width:300px;
padding:10px 40px;
background-color:#fffafa;
border: 1px solid #808080;
box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888; /* pentru Firefox */
-webkit-box-shadow: 10px 10px 5px #888888; /* pentru Safari si Chrome */
border-radius:20px;
-moz-border-radius:20px; /* pentru Mozilla Firefox */
}

Exemplul 10.1c.
<html>
<head>
<title>CSS3: border-image</title>
<link rel="stylesheet" href="stil-10-1c.css">
</head>
<body>
<p>Proprietatea border-image specifica o imagine pentru a fi utilizata ca si bordura.</p>
<p><b>Exemplul 1:</b></p>
<div id="round">In acest exemplu imaginea este repetata pentru a acoperi zona de
bordura.</div>
<br />
<div id="stretch">In acest exemplu imaginea este intinsa pentru a acoperi zona de
bordura.</div>
<p>Imaginea folosita este:</p>
<img src="imagini/border.png" />
<p> </p>
<p><b>Exemplul 2:</b></p>
<div id="round1">In acest exemplu imaginea este repetata pentru a acoperi zona de
bordura.</div>
<br />
<div id="stretch1">In acest exemplu imaginea este intinsa pentru a acoperi zona de
bordura.</div>
<p>Imaginea folosita este:</p>
<img src="imagini/border1.png" />
</body>
</html>
stil-10-1c.css
body{
margin-top:20px;
}

div {
Suport de curs: CSS

_______________________________________________________ ___________________________________________

border-width:15px;
width:250px;
padding:10px 20px;
}

#round {
-moz-border-image:url(imagini/border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(imagini/border.png) 30 30 round; /* Safari si Chrome */
border-image:url(imagini/border.png) 30 30 round;
}

#stretch {
-moz-border-image:url(imagini/border.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(imagini/border.png) 30 30 stretch; /* Safari si Chrome */
border-image:url(imagini/border.png) 30 30 stretch;
}

#round1 {
-moz-border-image:url(imagini/border1.png) 30 30 round; /* Firefox */
-webkit-border-image:url(imagini/border1.png) 30 30 round; /* Safari si Chrome */
border-image:url(imagini/border1.png) 30 30 round;
}

#stretch1 {
-moz-border-image:url(imagini/border1.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(imagini/border1.png) 30 30 stretch; /* Safari si Chrome */
border-image:url(imagini/border1.png) 30 30 stretch;
}

10.2. Background

CSS3 contine o serie de proprietati pentru background, care permit un control mai bun al acestuia.
Proprietatile sunt:
- background-size specifica dimensiunea imaginii de fundal; inainte de CSS3
dimensiunea imaginii de fundal era dimensiunea reala a imaginii si era determinata in
mod automat de browser; in CSS3 este posibil sa specificam in pixeli sau procentual -
dimensiunea imaginii de fundal, fapt care ne permite sa reutilizam aceeasi imagine in
mai multe feluri;
- background-origin specifica zona de pozitionare a imagnii de fundal; valori posibile:
content-box, padding-box si border-box area
- background-clip specifica zona vizibila din imaginea de fundal; valori posibile:
content-box, padding-box si border-box area;
- utilizarea mai multor imagini de fundal deodata.
Exemplul 10.2a.
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<html>
<head>
<title>CSS3: background-size</title>
</head>
<body>
<p>Exemplul curent foloseste pentru background o imagine la alte dimensiuni fata de cele
reale ale acesteia. Imaginea la dimensiunile ei reale arata ca mai jos:<br />
<img src="imagini/im1.gif" width="580" height="222" alt="background" /><p>
</body>
</html>
stil-10-2a.css
body {
background:url(imagini/im1.gif);
-moz-background-size:200px 77px; /* Firefox */
background-size:200px 77px;
background-repeat:no-repeat;
padding-top:100px;
}
Exemplul 10.2b.
<html>
<head>
<title>CSS3: background-origin</title>
</head>
<body>
<p><b>Nota:</b> Firefox nu suporta proprietatea background-origin.</p>
<p><b>background-origin:border-box;</b></p>
<div id="div1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</div><br />

<p><b>background-origin:padding-box;</b></p>
consequat.</div><vr />

<p><b>background-origin:content-box;</b></p>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

consequat.</div><br />
</body>
</html>
stil-10-2b.css
div {
padding:50px;
border:20px solid black;
background-size:100% 100%;
}

#div1 {
background-origin:border-box;
}

#div2 {
background-origin:padding-box;
}

#div3 {
background-origin:content-box;
}
Exemplul 10.2c.
<html>
<head>
<title>CSS3: background-clip</title>
</head>
<body>
<p><b>Nota:</b> Safari suporta proprietatea <i>-webkit-background-clip</i>.</p>
<p><b>Nota:</b> Mozilla nu suporta proprietatea <i>-background-clip</i>.</p>

<div class="zona_vizibila_bg">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
</body>
</html>
stil-10-2c.css
.zona_vizibila_bg {
width: 300px;
Suport de curs: CSS

_______________________________________________________ ___________________________________________

height: 300px;
padding: 50px;
background-size: 100% 100%;
background-clip: content-box;
-webkit-background-clip: content-box; /* Safari si Chrome */
}
Exemplul 10.2d.
<html>
<head>
<title>CSS3: background - imagini multiple</title>
<link rel="stylesheet" href="stil-10-2d.css">
</head>
<body>
<p>CSS3 permite folosirea simultana a mai multor imagini ca si imagini de fundal.</p>
</body>
</html>
stil-10-2d.css
body {
padding-top:250px;
background-image:url("imagini/im2.png"),url("imagini/im1.gif");
}

10.3. Setarea nivelului de transparenta / opacitate

CSS3 permite setarea nivelului de transprenta / opacitate a unui element prin intermediul proprietatii
opacity. Valorile pe care le poate lua aceasta proprietate sunt cuprinse intre: 0.0 (transparenta
totala) si 1.0 (opacitate totala). Proprietatea opacity mai poate lua valoarea inherit, caz in care nivelul
de opacitate este mostenit de la elementul parinte.

Exemplul 10.3.
<html>
<head>
<title>CSS3: opacity</title>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

</head>
<body>
<div id="div1">Diviziunea curenta are opacitate 0.5. <br />Atat background-ul cat si textul
sunt afectate de nivelul de opacitate. </div>
<br />
<div id="div2">Diviziunea curenta are opacitate 0.4.</div>
</body>
</html>
stil-10-3.css
#div1 {
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE 8 sau anterior */
}

#div2 {
background-color:green;
color:white;
opacity:0.4;
filter:Alpha(opacity=40); /* IE 8 sau anterior */
}

10.4. Efecte pentru text

10.4.1 Efectul de umbra pentru text

In CSS3 proprietatea text-shadow adauga umbra la continutul text. In cadrul acestei proprietati se
specifica: umbra orizontala, umbra verticala, distanta de estompare si culoarea umbrei.
Exemplul 10.4.
<html>
<head>
<title>CSS3: text-shadow</title>
</head>
<body>
<h1>Heading-ul curent are proprietatea text-shadow setata astfel: <i>text-shadow: 5px 5px
7px #778899;</i>.</h1>
<p><b>Nota:<b> Internet Explorer nu suporta proprietatea <i>text-shadow</i></p>
</body>
</html>
stil-10-4.css
h1 {
Suport de curs: CSS

_______________________________________________________ ___________________________________________

text-shadow: 5px 5px 7px #778899;
}

Daca un cuvant are dimensiuni mai mari decat ale cadrului care il contine, acesta va depasi
respectivul cadru. CSS3 ofera pentru text si proprietatea word-wrap, care permite fortarea incadrarii/
infasurarii textului, chiar daca asta inseamna ruperea unui cuvant in doua. La momentul actual
niciunul dintre browserele importante nu suporta acesta proprietate.

10.5. Transformari 2D si 3D

Cu proprietatea CSS3 transform putem muta, scala, intoarce, roti si intinde elemente. Proprietatea
transform permite elementului sa-si schimbe forma, dimensiunea si pozitia. Elementele se poat
transforma folosind transformarea 2D sau 3D.

10.5.1. Transformari 2D

Metodele cu ajutorul carora se realizeaza tranformarile 2D sunt:
translate() - tanslateaza elementul in functie de coordonatele stanga (axa X) sus (axa Y);
rotate() elementul se roteste in sensul acelor de ceasornic dupa un numar de grade dat;
sunt permise si valorile negative si au ca efect rotirea elementului in sens invers acelor de
ceasornic;
scale() elementul isi mareste sau micsoreaza dimensiunea in functie de parametrii lungime
(axa X) si inaltime (axa Y);
skew() elementul se intoarce/inclina dupa un unghi dat (un numar de grade), in functie de
parametrii dati pentru linia orizontala (axa X) si cea verticala (axa Y);
matrix() combina toate transformarile 2D de mai sus intr-una singura; are 6 parametri care
permit: rotirea, scalarea, translatarea si inclinarea elementelor.
Exemplul 10.5a.
<html>
<head>
<title>CSS3: 2D transform</title>
</head>
<body>
<p><b>Nota:</b> Internet Explorer nu suporta proprietatea transform.</p>
<p><b>translate(50px,30px)</b> muta elementul 50px de la stanga la dreapta si 30px de
sus in jos, raportat la pozitia lui curenta.</p>
<div>Diviziune exemplu</div>
<div id="translatare">Diviziune translatata (50px, 30px)</div>
</body>
</html>
stil-10-5a.css
Suport de curs: CSS

_______________________________________________________ ___________________________________________

div {
width:100px;
height:70px;
background-color:#98FB98;
}

div#translatare {
transform:translate(50px,30px);
-moz-transform:translate(50px,30px); /* Firefox */
-webkit-transform:translate(50px,30px); /* Safari si Chrome */
-o-transform:translate(50px,30px); /* Opera */
}
Exemplul 10.5b.
<html>
<head>
</head>
<body>
<p> </p>
<p> </p>
<div id="rot1">Rotire cu +30 de grade</div>
<p> </p><p> </p><p> </p>
<div id="rot2">Rotire cu -30 de grade</div>
</body>
</html>
stil-10-5b.css
div {
width:200px;
height:100px;
background-color:#FFC0CB;
}

div#rot1 {
width:200px;
height:100px;
transform:rotate(30deg);
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari si Chrome */
-o-transform:rotate(30deg); /* Opera */
}
Suport de curs: CSS

_______________________________________________________ ___________________________________________

div#rot2 {
width:200px;
height:100px;
transform:rotate(-30deg);
-moz-transform:rotate(-30deg); /* Firefox */
-webkit-transform:rotate(-30deg); /* Safari si Chrome */
-o-transform:rotate(-30deg); /* Opera */
}
Exemplul 10.5c.
<html>
<head>
</head>
<body>
<p><b>scale(2,4)</b> mareste de doua ori latimea si de 4 ori inaltimea elementului div.</p>
<div id="scalare">Diviziune scalata</div>
</body>
</html>
stil-10-5c.css
div {
width:100px;
height:50px;
}
div#scalare {
margin:100px;
transform:scale(2,4);
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari si Chrome */
-o-transform:scale(2,4); /* Opera */
}

Exemplul 10.5d.
<html>
<head>
Suport de curs: CSS

_______________________________________________________ ___________________________________________

<link rel="stylesheet" href="stil-10-5d.css">
</head>
<body>
<p><b>skew(30deg,20deg)</b> inclina elementul la 30 de grade in jurul axei X si la 20 de
grade in jurul axei Y.</p>
<div id="transf1">Diviziune inclinata.</div>
</body>
</html>
stil-10-5d.css
div {
width:100px;
height:50px;
}

div#transf1 {
transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari si Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
}
Exemplul 10.5e.
<html>
<head>
<link rel="stylesheet" href="stil-10-5e.css">
</head>
<body>
<p>Rotirea elemntului DIV la 30 grade utilizand metoda <b>matrix()</b></p>
<div id="matrice">Diviziune inclinata.</div>
</body>
</html>
stil-10-5e.css
div {
width:100px;
height:75px;
}
Suport de curs: CSS

_______________________________________________________ ___________________________________________

div#matrice {
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari si Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

10.5.2. Transformari 3D

Metodele cu ajutorul carora se realizeaza tranformarile 3D sunt:
rotateX() elementul se roteste in jurul axei X dupa un unghi dat (numar de grade);
rotateY() elementul se roteste in jurul axei Y dupa un unghi dat (numar de grade).
Exemplul 10.5f.
<html>
<head>
<link rel="stylesheet" href="stil-10-5f.css">
</head>
<body>
<p><b>Nota:</b> Internet Explorer, Firefox si Opera nu suporta metodele de transformare
3D.</p>
<div id="transf1">Diviziune exemplu</div>
<div id="transf2">Diviziune exemplu</div>
</body>
</html>
stil-10-5f.css
div {
width:100px;
height:75px;
background-color:#E6E6FA;
}

div#transf1 {
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari si Chrome */
}

div#transf2 {
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari si Chrome */
}
Suport de curs: CSS

_______________________________________________________ ___________________________________________

Proprietatile introduse de CSS3, asa cum am vazut si in exemplele anterioare, nu sunt suportate in
intregime de browserele importante, motiv pentru care CSS3, desi foarte util, nu poate fi utilizat inca
in mod eficient.

Suport Curs 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

Suport Curs CSS

Încărcat de

Drepturi de autor:

Formate disponibile

SUPORT DE CURS

S-ar putea să vă placă și