CSS DHTML

INSTITUTUL MULTIMEDIA ROMNO - ELVEIAN
SUPORT DE CURS
CSS si DHTML
REALIZATOR CURS: Laza Cristian
-DEVA-2006-
CSS si DHTML
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.
Copyright 2006 : Institutul Multimedia Romno - Elveian
CSS si DHTML
CUPRINS
Partea I CSS ........................................................................................... 6

1. NOTIUNI INTRODUCTIVE .........................................................................................6
1.1. Ce sunt foile de stil in cascada ...........................................................................6
1.2. Tipuri de reguli CSS ............................................................................................6
1.2.1. Selector .......................................................................................................... 6
1.2.2. Clasa .............................................................................................................. 6
1.2.3. Identificator .................................................................................................... 6
1.3. Componentele unei reguli CSS............................................................................7
2. CREAREA FOILOR DE STIL IN CASCADA ...................................................................8
2.1. Adaugarea unui stil la o eticheta HTML ..............................................................8
2.2. Adaugarea CSS la o pagina web .........................................................................8
2.3 Adaugarea CSS la un site web .............................................................................9
2.3.1. Crearea CSS externe ........................................................................................ 9
2.3.2. Legarea CSS externe ........................................................................................ 9
2.3.3. Importul CSS externe ....................................................................................... 9
2.4. Definirea unui selector HTML (Redefinirea unei etichete HTML).......................10
2.5. Definirea unui selector de clasa .......................................................................10
2.6. Definirea unui identificator ID..........................................................................10
2.7. Crearea etichetelor HTML personalizate ...........................................................11
2.7.1. In linie.......................................................................................................... 11
2.7.2. La nivel de bloc.............................................................................................. 11
2.7. Definirea de reguri similare..............................................................................12
2.8. Definirea etichetelor in context (imbricate) .....................................................12
2.9. Cresterea prioritatii unei definitii .....................................................................12
2.10. Mostenirea stilurilor (proprietati mostenite si existente)...............................12
2.11. Determinarea ordinii cascadei ........................................................................13
2.12. Adaugarea comentariilor la CSS .....................................................................13
3. CONTROALE PENTRU FONTURI...............................................................................14
3.1.
3.2.
3.3.
3.4.
3.5.
3.6.
3.7.
3.8.
3.9.
Generalitati ......................................................................................................14
Stabilirea fontului ............................................................................................14
Descarcarea fonturilor......................................................................................15
Stabilirea dimensiunii fontului .........................................................................15
Text inclinat .....................................................................................................16
Grosimea unui font...........................................................................................16
Majuscule mici..................................................................................................17
Valori multiple pentru font ...............................................................................17
Tabel recapitulativ ...........................................................................................17
4. CONTROALE PENTRU TEXT .....................................................................................19

4.1.
4.2.
4.3.
4.4.
4.5.
4.6.
Spatiul intre litere ............................................................................................19

Spatiul intre cuvinte .........................................................................................19
Spatiul intre linii...............................................................................................19
Marimea (tipul) literelor...................................................................................20
Alinierea textului..............................................................................................21
Alinierea pe verticala a textului........................................................................21
CSS si DHTML
4.7. Decalarea paragrafelor.....................................................................................21

4.8. Aplicarea elementelor decorative .....................................................................22
4.9. Spatiile albe .....................................................................................................22
4.10. Tabel recapitulativ .........................................................................................23
5. CONTROALE PENTRU CULORI SI FUNDAL...............................................................24
5.1. Configurarea fundalului....................................................................................24
5.1.1. Culoarea fundalului ........................................................................................ 24
5.1.2. Imaginea de fundal ........................................................................................ 24
5.1.3. Repetarea imaginii de fundal ........................................................................... 24
5.1.4. Controlul imaginii de fundal ............................................................................. 25
5.1.5. Pozitia imaginii de fundal ................................................................................ 25
5.1.6. Stabilirea simultana a proprietatilor fundalului ................................................... 25
5.2. Stabilirea culorii din prim-plan .........................................................................26
5.3. Tabel recapitulativ ...........................................................................................26
6. CONTROALE PENTRU CHENARE SI MARGINI ..........................................................27
6.1. Notiunea de caseta...........................................................................................27
6.2. Latimea si inaltimea unui element....................................................................27
6.3. Marginile unui element.....................................................................................27
6.4. Chenarul unui element .....................................................................................28
6.4.1. Latimea chenarului ......................................................................................... 28
6.4.2. Ornamentarea chenarului (aspectul)................................................................. 28
6.4.3. Culoarea chenarului........................................................................................ 29
6.4.4. Stabilirea chenarului pentru o latura ................................................................. 29
6.5. Adaugarea umplerii in jurul elementului ..........................................................29
6.6. Elemente flotante .............................................................................................30
6.7. Locul unde plutesc elementele .........................................................................30
6.8. Afisarea si ascunderea elementelor..................................................................30
7. CONTROALE DE POZITIONARE ...............................................................................32
7.1. Stabilirea tipului de pozitionare .......................................................................32
7.1.1. Pozitionarea statica ........................................................................................ 32
7.1.2. Pozitionarea relativa ....................................................................................... 32
7.1.3. Pozitionarea absoluta...................................................................................... 32
7.1.4. Pozitionarea fixa ............................................................................................ 33
7.2. Stabilirea pozitiei in raport cu latura sus, respectiv stanga ..............................33
7.3. Stabilirea pozitiei in raport cu latura jos, respectiv dreapta .............................33
7.4. Stabilirea pozitiei in spatiul 3D.........................................................................34
7.5. Imbricarea unui element absolut intr-un element relativ .................................34
7.6. Imbricarea unui element relativ intr-un element absolut .................................34
8. CONTROALE DE VIZIBILITATE ...............................................................................36
8.1.
8.2.
8.3.
8.4.
Stabilirea vizibilitatii unui element ...................................................................36

Stabilirea suprafetei vizibile a unui element.....................................................36
Stabilirea pozitiei depasirii ...............................................................................36
Tabel recapitulativ ...........................................................................................37
9. CONTROALE PENTRU MOUSE ..................................................................................38

9.1. Aspectul indicatorului de mouse ......................................................................38
CSS si DHTML
Partea a-II-a - DHTML ...............................................................................39

10. INTRODUCERE IN DHTML .....................................................................................39
10.1. Ce este HTML dinamic ....................................................................................39
10.2. DHTML versus Flash .......................................................................................39
11. DOCUMENT OBJECT MODEL (DOM).......................................................................41
11.1. Intelegerea modelului DOM............................................................................41
11.2. Crearea unui obiect ........................................................................................41
11.3. Evenimente ....................................................................................................41
11.4. Modul de functionare a modelului DOM ..........................................................42
11.4.1. Configurarea unui obiect DOM........................................................................ 42
11.4.2. Modelul DOM Netscape Layer ......................................................................... 42
11.4.3. Modelul All DOM Internet Explorer .................................................................. 43
11.4.4. Modelul W3C DOM ID.................................................................................... 43
11.5. Detectia functionalitatilor ..............................................................................43
11.6. Detectia tipului de model DOM .......................................................................43
11.7. Construirea unui model DOM inter-browser ...................................................44
11.8. Utilizarea modelului DOM inter-browser ........................................................44
12. MEDIUL DE LUCRU ...............................................................................................46
12.1. Detectarea numelui si a versiunii navigatorului .............................................46
12.2. Detectarea sistemului de operare...................................................................47
12.3. Determinarea dimensiunilor ecranului ...........................................................48
12.4. Determinarea numarului de culori..................................................................48
12.5. Determinarea dimensiunilor ferestrei navigatorului .......................................49
12.6. Determinarea dimensiunilor paginii vizibile ...................................................49
12.7. Determinarea adresei si titlului unei pagini....................................................50
12.8. Determinarea pozitiei pe pagina in urma derularii .........................................51
12.9. Determinarea dimensiunilor unui obiect ........................................................52
12.10. Determinarea coordonatelor unui obiect ......................................................53
CSS si DHTML
Partea I CSS
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
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.

1.2.3. Identificator
Regulile de tip identificator (ID) sunt asemanatoare cu selectorii de clasa. Ele pot fi aplicate
oricarei etichete HTML.
CSS si DHTML
#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. Odata cu aparitia
limbajului XHTML, acesta face distinctie intre majuscule si minuscule, astfel ca toti selectorii
trebuie scrisi cu litere mici.
CSS si DHTML
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, a 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.
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. Adaugarea CSS la o pagina web

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>
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>
CSS si DHTML
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.
2.3 Adaugarea CSS la un site web

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 externe
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 externe
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).
2.3.3. Importul CSS externe
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.
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.
CSS si DHTML
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.
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; ... }
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.
CSS si DHTML
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>
...
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.
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.

#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.
CSS si DHTML
2.7. Definirea de reguri 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.
2.8. 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 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.
2.9. 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.
2.10. 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.
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.
CSS si DHTML
2.11. 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 afisare 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, 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.
2.12. Adaugarea comentariilor la CSS

Este bine ca uneori sa fie adaugate comentarii la CSS, mai ales ca acestea nu au nici un efect.
Comentariile pot fi plasate in jurul regulilor, fiind utile mai ales in cazul navigatoarelor care nu
suporta CSS.
Pentru a adauga comentarii in regulile de stil avem la dispozitie doua modalitati:
In cazul in care comentariul se intinde pe un singur rand este suficienta folosirea perechii
de caractere // urmata de comentariu.
In cazul in care comentariul include intreruperi de linie, intinzandu-se astfel pe mai multe
linii, trebuie plasat intre /* care deschide zona de comentariu si */ care indica sfarsitul
comentariului.
Comentariile nu pot fi imbricate si nu pot contine caracterele * si /. In cazul folosirii
comentariilor cu // se pot adauga oricate slash-uri, minimul fiind de doua.
CSS si DHTML
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
Exista cinci familii de fonturi de baza:
serif au un ornament (serif) plasat la terminatia literei, care ii ofera o distinctie speciala.
Sunt folosite pentru tiparire, chiar daca textele sunt mai mari sau mai mici. Nu sunt
indicate pentru afisarea textelor pe ecran.
sans serif sunt fonturi care nu folosesc serife, fiind indicate pentru 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).
3.2. Stabilirea fontului

Fontul folosit pentru afisarea unui text poate fi stabilit prin proprietatea font. Pentru definirea
fontului in cadrul unei reguli trebuie specificata, dupa selectorul din cadrul foii de stil, proprietatea
fontfont-family urmata de numele fontului sau a fonturilor (despartite prin virgula). Este bine ca
numele fonturilor sa fie incadrate intre ghilimele simple sau duble mai ales daca numele acestora
contine spatii.
selector { font-family:nume_font1,nume_font2,...,nume_generic }
Dupa ultima virgula se pot folosi urmatoarele nume generice de fonturi: serif,
serif sanssans-serif,
serif
cursive,
fantasy. Includerea unei asemenea valori este optionala, insa in acelasi
cursive monospace si fantasy
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 parcurge lista pana in momentul in care intalneste un font instalat. Daca nu
exista fonturi echivalente, textul va fi afisat cu fontul prestabilit. Daca este specificat un nume
generic, textul va fi afisat cu un font apartinand aceluiasi stil, in cazul in care fonturile specificate
in lista nu sunt disponibile.
CSS si DHTML
3.3. Descarcarea fonturilor

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@font-face.
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.
@font-face { font-family:StopD; src: url(StopD.eof); }
3.4. Stabilirea dimensiunii fontului

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 fontfontsize urmata de o valoare a dimensiunii care poate lua una din valorile:
unitate de masura (exprimata in pixeli, puncte, inci sau centimetri)

expresie absoluta (xx-small, x-small, small, medium, large, x-large si xx-large)
expresiile smaller sau larger,
larger ca 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 ca unitati
de masura punctele, 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.
CSS si DHTML
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.
3.5. Text inclinat
Atributul fontfont-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 fontfont-style
urmata de una din valorile: italic sau oblique.
oblique
selector { font-style:valoare }
Pentru a sterge formatarea cu caractere inclinate, valorea proprietatii font-style trebuie sa fie:
normal.
normal
h1 { font-style:italic; }
3.6. Grosimea unui font

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 fontfont-weight dupa cum urmeaza:
bold scrie fontul folosind caractere ingrosate

bolder, lighter mareste, respectiv micsoreaza ponderea fontului relativ la ponderea
bolder
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
selector { font-weight:valoare }
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.
h1 { font- weight:bold; }
CSS si DHTML
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 }
Stabilirea unei reguli pentru majuscule mici se realizeaza prin utilizarea proprietatii fontfont-variant
cu valoarea smallsmall-caps.
caps Prin folosirea valorii normal,
normal vor fi anulate celelalte valori mostenite ale
proprietatii font-variant.
h1 { font-variant:small-caps; }
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.
selector { font:val_font-family val_font-style val_font-variant val_font-weight

val_font-size val_height }
Daca o anumita valoare din lista este omisa, navigatorul va folosi valoarea prestabilita.
h1 { font:Arial,sans-serif italic small-caps bold 14pt; }
3.9. Tabel recapitulativ

Proprietate
font-family
font-size
Valoare
<family-name>
<generic-family>
serif
sans-serif
cursive
fantasy
monospace
<length>
<percentage>
smaller
larger
xx-small
x-small
small
CSS si DHTML
Proprietate
font-style
font-weight
font-variant
font
Valoare
medium
large
x-large
xx-large
normal
italic
oblique
normal
bold
lighter
bolder
100-900
normal
small-caps
font-family
font-style
font-variant
font-weight
font-size
font-height
CSS si DHTML
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 aduaga
sau reduce spatiul dintre litere folosind proprietatea letterletter-spacing,
spacing urmata de o valoare
exprimata intr-o anumita unitate de masura, ce poate lua si valori negative.
selector { letter-spacing:valoare }
Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la valorile implicite
(adica fara spatii suplimentare).
h1 { letter-spacing:1,5em; }
Daca se utilizeaza o valoare exprimata in em atunci dimensiunea rezultata va fi calculata in

raport cu cea a elementului parinte.
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 wordword-spacing,
spacing urmata de o
valoare exprimata intr-o anumita unitate de masura, care defineste o cantitate de spatiu dintre
cuvinte, fiind de obicei stabilita in pixeli.
selector { word-spacing:valoare }
Pentru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa fie: normal.
normal
h1 { word-spacing:10px; }
O valoare pozitiva semnifica un plus de spatiu adaugat la valoarea implicita, iar o valoare
negativa reduce acest spatiu. Daca valoarea este egala cu 0 atunci spatiul dintre cuvinte este
fixat la valoarea prestabilita, neproducand de fapt nici un efect, fiind similar cu valoarea normal.
4.3. Spatiul intre linii

Inaltimea randurilor se refera la interlinierea paragrafului, adica la spatiul dintre liniile acestuia.
CSS si DHTML
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 lineline-height,
height urmata de o valoare
care poate fi exprimata in trei moduri:
un numar care inseamna multiplicarea dimensiunii fontului cu numarul respectiv pentru a

obtine valoarea spatierii;
o valoare de tip absolut, exprimata in pixeli, puncte sau orice alta unitate de masura,
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.
selector { line-height:valoare }
Pentru anularea interlinierea, valoarea proprietatii trebuie sa fie: 0.
h1 { line-height:150%; }
Inaltimea liniei poate de asemenea fi definita in cadrul proprietatii font prin introducerea
caracterului / urmat de valoarea pentru inaltimea randului, imediat dupa dimensiunea fontului.
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 scris. Cu ajutorul proprietatii texttext-transform se poate controla marimea
literelor din text, indiferent de modul cum a fost el scris initial.
selector { text-transform:valoare }
Pentru a schimba tipul literelor dintr-un text proprietatea textext-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.
h1 { text-transform:uppercase; }
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.
CSS si DHTML
4.5. Alinierea textului

Un text poate fi aliniat de la marginea din stanga, din dreapta, centrat sau la ambele margini
(stanga-dreapta). Proprietatea texttext-align ofera posibilitatea controlului asupra alinierii textului.
Definirea alinierii se face specificand dupa proprietatea texttext-align una din valorile: left,
left right,
right
center,
center justify.
justify
selector { text-align:valoare }
Proprietatea poate fi aplicata numai elementelor la nivel de bloc, valoarea sa implicita fiind in
majoritatea cazurilor stabilita la valoarea left.
left
h1 { text-align:justify; }
In cazul in care alinierea textului este stanga-dreapta, spatierea cuvintelor si a literelor se

schimba pentru a se obtine linii de aceeasi lungime. Aceasta are uneori efecte negative asupra
lizibilitatii textului.
4.6. Alinierea pe verticala a textului

Cu ajutorul proprietatii verticalvertical-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 }
Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele optiuni:
super pentru scrierea textului in stil exponent, deasupra liniei de baza;

sub - pentru scrierea textului in stil indice, sub linia de baza;
baseline pentru scrierea textului pe linia de baza;
una din valorile: top, middle, bottom, text-top, text-bottom pentru a alinia textul relativ
la alinierea parintelui acestuia;
valoare procentuala care ridica sau coboara linia de baza a elementului proportional cu
dimensiunea fontului elementului parinte.
span { vertical-align:baseline; }
4.7. Decalarea paragrafelor

Cu ajutorul proprietatii texttext-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 mentionata, urmata de o valoare exprimata intr-o unitate de masura (pixeli
sau em) sau in procente (proportional cu latimea paragrafului).
CSS si DHTML
selector { text-indent:valoare }
Valorile pozitive determina o indentare tipica, in timp ce valorile negative determina o indentare
agatata, fiind necesar sau marirea umplerii sau marirea marginilor.
p { text-indent:10%; }
Daca se utilizeaza o valoare procentuala exprimata in unitati em, atunci decalarea rezultata va fi
calculata relativ la dimensiunea fontului elementului asupra caruia se aplica. Pentru eliminarea
decalarii se utilizeaza valoarea 0.
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 texttext-decoration,
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 dispara intermitent
selector { text-decoration:valoare }
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 lagaturile.
a:link { text-decoration:none; }
Elementul decorativ blink are un trecut cu probleme, fiind de curand eliminat de marea majoritate
a navigatoarelor.
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 whitewhite-space.
space
selector { white-space:valoare }
CSS si DHTML
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.
p { white-space:pre; }
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.

Proprietate
letter-spacing
word-spacing
line-height
text-transform
text-align
vertical-align
text-indent
text-decoration
white-space
Valoare
Normal
<length>
Normal
<length>
Normal
<number>
<length>
<percentage>
capitalize
uppercase
lowercase
none
left
right
center
justify
super
sub
baseline
<relative>
<percentage>
<length>
<percentage>
none
underline
overline
line-through
blink
normal
pre
nowrap
CSS si DHTML
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 backgroundbackground-color,
color urmata de o
valoare care reprezinta numele culorii sau valoarea RGB, exprimata in cod hexa.
selector {background-color:valoare }
Valoarea transparent indica navigatorului sa utilizeze culoarea prestabilita sau pe cea a

elementului parinte.
body { background-color:#C0C0C0; }
5.1.2. Imaginea de fundal

Pentru a utiliza ca fundal o imagine se foloseste proprietatea backgroundbackground-image,
image urmata de
adresa URL a locatiei imaginii.
selector { background-image:valoare }
Alternativ, in locul adresei URL se poate folosi valoarea none,

none ceea ce inseamna ca navigatorul nu
foloseste nici o imagine.
body { background-image:url(imagine.gif); }
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 modul de repetare a acestuia.
selector { background-repeat:valoare }
Pentru a repeta imaginea de fundal se foloseste proprietatea backgroundbackground-repeat,

repeat insotita de una
din urmatoarele optiuni:
repeat pentru a repeta imaginea pe toata suprafata fundalului elementului respectiv;
CSS si DHTML
repeat-x pentru a repeta imaginea numai pe orizontala;

repeat-y pentru a repeta imaginea numai pe verticala;
no-repeat pentru a afisa imaginea o singura data, fara repetare.
body { background-repeat:no-repeat; }
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,
background
fixed pentru a lipi imaginea de fundal de fereastra
navigatorului sau scroll,
scroll pentru a permite derularea imaginii de fundal alaturi de elementul
corespunzator atunci cand vizitatorul deruleaza pagina.
selector { background-attachment:valoare }
body { background-attachment:scroll; }
5.1.5. Pozitia imaginii de fundal

Pentru a indica pozitia imaginii de fundal relativ la coltul din stanga-sus al elementului se
utilizeaza proprietatea backgroundbackground-position urmata de doua valori (coordonate x si y) separate
prin spatiu.
selector { background-position:valoare }
Coordonatele x si y pot fi exprimate ca valori absolute sau ca procente. Se pot insa utiliza si
cuvintele cheie: top, center sau bottom pentru coordonata x, respectiv left, center sau right
pentru coordonata y.
body { background-position:center; }
5.1.6. Stabilirea simultana a proprietatilor fundalului

Toate proprietatile fundalului pot fi configurate cu ajutorul proprietatii background.
background Pentru
aceasta se stabilesc simultan printr-o lista de valori proprietatile fundalului, existand posibilitatea
enumerarii lor in orice ordine.
Cand se utilizeaza proprietatea implicita background, nu este necesar sa fie specificate toate
proprietatile, cele nespecificate fiind stabilite la valoare lor implicita.
selector {background:val_bg-clr val_bg-img val_bg-rpt val_bg-attach val_bg-pos }
CSS si DHTML
Valoarea implicita a proprietatii background-color este transparent. Valoarea implicita a

proprietatii background-image este none. Valoarea implicita a proprietatii backgroundattachment este scroll. Valoarea implicita a proprietatii background-position este top left.
body { background:transparent url(imagine.gif) no-repeat scroll center; }
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 hexa
(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%).
p { color:blue; }

Proprietate
background-color
background-image
background-repeat
background-attachment
background-position
background
color
Valoare
<color>
<url>
None
Repeat
repeat-x
repeat-y
no-repeat
scroll
fixed
<percentage>
<length>
top
center
bottom
left
right
<background-color>
<background-image>
<background-repeat>
<background-attachement>
<background-position>
<color>
CSS si DHTML
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.
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; }
Pentru a introduce o valoare marginii se foloseste una din urmatoarele optiuni:
o valoare de tip lungime (numerica) care poate fi si negativa;
CSS si DHTML
o valoare procentuala (procent) creaza o margine proportionala cu latimea elementului

parinte;
valoarea auto lasa controlul marginilor la latitudinea navigatorului.
Exista posibilitatea de a stabili valoarea marginii doar pentru o singura latura, fara a tine cont de
celelalte margini. Pentru aceasta sunt folosite proprietatile marginmargin-top,
top marginmargin-bottom,
bottom marginmarginleft si marginmargin-right cu aceleasi valori ca si in cazul proprietatii margin.
selector
selector
selector
selector
{
{
{
{
margin-top:valoare; }
margin-bottom:valoare; }
margin-left:valoare; }
margin-right:valoare; }
6.4. Chenarul unui element

Proprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele patru
laturi ale casetei. Astfel, pot fi configurate latimea (grosimea), stilul si culoarea.
selector { border:valoare/valori; }
Proprietatea border este urmata de o lista de definitii a foii de stil, in care:
prima valoare o reprezinta grosimea chenarului si poate fi una din urmatoarele:

o o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);
o un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune relativa.
a doua valoare poate fi numele stilului atribuit chenarului (valoarea none anuleaza
afisarea chenarului);
ultima valoare o reprezinta culoarea, exprimata in cod hexa sau valoare RGB.
6.4.1. Latimea chenarului

Atributul borderborder-width furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din
jurul 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. Ornamentarea chenarului (aspectul)
Aspectul bordurii poate fi stabilit prin atributul borderborder-style;
style stilul este aplicat tuturor celor
patru margini si este definit astfel:
selector { border-style:valoare; }
Atributele proprietatii border-style sunt urmatoarele:
CSS si DHTML
Valoare
none (nici unul)
Aspect
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 cu linie plina.
6.4.3. Culoarea chenarului
Atributul borderborder-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. Puteti stabili culoarea fiecarei margini si separat.
selector { border-color:valoare; }
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.
6.4.4. 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
selector
selector
selector
{
{
{
{
border-top:valori; }
border-bottom:valori; }
border-left:valori; }
border-right:valori; }
6.5. 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;
CSS si DHTML
o valoare procentuala creaza umplerea in raport cu latimea elementului parinte.
Cand specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, aceasta va fi aplicata tuturor celor patru spatii. Daca specificati
doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile laturilor opuse.
6.6. Elemente flotante

CSS ofera posibilitatea de a infasura anumite elemente in jurul altora. Acest lucru este realizabil
prin intermediul proprietatii float.
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
ecranului, textul urmand sa fie plasat in partea opusa, in jurul elementului.
6.7. Locul unde plutesc elementele

Asemanator cu atributul clear al etichetei HTML <BR> este si proprietatea clear.
clear Cu ajutorul
acesteia se poate controla langa ce elemente poate pluti un alt element si langa care nu poate.
selector { clear:valoare; }
Valoarea proprietatii specifica latura in jurul careia este interzisa infasurarea textului; poate lua
valoarea: 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.
6.8. 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;
CSS si DHTML
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. Spre deosebire de visibility care lasa un
spatiu pentru element, sintaxa display: none elimina complet elementul din pagina.

Proprietate
width
height
margin
border
border-style
border-color
border-width
padding
float
clear
display
Valoare
<length>
<percentage>
auto
<length>
<percentage>
auto
<length>
<percentage>
auto
<border-width>
<border-style>
<border-color>
none
dotted
dashed
solid
double
groove
ridge
inset
outset
<color>
thin
medium
thick
<length>
<length>
<percentage>
left
right
none
left
right
both
none
list-item
block
inline
none
CSS si DHTML
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 in fereastra static, 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.
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.
CSS si DHTML
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.
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.
Definirea marginilor fata de latura de jos, respectiv din dreapta se realizeaza cu ajutorul
proprietatilor bottom si right;
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.
CSS si DHTML
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.
Index z poate lua ca valori numere intregi pozitive, 0 sau negative. Utilizarea unei valori negative
determina amplasarea elementului dedesubtul parintelui sau cu atatea niveluri cu cate indica
indexul z.
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.
7.6. Imbricarea unui element relativ intr-un element absolut
CSS si DHTML
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>
...

Proprietate
position
top si left
bottom si right
z-index
Valoare
static
relative
absolute
fixed
<length>
<percentage>
auto
<length>
<percentage>
auto
<number>
auto
CSS si DHTML
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; }
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.
8.3. Stabilirea pozitiei depasirii

Elementele nu sunt intotdeauna continute in casetele lor. Uneori caseta este 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 elementului.
CSS si DHTML
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 defilare apar doar atunci cand este necesar.
.supradim { overflow:scroll; }

Proprietate
visibility
clip
overflow
Valoare
hidden
visible
inherit
rect (<top>, <right>, <bottom>, <left>)
auto
scroll
hidden
visible
inherit
CSS si DHTML
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,
cursor sintaxa
fiind urmatoarea:
selector { cursor:valoare; }
Numele posibile pentru indicatoarele de mouse sunt:

Nume
crosshair
hand
pointer
move
n-resize
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
text
wait
help
Aspect
+

][

In cazul folosirii valorii auto, navigatorul decide asupra tipului de indicator folosit.

Proprietate
cursor
Valoare
<cursor name>
<URL>
auto
none
CSS si DHTML
Partea a-II-a - DHTML

10. INTRODUCERE IN DHTML
Foile de stil in cascada ofera un control mai bun asupra aspectului paginii web, insa ele nu sunt
dinamice prin natura lor. Diferitele proprietati ale unor elemente sau chiar ale intregii pagini web
pot fi modificate in mod dinamic prin intermediul unui limbaj de script precum JavaScript.
10.1. Ce este HTML dinamic

In realitate, DHTML nici nu exista, asa cum exista HTML si JavaScript, care sunt tehnologii web
specifice. HTML dinamic este un termen inventat in comun de Netscape si Microsoft, care descrie
o serie de tehnologii introduse incepand cu anumite versiuni ale navigatoarelor web, care
imbunatatesc caracteristicile dimanice ale acestora.
Tehnologiile amintite au fost introduse tocmai pentru a depasi anumite dezavantaje ale paginilor
web proiectate cu HTML, in special cele legate de multimedia si de partea de actiune si reactiune
la operatiile vizitatorului.
DHTML foloseste etichetele HTML si limbaje de script fara a necesita module plug-in sau alte
programe in afara navigatorului. Functioneaza cu marea majoritate a navigatoarelor si
imbunatateste interactivitatea si prezentarea vizuala a paginilor web.
10.2. DHTML versus Flash

DHTML are atat avantaje, precum si dezavantaje. Dintre avantajele utilizarii acestei tehnologii
amintim:
DHTML este acceptat de marea majoritate a navigatoarelor;

Fisierele create cu ajutorul DHTML sunt de dimensiuni mici;
Nu necesita module plug-in;
Este usor de invatat, mai ales pentru cunoscatorii de HTML si JavaScript;
Dezvoltare si utilizarea mai rapida in web prin viteza marita de operare a site-ului.
Insa, DHTML are si puncte slabe:
incompatibilitate relativ la anumite navigatoare si sisteme de operare;

rigurozitate in ceea ce priveste sintaxa;
anumite navigatoare nu permit fuctionarea corecta a DHTML.
Atat Macromedia Flash cat si DHTML reprezinta o modalitate de extindere a interactivitatii siteurilor web. DHTML adauga interactivitate prin utilizarea HTML, CSS si JavaScript. In schimb, Flash
este un format de fisiere care poate fi integrat in paginile HTML, dar care constituie o tehnologie
aparte.
Dintre avantajele tehnologiei Flash amintim:
Consecventa fisierele Flash au acelasi aspect, indiferent de navigator sau sistemul de

operare;
Omniprezent cea mai mare parte a navigatoarelor au instalat o versiune a modulului
plug-in Flash, necesar rularii filmelor Flash;
Atractiv pune la dispozitia proiectantilor o gama larga de instrumente;
CSS si DHTML
Dimensiuni reduse in cazul in care sunt create in mod adecvat, produc un efect
semnificativ.
Trebuie insa retinut faptul ca aceasta tehnologie are si punctele ei slabe:
dificil de invatat si creat;

necesita module plug-in pentru vizualizare;
dimensiunile exagerat de mari in cazul anumitor filme Flash, ceea ce duce la marirea
considerabila a intervalului de timp pentru descarcarea lor.
In momentul in care trebuie decis ce tehnologie trebuie folosita pentru proiectarea unui site web,
trebuie luati in considerare urmatorii factori:
tehnologia disponibila;
costurile;
nivelul multimedia;
continutul;
timpul de dezvoltare si intretinere;
care sunt asteptarile publicului.
CSS si DHTML
11. DOCUMENT OBJECT MODEL (DOM)

Toate navigatoarele dotate cu functionalitati DHTML dispun de o versiune sau alta a modelului
DOM pentru a accesa proprietatile unui obiect din fereastra. Prin intermediul DOM se poate stabili
o legatura intre orice element definit cu ajutorul identificatorilor si o functie JavaScript. Aceasta
functionalitate permite modificarea oricarei proprietati controlate cu ajutorul CSS.
11.1. Intelegerea modelului DOM

Orice element, inclus intre etichete HTML, dintr-o pagina web poate fi identificat cu ajutorul unui
atribut de tip nume (NAME) sau identificator (ID) pentru a primi o adresa proprie si pentru a-l
transforma intr-un obiect.
DOM descrie o cale care incepe chiar de la fereastra si parcurge in sens descendent diferitele
obiecte pana in momentul in care se obtine accesul la obiectul adresat (referit). Se poate folosi
aceasta cale pentru a permite unei functii JavaScript sa transmita un mesaj obiectului respectiv.
11.2. Crearea unui obiect

Un obiect este un element HTML caruia i s-a adaugat un atribut de identificare (identificator ID
- sau nume - NAME). Elementul HTML are o adresa unica in fereastra navigatorului, astfel el
poate fi accesibil prin intermediul DOM in scopul modificarii oricaror atribute ale sale.
11.3. Evenimente
Evenimentele se produc in momentul in care se intampla ceva in fereastra navigatorului, ca
urmare a actiunii unui vizitator.
Rutinele de tratare a evenimentelor (care contin numele evenimentului precedat pe cuvantul on)
permit definirea unor operatii care trebuie efectuate la detectarea unui anumit eveniment.
Cele mai cunoscute rutine de tratare a evenimentelor sunt:
Eveniment
onLoad
onUnload
onFocus
onBlur
onMouseOver
onMouseOut
onClick
onMouseDown
onMouseUp
onMouseMove
onKeyDown
onLeyUp
onKeyPress
onResize
Momentul declansarii
dupa incarcarea unui obiect
dupa ce obiectul nu mai este incarcat
cand un element este selectat
cand un element este deselectat
cand indicatorul mouse-ului trece pe deasupra
unei suprafete
cand indicatorul mouse-ului nu se mai gaseste
deasupra unei suprafete
cand s-a executat click pe o suprafata
la apasarea unui buton al mouse-ului
la eliberarea unui buton apasat
la deplasarea mouse-ului
la apasarea unei taste
la eliberarea unei taste apasate
la apasarea unei taste, urmata de eliberarea sa
la modificarea dimensiunii unei ferestre
Elemente afectate
documente si imagini
documente si imagini
documente si formulare
documente si formulare
legaturi si regiuni ale unei
imagini harta
toate
toate
toate
toate
document
formulare
formulare
formulare
document
CSS si DHTML
onMove
la mutarea ferestrei navigatorului
document
Modificarile aduse unui obiect prin schimbarea proprietatilor stilului trebuie sa fie declansate de o
rutina de tratare a evenimentelor.
O rutina de tratare a unui eveniment stabileste o legatura intre o actiune din fereastra
navigatorului si o functie JavaScript, care, la randul sau, produce o reactiune in fereastra. In cazul
in care un eveniment trebuie sa declanseze mai multe operatii, toate actiunile se trec in interiorul
ghilimelelor si sunt despartite de caracterul ;. Este de asemenea permisa si scrierea liniilor de
program JavaScript direct intre ghilimele.
11.4. Modul de functionare a modelului DOM

Modelul DOM functioneaza conform unui proces care incepe cu actiunea vizitatorului si se incheie
cu reactiunea navigatorului. Intre cele doua operatii, navigatorul sesizeaza actiunea
(evenimentul), declanseaza o functie si foloseste modelul DOM pentru a efectua o schimbare.
<html>
<head>
<script>
function MyFunction {
document.object_id.object_prop=value;
}
</script>
</head>
<body>
<a_tag event=MyFunction()>
<other_tag id=object_id>content
</other_tag>
</a_tag>
</body>
</html>
11.4.1. Configurarea unui obiect DOM

Obiectele JavaScript sunt dispuse intr-o ordine ierarhica, in care prima este fereastra, iar ultima
este proprietatea la care se doreste accesul. Ierarhia ajuta in a determina ordinea in care trebuie
enumerate elementele in cadrul modelului DOM. Modificarea proprietatilor CSS ale unui obiect
prezinta variatii de la un navigator la altul.
11.4.2. Modelul DOM Netscape Layer
Modelul DOM Netscape Layer permite scrierea de scripturi pentru controlul elementelor cu
eticheta <layer> si a elementelor create cu ajutorul pozitionarii CSS. Modelul DOM Netscape
Layer pentru accesul la CSS are sintaxa:
document.layers[object_id].property
Acest tip de model DOM permite controlul unor proprietati ca: pozitie, vizibilitate si regiune
invizibila a unui document. Modificarile operate in cadrul acestor proprietati vor avea un efect
imediat in pagina.
CSS si DHTML
11.4.3. Modelul All DOM Internet Explorer

Modelul All DOM folosit de Internet Explorer permite scrierea de scripturi care pot obtine accesul
direct la orice element de pe ecran acceptat de Internet Explorer. Este posibil controlul pozitiei si
al vizibilitatii elementelor, precum si aspectul acestora. Astfel, orice modificare operata asupra
acestor proprietati este reflectata imediat in pagina.
document.all[object_id].style.property
11.4.4. Modelul W3C DOM ID

W3C a elaborat o metoda de legare a obiectelor dintr-o pagina cu limbajele de script si a lansat
modelul sau DOM standardizat, care a fost adoptat si de producatorii de navigatoare.
document.getElementById[object_id].style.property
Modelul W3C DOM ID, sau modelul DOM standard, permite scrierea de scripturi care pot obtine
acces la orice element de pe ecran. Aceste elemente includ toate proprietatile CSS, iar
modificarile survenite asupra acestora sunt reflectate imediat in pagina.
11.5. Detectia functionalitatilor

Determinarea existentei sau inexistentei functionalitatilor pe care doriti sa le implementati este o
operatie simpla care necesita o singura linie de program pentru fiecare functie in parte.
Reprezinta o alternativa mult mai buna decat detectia navigatorului, ea testand capacitatea
navigatorului de a executa operatie respectiva.
11.6. Detectia tipului de model DOM

Utilizand caracteristica de detectie a functionalitatilor, se poate determina tipul de model DOM pe
care il foloseste un navigator.
Pentru a identifica tipul de model DOM vom folosi patru variabile (isID, isAll, isLayers, isDHTML)
pe care le initializam cu valoarea 0. Primele trei inregistreaza tipul de model DOM detectat, iar a
patra inregistreaza daca navigatorul este compatibil DHTML. In cazul in care este detectat
modelul DOM, variabilei aferente i se atribuie valoarea 1, la fel si pentru variabila care indica
faptul ca navigatorul este compatibil DHTML. Modelele DOM ulterioare nu vor mai fi testate.
Exemplul 11.1.
<html>
<head>
<script>
var isDHTML = 0
var isID = 0
var isAll = 0
var isLayers = 0
if (document.getElementById) {
CSS si DHTML
isID = 1;
isDHTML = 1;}
else {
if (document.layers) {
isLayers = 1;
isDHTML = 1;}
else {
if (document.all) {
isAll = 1;
isDHTML = 1;
}
}
}
</script>
</head>
<body>
<script>
if (isDHTML) {
document.write(Navigator capabil DHTML foloseste: );
}
if (isID) {
document.write(Modelul W3C DOM ID);}
else {
if (isAll) {
document.write(Modelul All DOM Internet Explorer);}
else {
if (isLayers) {
document.write(Modelul DOM Netscape Layer);}
else {
document.write(Navigator nu este capabil DHTML !);}
}
}
}
</script>
</body>
</html>
11.7. Construirea unui model DOM inter-browser

Informatiile obtinute in urma detectiei tipului de model DOM folosit de navigator pot converti
modelul DOM al unui anumit obiect din pagina web afisata. Ideea de baza este de a include
metode pentru toate cele trei tipuri de modele DOM, pentru a obtine acces la proprietatile
obiectului respectiv.
Pentru aceasta este nevoie de o functie care defineste modelul DOM specific unui anumit obiect,
in functie de informatia respectiva, si care va fi apelata cu doua argumente:
primul argument transmite id-ul obiectului, iar

al doilea este folosit pentru a modifica stilul obiectului (in cazul in care ia valoarea 1)
sau alte proprietati asociate obiectului (in cazul in care ia valoarea 0)
11.8. Utilizarea modelului DOM inter-browser
CSS si DHTML
Este util ca modelul DOM inter-browser creat, sa fie plasat intr-un fisier extern (existand
posibilitatea ca el sa fie apoi importat in documentul HTML), pentru ca functia findDOM sa poata fi
apelata cu usurinta din orice pagina web a site-ului.
Exemplul 11.2.
var
var
var
var
isDHTML=0;
isID=0;
is All=0;
isLayers=0;
if (document.getElementById) {
isID = 1;
isDHTML = 1;}
else {
if (document.all) {
isAll = 1;
isDHTML = 1;}
else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {
isLayers = 1;
isDHTML = 1;
}
}
}
function findDOM(objectID,withStyle) {
if (withStyle == 1) {
if (isID) {
return (document.getElementById(objectID).style);}
else {
if (isAll) {
return (document.all[objectID].style);}
else {
if (isLayers) {
return (document.layers[objectID]);
}
}
}}
else {
if (isID) {
return (document.getElementById(objectID));}
else {
if (isAll) {
return (document.all[objectID]);}
else {
if (isLayers) {
return (document.layers[objectID]);
}
}
}
}
}
CSS si DHTML
12. MEDIUL DE LUCRU

Exista o serie de elemente (dimensiunea ecranului, marimea ferestrei navigatorului) care pot fi
prezentate direct din navigator, iar altele (pozitia, inaltimea sau latimea) utilizeaza modelul DOM.
12.1. Detectarea numelui si a versiunii navigatorului

Informatiile referitoare la navigator sunt cuprinse in doua parti:
prima furnizeaza numele complet al navigatorului (navigator.appName)

a doua parte include versiunea de navigator, informatii privind compatibilitatea si sistemul
de operare utilizat (navigator.appVersion)
Exemplul 12.1.
<html>
<head>
<title>Determinarea numelui si a versiunii navigatorului</title>
</head>
<body>
<script type='text/javascript' language='JavaScript'>
document.write('<b>Navigator: </b>');
document.write(navigator.appName + ' ');
document.write(navigator.appVersion);
var isNS = 0;
var isIE = 0;
var isOB = 0;
if (navigator.appName.indexOf('Netscape') != -1) {
isNS = 1;
} else {
if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) {
isIE = 1;
} else {
isOB = 1;
}
}
browserVersion = parseInt(navigator.appVersion);
document.write('<br><br>');
if (isNS) {
document.write('Navigator compatibil cu Netscape versiunea ');
} else {
if (isIE) {
document.write('Navigator compatibil cu Internet Explorer versiunea ');
} else {
if (isOB) {
document.write('Navigator nerecunoscut. Versiunea: ');
}
}
}
document.write(browserVersion + '.');
</script>
</body>
</html>
CSS si DHTML
Detectarea navigatorului este utila pentru a determina daca o functie DHTML trebuie rulata sau
nu pentru cazul in care pagina web este incarcata intr-un anume navigator. Marea majoritate a
navigatoarelor diferite de Internet Explorer si Netscape sunt identificate ca fiind unul din acestea.
12.2. Detectarea sistemului de operare

Obiectul de versiune a aplicatiei appVersion nu include doar numarul versiunii navigatorului ci si
sistemul de operare sub care ruleaza navigatorul.
Exemplul 12.2.
<html>
<head>
<title>Determinarea sistemului de operare</title>
</head>
<body>
document.write('<b>Navigator: </b>');
document.write(navigator.appName + ' ');
document.write(navigator.appVersion);
var isMac = 0;
var isWin = 0;
var isOOS = 0;
if (navigator.appVersion.indexOf('Macintosh') != -1) {
isMac = 1;
} else {
if (navigator.appVersion.indexOf('Windows') != -1) {
isWin = 1;
} else {
isOOS = 1;
}
}
document.write('<br><br>');
if (isMac) {
document.write('Navigatorul ruleaza sub Macintosh.');
} else {
if (isWin) {
document.write('Navigatorul ruleaza sub Windows.');
} else {
if (isOOS) {
document.write('Navigatorul ruleaza sub SO necunoscut.');
}
}
}
</script>
</body>
</html>
Aplicarea in practica a detectarii sistemului de operare ajuta la stabilirea incompatibilitatilor,

legate de dimensiunea caracterelor si culoarea textului, existente intre sistemele de operare
Macintosh si Microsoft Windows, acestea fiind cele mai raspandite sisteme de operare din lume.
Desigur mai exista si ale sisteme de operare printre care si Linux, insa numarul calculatoarelor
legate la internet pe care acesta ruleaza este relativ scazut.
CSS si DHTML
12.3. Determinarea dimensiunilor ecranului

Ecranul reprezinta suportul unde sunt afisate toate ferestrele. De cele mai multe ori, dimensiunile
suprafetei pentru care a fost proiectat site-ul nu coincid cu cele ale vizitatorului, astfel este bine
ca acestea sa fie determinate.
In acest sens, exista doua suprafete care pot fi determinate: suprafata totala a ecranului si
surafata efectiva (activa) a ferestrei, in care sunt afisate ferestrele, aceasta neincluzand nici un
fel de bare de meniuri adaugate de sistemul de operare.
Exemplul 12.3.
<html>
<head>
<title>Determinarea dimensiunilor ecranului</title>
</head>
<body>
var scrH = screen.height;
var scrW = screen.width;
var lscrH = screen.availHeight;
var lscrW = screen.availWidth;
document.write('Inaltimea totala a ecranului: ' + scrH + 'px <br>');
document.write('Latimea totala a ecranului: ' + scrW + 'px <br><br>');
document.write('Inaltimea totala a suprafetei active: ' + lscrH + 'px <br>');
document.write('Latimea totala a suprafetei active: ' + lscrW + 'px <br><br>');
</script>
</body>
</html>
12.4. Determinarea numarului de culori

Cunoasterea numarului de culori pe care le poate vedea vizitatorul paginii web este un lucru
destul de util, mai ales ca unele calculatoare afiseaza milioane de culori, in timp ce altele afiseaza
doar cateva mii sau chiar sute cateodata.
Exemplul 12.4.
<html>
<head>
<title>Determinarea numarului de culori</title>
</head>
<body>
var scrColDep = screen.colorDepth;
document.write('Profunzimea culorii este de: ' + scrColDep + 'biti. <br>');
</script>
</body>
</html>
CSS si DHTML
12.5. Determinarea dimensiunilor ferestrei navigatorului

Latimea si inaltimea totala (incluzand aici si elementele de control din jurul zonei de afisare) ale
ferestrei navigatorului pot fi determinate.
Exemplul 12.5.
<html>
<head>
function getBrowserH () {
if (window.outerHeight != null) {
return window.outerHeight;
} else {
return null
}
}
function getBrowserW () {
if (window.outerWidth != null) {
return window.outerWidth;
} else {
return null
}
}
</script>
<title>Determinarea dimensiunilor ferestrei navigatorului</title>
</head>
<body>
browserH = getBrowserH();
browserW = getBrowserW();
if (browserH != null) {
document.write('Inaltimea navigatorului este: ' + browserH + 'px. <br>');
} else {
document.write('Inaltimea navigatorului nu poate fi determinata. <br>');
}
if (browserW != null) {
document.write('Latimea navigatorului este: ' + browserW + 'px. <br>');
} else {
document.write('Latimea navigatorului nu poate fi determinata. <br>');
}
</script>
</body>
</html>
Suprafata totala a ferestrei navigatorului nu poate fi determinata in Internet Explorer.
12.6. Determinarea dimensiunilor paginii vizibile

Determinarea dimensiunilor ferestrei navigatorului este un lucru util, insa determinarea suprafetei
active in care este afisat continutul paginii web este mult mai utila. Pentru detectia acestor
caracteristici se utilizeaza window.innerWidth (pentru Netscape) si document.body.clientWidth
(pentru Internet Explorer).
Exemplul 12.6.
CSS si DHTML
<html>
<head>
function getiBrowserH () {
if (window.innerHeight != null) {
return window.innerHeight;
}
if (document.body.clientHeight != null) {
return document.body.clientHeight;
}
return null;
}
function getiBrowserW () {
if (window.innerWidth != null) {
return window.innerWidth;
}
if (document.body.clientWidth != null) {
return document.body.clientWidth;
}
return null;
}
</script>
</head>
<body>
browserH = getiBrowserH();
browserW = getiBrowserW();
document.write('Inaltimea suprafetei active este: ' + browserH + 'px. <br>');
document.write('Latimea suprafetei active este: ' + browserW + 'px. <br>');
</script>
</body>
</html>
12.7. Determinarea adresei si titlului unei pagini

Adresa URL a paginii web si titlul care apare in sectiunea HEAD in eticheta TITLE pot fi
determinate cu usurinta.
Exemplul 12.7.
<html>
<head>
<title>Determinarea adresei si
</head>
<body>
<script type='text/javascript'
var pagURL = self.location;
var pagTit = document.title;
document.write('Adresa paginii
document.write('Titlul paginii
</script>
</body>
</html>
titlului unei pagini</title>

language='JavaScript'>
este: <b>' + pagURL + '.</b> <br>');
este: <b>' + pagTit + '.</b> <br>');
CSS si DHTML
12.8. Determinarea pozitiei pe pagina in urma derularii

Pozitionarea CSS se bazeaza pe deplasarea obiectului fata de coltul din stanga-sus al paginii, in
momentul in care aceasta a fost incarcata. Daca pagina este derulata in jos sau in dreapta,
originea (coltul din stanga-sus) se deplaseaza impreuna cu pagina.
Pentru detectia acestor caracteristici, respectiv gasirea pozitiei in urma derularii paginii, Netscape
utilizeaza window.pageXoffset si window.pageYoffset, iar Internet Explorer utilizeaza
document.body.scrollLeft si document.body.scrollWidth.
Exemplul 12.8.
<html>
<head>
function getScrollL () {
if (window.pageXoffset != null) {
return window.pageXoffset;
}
if (document.body.scrollHeight != null) {
return document.body.scrollLeft;
}
return null;
}
function getScrollT () {
if (window.pageYoffset != null) {
return window.pageYoffset;
}
if (document.body.scrollWidth != null) {
return document.body.scrollTop;
}
return null;
}
function showScroll() {
windScrollL = getScrollL();
windScrollT = getScrollT();
status = 'Stanga: ' + windScrollL + ', Sus:' + windScrollT;
setTimeout("showScroll()",100);
}
</script>
</head>
<body onLoad="showScroll()">
Derulati fereastra si observati pozitia derularii in bara de stare
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr width="1600">
</body>
</html>
CSS si DHTML
12.9. Determinarea dimensiunilor unui obiect

Pentru determinarea dimensiunilor unui obiect, a pozitiei, a starii de vizibilitate si a pozitiei in
spatiul 3D, este necesara utilizarea modelului DOM inter-browser.
Exemplul 12.9.
<html>
<head>
<script>
function getWidth(objectID) {
var dom = document.getElementById(objectID);
if (dom.offsetWidth)
return dom.offsetWidth;
if (dom.clip.width)
return dom.clip.width;
return (null);
}
function getHeight(objectID) {
if (dom.offsetHeight)
return dom.offsetHeight;
if (dom.clip.height)
return dom.clip.height;
return (null);
}
</script>
<style>
a {color:black; text-decoration:none;}
a:vlink {color:black; text-decoration:none;}
a:hover {color:white; text-decoration:none;}
#o1 {font-family:Arial, sans-serif; font-size:12px; background-color:red;
position:absolute; top:50px; left:50px; width:100px; height:75px;}
#o2 {font-family:Arial, sans-serif; font-size:12px; background-color:blue;
</style>
<title>Determinarea dimensiunilor unui obiect</title>
</head>
<body>
<script>
function showDim(objectID) {
var ObjW = getWidth(objectID);
var ObjH = getHeight(objectID);
alert('Latime: ' + ObjW + 'px;
Inaltime: ' + ObjH + 'px');
}
</script>
<div id='o1'>
<a href='#' onClick="showDim('o1')">Click pentru dimensiuni</a></div>
<div id='o2'>
<a href='#' onClick="showDim('o2')">Click pentru dimensiuni</a></div>
</body>
</html>
Pentru diverse navigatoare acelasi obiect va avea dimensiuni usor diferite din cauza faptului ca in
anumite cazuri, in valoarea latimii, respectiv a inaltimii este inclus si chenarul.
CSS si DHTML
12.10. Determinarea coordonatelor unui obiect

Pentru a determina deplasarea obiectelor pe pagina este necesar a se cunoaste pozitia exacta a
obiectului, pentru a vedea cu cat a fost deplasat.
Exemplul 12.10.
<html>
<head>
<script>
function getLeft(objectID) {
var domStyle = document.getElementById(objectID).style;
if (domStyle.left)
return domStyle.left;
if (domStyle.pixelLeft)
return domStyle.pixelLeft;
if (dom.offsetLeft)
return dom.offsetLeft;
return (null);
}
function getTop(objectID) {
var domStyle = document.getElementById(objectID).style;
if (domStyle.top)
return domStyle.top;
if (domStyle.pixelTop)
return domStyle.pixelTop;
if (dom.offsetTop)
return dom.offsetTop;
return (null);
}
</script>
<style>
a {color:black; text-decoration:none;}
a:alink {color:black; text-decoration:none;}
a:vlink {color:black; text-decoration:none;}
a:hover {color:white; text-decoration:none;}
#o1 {font-family:Arial, sans-serif; font-size:12px; background-color:green;
</style>
<title>Determinarea pozitiei unui obiect</title>
</head>
<body>
<script>
function showPoz(objectID) {
var ObjL = getLeft(objectID);
var ObjT = getTop(objectID);
alert('Stanga: ' + ObjL + 'px;
Sus: ' + ObjT + 'px');
}
</script>
<div id='o1'><a href='#' onClick="showPoz('o1')">Click pentru pozitie</a></div>
</body>
</html>

CSS DHTML

Încărcat de

Informații document

Titlu original

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

CSS DHTML

Încărcat de

Drepturi de autor:

Formate disponibile

INSTITUTUL MULTIMEDIA ROMNO - ELVEIAN

REALIZATOR CURS: Laza Cristian

REALIZATOR CURS: Laza Cristian

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

crearea unor efecte utilizand DHTML si bazandu-se pe DOM

includerea de functii in vederea realizarii unor interactiuni cu utilizatorul

Copyright 2006 : Institutul Multimedia Romno - Elveian

REALIZATOR CURS: Laza Cristian

Partea I CSS ........................................................................................... 6

4. CONTROALE PENTRU TEXT .....................................................................................19

Spatiul intre litere ............................................................................................19

REALIZATOR CURS: Laza Cristian

4.7. Decalarea paragrafelor.....................................................................................21

Stabilirea vizibilitatii unui element ...................................................................36

9. CONTROALE PENTRU MOUSE ..................................................................................38

Copyright 2006 : Institutul Multimedia Romno - Elveian

REALIZATOR CURS: Laza Cristian

Partea a-II-a - DHTML ...............................................................................39

Copyright 2006 : Institutul Multimedia Romno - Elveian

REALIZATOR CURS: Laza Cristian

1.1. Ce sunt foile de stil in cascada

1.2. Tipuri de reguli CSS

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

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

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

Copyright 2006 : Institutul Multimedia Romno - Elveian

REALIZATOR CURS: Laza Cristian

#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

Sintaxa elementara a unei reguli CSS este urmatoarea:

selector {proprietate: valoare; }

Copyright 2006 : Institutul Multimedia Romno - Elveian

REALIZATOR CURS: Laza Cristian

2. CREAREA FOILOR DE STIL IN CASCADA

2.1. Adaugarea unui stil la o eticheta HTML

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

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

2.2. Adaugarea CSS la o pagina web

Copyright 2006 : Institutul Multimedia Romno - Elveian

REALIZATOR CURS: Laza Cristian

2.3 Adaugarea CSS la un site web

<link rel=stylesheet href=nume_fisier.css>

Copyright 2006 : Institutul Multimedia Romno - Elveian

REALIZATOR CURS: Laza Cristian

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

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

2.5. Definirea unui selector de clasa

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

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

2.6. Definirea unui identificator ID

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

Copyright 2006 : Institutul Multimedia Romno - Elveian

REALIZATOR CURS: Laza Cristian

2.7. Crearea etichetelor HTML personalizate

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

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

Copyright 2006 : Institutul Multimedia Romno - Elveian

REALIZATOR CURS: Laza Cristian

2.7. Definirea de reguri similare