Curs Css in Romana

CUPRINSCUPRINS ....................................................................................... 7 1. Introducere ................................................................................ 11

Ce este CSS? ............................................................................. 11 Stilurile rezolv o mare problem ............................................ 11

2. Sintaxa ...................................................................................... 11 Exemple .................................................................................... 11 Comentarii CSS ....................................................................... 14

3. Selectorii id i class ................................................................. 14 Selectorul id ............................................................................. 14 Selectorul class ........................................................................ 15

4. Cum inserm CSS n documentele HTML ............................... 16 Foaie extern de stil .................................................................. 16 Foaie intern de stil ................................................................... 17 Stiluri inline .............................................................................. 17 Foi multiple de stiluri ............................................................... 17

5. Formatarea background-ului ..................................................... 18 Proprietatea background-color ................................................. 18 Proprietatea background-image ................................................ 20 Proprietatea background-repeat ................................................ 20 Proprietatea background-position i no-repeat ......................... 21 Proprieti multiple pentru background .................................... 22 Exemple .................................................................................... 23 Toate proprietile fundalului n CSS ....................................... 24

6. Formatarea textului ................................................................... 25 Culoarea textului ....................................................................... 25 Alinierea textului ...................................................................... 26 Decorarea textului ..................................................................... 26 Transformarea textului ............................................................. 27 Indentarea textului .................................................................... 28 Exemple .................................................................................... 29 Toate proprietile CSS pentru formatarea textului .................. 32

8. Fonturi ...................................................................................... 33 Familiile de fonturi n CSS ....................................................... 33

7

Proprietatea font-style ............................................................... 34 Proprietatea font-size ................................................................ 35 Exemple .................................................................................... 37 Toate proprietile pentru fonturi n CSS ................................. 39

9. Linkuri ...................................................................................... 40 Formatarea linkurilor ................................................................ 40 Decorarea textului ..................................................................... 41 Culoarea fundalului .................................................................. 41 Exemple .................................................................................... 42

10. Liste ........................................................................................ 44 Setarea diferiilor marcatori ...................................................... 44 O imagine ca marcator n list .................................................. 46 Proprietatea scurt .................................................................... 46 Exemplu .................................................................................... 47 Toate proprietile pentru liste n CSS ..................................... 50

11. Tabele ..................................................................................... 50 Chenarele tabelului ................................................................... 50 Proprietatea border-collapse ..................................................... 51 Dimensiunile unui tabel ............................................................ 52 Alinierea textului din tabel ....................................................... 53 Spaiul dintre chenar i coninut (table padding) ...................... 56 Culoarea tabelelor ..................................................................... 57 Exemple .................................................................................... 58

12. Modelul box n CSS ............................................................... 62 Dimensiunile unui element ....................................................... 62 Probleme de compatibilitate n browsere ................................. 64

13. Chenare ................................................................................... 65 Stilul chenarului ........................................................................ 65 Grosimea chenarului ................................................................. 66 Culoarea chenarului .................................................................. 67 Laturile unui chenar .................................................................. 67 Proprietatea scurt .................................................................... 69 Exemple .................................................................................... 69 Toate proprietile CSS pentru chenare .................................... 72

14. Linii exterioare (outlines) ....................................................... 74 Exemple .................................................................................... 74

8

Toate proprietile CSS pentru linii exterioare ......................... 77 15. Margini ................................................................................... 77

Laturile marginii ....................................................................... 78 Proprietatea prescurtat ............................................................ 78 Exemple .................................................................................... 79 Toate proprietile pentru margini ............................................ 80

16. Padding ................................................................................... 81 Modificarea individual a celor patru spaii ............................. 81 Proprietatea scurt .................................................................... 82 Exemple .................................................................................... 83 Toate proprietile CSS pentru padding ................................... 86

17. Gruparea i imbricarea selectorilor ......................................... 86 Gruparea selectorilor ................................................................ 86 Imbricarea selectorilor .............................................................. 87

18. Setarea dimensiunilor unui element ....................................... 88 Exemple .................................................................................... 88 Toate proprietile CSS pentru dimensiuni .............................. 92

19. Proprietile display i visibility ............................................. 92 Ascunderea unui element ......................................................... 93 Afiarea elementelor bloc i a elementelor inline ..................... 93 Schimbarea modului de afiare a unui element ........................ 94 Exemple .................................................................................... 95

20. Poziionarea unui element ...................................................... 97 Exemple .................................................................................. 101 Toate proprietile CSS pentru poziionarea unui element ..... 104

21. Proprietatea float ................................................................... 105 Cum sunt deplasate elementele ............................................... 105 Mutarea elementelor unele lng altele .................................. 106 Proprietatea clear .................................................................... 107 Exemple .................................................................................. 108 Toate proprietile CSS pentru deplasarea elementelor .......... 114

22. Alinierea orizontal .............................................................. 115 Alinierea elementelor bloc ...................................................... 115 Alinierea la centru folosind proprietatea margin ................... 115 Alinierea la stnga i la dreapta folosind proprietatea position ................................................................................................ 116

9

Alinierea la stnga i la dreapta folosind proprietatea float . . . 116 23. Pseudo-clasele CSS .............................................................. 117

Sintaxa .................................................................................... 117 Pseudo-clase pentru link-uri ................................................... 117 Pseudo-clasa :first-child ......................................................... 118

Selectarea primului element ....................................... 118 Selectarea primului element din toate elementele ............................................................................................ 119 Selectarea tuturor elementelor din primul element care este descendent al unui alt element ............................. 119 Selectarea primului item dintr-o list ................................. 120 Selectarea primului descendent al tuturor elementelor li dintr-o list ................................................................................... 121

Pseudo-clasa :lang ................................................................ 121 Exemple .................................................................................. 122 Pseudo-clasele CSS ................................................................ 124

24. Pseudo-elementele CSS ....................................................... 124 Sintax .................................................................................... 124 Pseudo-elementul :first-line ................................................... 125 Pseudo-elementul :first-letter ............................................... 125 Pseudo-elementele i clasele CSS ......................................... 126 Pseudo-elemente multiple ....................................................... 126 Pseudo-elementul :before ...................................................... 127 Pseudo-elementul :after ......................................................... 128 Pseudo-elementele CSS .......................................................... 128

25. Bara de navigare ................................................................... 129 Bar de navigare vertical ...................................................... 130 Bar de navigare orizontal .................................................... 131

26. Galerie de imagini ................................................................ 134 27. Opacitatea/transparena unei imagini ................................... 135 28. Imagini sprite ........................................................................ 138

Crearea unei liste de navigare ................................................. 138 29. Atribute selector ................................................................... 141 Bibliografie ................................................................................. 146

10

1. Introducere

Ce este CSS? CSS nseamn Cascading Style Sheets (foi de stil n cascad) Stilurile definesc cum vor fi afiate elementele HTML Stilurile au fost adugate n HTML 4.0 pentru a rezolva o problem Foile de stiluri externe pot salva mult munc Foile de stiluri externe sunt memorate n fiiere CSS

Stilurile rezolv o mare problemHTML nu a fost conceput ca s conin taguri pentru formatarea documentelor, ci numai pentru definirea coninutului documentelor, ca n exemplul urmtor:Acesta este un titluAcesta este un paragraf.Cnd taguri precum i atributele de culoare au fost adugate n specificaiile HTML 3.2, a nceput comarul pentru proiectanii web. Dezvoltarea site-urilor mari, n care informaiile despre font i culoare trebuiau adugate pe fiecare pagin, a devenit un proces lung i costisitor.Pentru a rezolva aceast problem, consoriul World Wide Web (W3C) a creat CSS.n HTML 4.0, toate formatrile pot fi nlturate din documentul HTML i stocate ntr-un fiier CSS separat. Toate browserele suport CSS. n acest fel putei schimba uor aspectul tuturor paginilor web dintr-un site modificnd un singur fiier.

2. Sintaxa

Exemple

1. Fiierul HTML urmtor se leag la o foaie extern de stil cu tagul :

11

Acest titlu are 35 ptAcest titlu este verdeAcest paragraf are marginea stanga de 40 pixeli

Fiierul de stil (stil1.css) are urmtorul coninut:body{background-color:yellow;}h1{font-size:35pt;}h2{color:green;}p{margin-left:40px;}

2. Fiierul HTML urmtor se leag un fiier extern de stil situat pe un alt server:

Acesta este un titlu 1

Puteti vedea continutul foii de stil care formateaza textul la adresa:Link

12

Fiierul de stil (stil2.css) are urmtorul coninut:body {background-color: tan}h1 {color:maroon; font-size:20pt}hr {color:navy}p {font-size:11pt; margin-left: 15px}a:link {color:green}a:visited {color:yellow}a:hover {color:black}a:active {color:blue}

O construcie CSS are dou pri: un selector, i una sau mai multe declaraii:

Selectorul este uzual elementul HTML pe care dorii s-l formatai.Fiecare declaraie este format dintr-o proprietate i o valoare.Proprietatea este atributul de stil pe care dorii s-l modificai. Fiecare proprietate are o valoare.Declaraiile CSS se ncheie ntotdeauna cu ; i grupurile de declaraii sunt scrise ntre acolade. Exemplu:p {color:red;text-align:center}Pentru a face declaraiile CSS mai uor de citit, putei scrie fiecare declaraie pe cte o linie ca n exemplul urmtor:p{color:red;text-align:center;}Documentul HTML care conine declaraiile CSS de mai sus va arta astfel:

p{color:red;text-align:center;

13

}

Buna ziua!Acest paragraf este stilizat cu CSS.

Comentarii CSS Comentariile se folosesc pentru a explica codul i pot fi utile cnd modificai codul surs pe parcurs. Comentariile sunt ignorate de ctre browsere.Un comentariu CSS ncepe cu "/*", i se termin cu "*/", ca n exemplul urmtor:/*Acesta este un comentariu si nu se va afisa*/p{text-align:center;/*Acesta este un alt comentariu*/color:blue;font-family:arial}

3. Selectorii id i class Pe lng setarea stilului unui element HTML, CSS v permite s specificai doi selectori proprii numii id i class.

Selectorul id Selectorul id este utilizat pentru a specifica stilul unui singur element . Selectorul id folosete atributul id al unui element HTML, i este definit cu "#". Exemplu: Stilul urmtor va fi aplicat elementului care are atributul id="par1".

#par1{

14

text-align:center;color:red}

Buna ziua!Acest paragraf nu este afectat de declaratia de stil.

Obs. Nu ncepei numele id cu un numr deoarece nu va lucra n Mozilla/Firefox.

Selectorul class Acest selector este utilizat pentru a specifica stilul unui grup de elemente. Astfel, putei seta un stil particular pentru toate elementele HTML care face parte din aceeai clas. Selectorul class folosete atributul HTML class i este definit cu "."n exemplul urmtor, toate elementele HTML cu atributul class="center" vor fi aliniate la centru:

.center{text-align:center;}

Acest titlu este aliniat la centru cu CSSAcest paragraf este de asemenea aliniat la centru cu CSS.

Putei de asemenea specifica ce elemente din clas vor fi afectate de stil.n exemplul urmtor, numai elementele p din clasa center vor fi aliniate la centru:

15

p.center{text-align:center;}

Acest titlu nu este afectat de stilul CSSAcest paragraf este aliniat la centru cu CSS.

Obs. Nu ncepei un nume de clas cu un numr deoarece numai Internet Explorer accept acest lucru.

4. Cum inserm CSS n documentele HTML

O foaie de stil poate fi inserat n trei moduri: Foaie extern de stil Foaie intern de stil Stil inline

Foaie extern de stilO foaie de stil extern este ideal atunci cnd stilul respectiv se aplic mai multor pagini. Cu o foaie CSS extern, putei modifica aspectul ntregului site modificnd un singur fiier. Fiecare pagin trebuie s se lege la foaia de stil folosind tagul n interiorul seciunii head:

O foaie extern de stil poate fi scris n Notepad, nu trebuie s conin taguri html i trebuie salvat cu extensia .css. Un exemplu de foaie de stil extern, memorat n fiierul stil.css, este prezentat mai jos:hr {color:sienna}p {margin-left:20px}body {background-image:url("roses.gif")}

16

Obs. Nu lsai spaii ntre valoarea proprietii i unitatea de msur! Dac scriei "margin-left:20 px" (n loc de "margin-left:20px") va merge n IE, dar nu n Firefox sau Opera.Foaie intern de stilO foaie intern de stil trebuie folosit cnd un singur document are un anumit stil. Foaia intern de stil se definete n seciunea head a paginii HTML folosind tagul , ca n exemplul urmtor:

hr {color:sienna}p {margin-left:20px}body {background-image:url("roses.gif")}

Stiluri inlineUn stil inline pierde multe din avantajele foilor de stiluri amestecnd coninutul cu prezentarea. Utilizai aceast metod ct mai rar. Pentru a utiliza un stil inline, folosii atributul style n tagul respectiv. Atributul style poate conine orice proprieti CSS. Exemplul urmtor ilustreaz cum se poate schimba culoarea i marginea stng a unui paragraf:Acesta este un paragraf.

Foi multiple de stiluriDac anumite proprieti ale unui selector au fost setate n foi de stiluri diferite, valorile vor fi motenite din cea mai specific foaie de stil. Spre exemplu,ntr-o foaie de stil extern, selectorul h3 are setate urmtoarele trei proprieti:h3{color:red;text-align:left;font-size:8pt}i foaia de stil intern seteaz pentru h3 urmtoarele proprieti:h3{text-align:right;font-size:20pt}

17

Dac pagina care conine aceast foaie intern de stil se leag i la foaia de stil extern, atunci proprietile pentru h3 vor fi:color:red;text-align:right;font-size:20ptCuloarea este motenit din foaia extern, iar alinierea i dimensiunea fontului sunt nlocuite cu valorile din foaia intern de stil.Stilurile pot fi specificate:

ntr-un element HTML n seciunea head a unei pagini HTML ntr-un fiier extern CSS

Obs: ntr-un document HTML pot fi referite mai multe foi de stiluri externe.

Ordinea de aplicareCe stil va fi utilizat cnd ntr-un document HTML sunt specificate mai multe foi de stil pentru un element HTML?La modul general, putem spune c stilurile se vor mixa ntr-o foaie de stil virtual dup urmtoarele reguli, unde prioritatea crete odat cu numrul de ordine:

1. Setrile implicite ale browserului2. Foi de stil externe (din fiiere CSS)3. Foi de stiluri interne (din seciunea head)4. Stiluri inline (din tagul elementului HTML)

Deci, stilul inline al unui element suprascrie stilul definit n , ntr-un fiier extern sau n browser.Obs: Dac legtura ctre o foaie extern de stil este amplasat n seciunea dup foaia intern de stiluri, atunci fiierul extern va suprascrie stilul intern!

5. Formatarea background-ului

Proprietile utilizate n CSS pentru a defini fundalul unui element sunt: background-color background-image background-repeat background-attachment background-position

Proprietatea background-color18

Proprietatea specific culoarea de fundal a unui element. Culoarea de fundal pentru ntreaga pagin este definit n selectorul body ca n exemplul urmtor:

body{background-color:#b0c4de;}

Pagina stilizata cu CSS!Buna ziua! Acesta este un exemplu de utilizare a stilurilor.

Culoarea de fundal poate fi specificat prin:

nume un nume de culoare, de exemplu "red" RGB o valoare RGB, de exemplu "rgb(255,0,0)" Hex o valoare hexazecimal, de exemplu "#ff0000"

n exemplul urmtor, elementele h1, p, i div au diferite culori de fundal:

h1{background-color:#6495ed;}p{background-color:#e0ffff;}div{background-color:#b0c4de;}

19

Exemplu pentru proprietatea CSS background-color!

Acesta este un text in interiorul unui element div.Acest paragraf are propria culoare de fundal, desi este in interiorul elementului div.

Acest text face parte tot din elementul div.

Proprietatea background-imageAceast proprietate definete imaginea folosit ca fundal pentru un element. Implicit, imaginea se repet pe suprafaa ntregului element. Imaginea de fundal a paginii poate fi setat ca n exemplul urmtor:

body {background-image:url('paper.gif')}

Buna ziua!

Obs. Construcia url(...) precizeaz locul n care este stocat imaginea. Dac provine de pe net, precizai adresa complet ca n exemplul urmtor: url(http://www.image.com/image.gif)Imaginea de fundal trebuie aleas astfel nct textul s poat fi citit cu uurin.

Proprietatea background-repeatPrin definiie, proprietatea background-image repet o imagine i vertical i orizontal. Unele imagini trebuie repetate numai vertical sau numai orizontal.Dac dorii ca imaginea s se repete numai pe orizontal, folosii valoarea repeat-x, iar pentru vertical folosii repeat-y. Exemplu:

20

body{background-image:url('gradient2.png');background-repeat:repeat-x;}

Buna ziua!

Proprietatea background-position i no-repeatCnd folosii o imagine de fundal avei grij s nu ngreunai citirea textului. Dac dorii ca imaginea s fie afiat o singur dat (s nu se repete), folosii valoarea no-repeat ca n exemplul urmtor:

body{background-image:url('tree.jpg');background-repeat:no-repeat;}

Buna ziua!Exemplu de imagine de fundal.Imaginea este afisata o singura data,dar incomodeaza cititorul!

Pentru a schimba poziia imaginii de fundal, folosii proprietatea background-position ca n exemplul urmtor:

21

body{background-image:url('tree.jpg');background-repeat:no-repeat;background-position:top right;margin-right:200px;}

Buna ziua!Exemplu de imagine de fundal.Imaginea este afisata o singura data si pozitionata in afara textului.In acest exemplu,marginea dreapta a textului a fost setata la 200 pixeli. In acest fel, textul nu se va suprapune cu imaginea.

Proprieti multiple pentru backgroundPentru a scurta codul, putei preciza toate proprietile ntr-o proprietate numit scurt background ca n exemplul urmtor:

body{background:#ffff00 url('tree.jpg') no-repeat top right;margin-right:200px;}

Buna ziua!

22

Imaginea este afisata o singura data si pozitionata in afara textului.In acest exemplu,marginea dreapta a textului a fost setata la 200 pixeli. In acest fel, textul nu se va suprapune cu imaginea.

Cnd folosii proprietatea scurt, ordinea valorilor proprietilor este:

background-color background-image background-repeat background-attachment background-position

Nu conteaz dac valoarea unei proprieti lipsete, att timp ct valorile prezente sunt scrise n aceast ordine.

Exemple

Exemplul 1Ilustreaz cum se stabilete o imagine de fundal fix. Imaginea nu se va deplasa odat cu restul paginii.

body {background-image:url('smiley.gif');background-repeat:no-repeat;background-attachment:fixed}

Imaginea de fundal este fixa. Incercati sa micsorati fereastra si sa derulati pana la sfarsitul paginii.Imaginea de fundal este fixa. Incercati sa micsorati fereastra si sa derulati pana la sfarsitul paginii.

Imaginea de fundal este fixa. Incercati sa micsorati fereastra si sa derulati pana la sfarsitul paginii.

a unui element none

background-position

Seteaz poziia de nceput a unei imagini de fundal

top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx% y%xpos ypos

background-repeat

Stabilete dac i cum va fi repetat imaginea de fundal

repeatrepeat-xrepeat-yno-repeat

6. Formatarea textului

Culoarea textuluiCuloarea textului este stabilit cu proprietatea color. Culoarea poate fi specificat prin:

nume un nume de culoare, de exemplu "red" RGB o valoare RGB, de exemplu "rgb(255,0,0)" Hex o valoare hexazecimal, de exemplu "#ff0000"

Culoarea implicit pentru ntreaga pagin este definit n selectorul body. Exemplu:

body {color:red}h1 {color:#00ff00}p.ex {color:rgb(0,0,255)}

Acesta este un titlu 1

25

Acesta este un paragraf obisnuit si are culoarea rosie. Culoarea implicita a textului paginii este definita in selectorul body.Acesta este un paragraf din clasa "ex" si are culoarea albastra.

Obs. Conform cerinelor W3C, dac ai definit proprietatea color n body, trebuie s definii i proprietatea background-color.

Alinierea textuluiProprietatea text-align este utilizat pentru a seta alinierea orizontal a textului. Textul poate fi aliniat la dreapta, la stnga, centrat sau justified. Exemplu:

h1 {text-align:center}p.date {text-align:right}p.main {text-align:justify}

Exemplu de aliniere a textului cu CSSIanuarie, 2010 Daca asi sti ca efortul pentru scrierea unui roman ma poate costa viata, mi-asi lua toate masurile de siguranta pentru a inlatura o eventualitatecum ar fi boala din care sa mi se traga moartea.Dar unica masura hotaratoare, aceea de a renunta la scris, nu asi lua-o.Marin PredaObs:Modificati dimensiunea ferestrei browserului pentru a vedea cum arata alinierea justified.

Decorarea textului

26

Proprietatea text-decoration este utilizat pentru a stabili decorarea unui text. Cel mai des este utilizat pentru a nltura sublinierea link-urilor din motive de aspect, ca n exemplul urmtor:

a {text-decoration:none}

Link catre: Yahoo

Poate fi utilizat i pentru a decora textul, ca n exemplul urmtor:

h1 {text-decoration:overline}h2 {text-decoration:line-through}h3 {text-decoration:underline}h4 {text-decoration:blink}

Acesta este un titlu 1Acesta este un titlu 2Acesta este un titlu 3Acesta este un titlu 4Obs: Valoarea "blink" nu este recunoscuta de IE, Chrome, sau Safari.

Nu este recomandat s subliniai un text care nu este un link deoarece poate produce confuzie n rndul cititorilor.

Transformarea textuluiProprietatea text-transform este utilizat pentru a specifica literele mici i literele mari dintr-un text.

27

Poate fi utilizat pentru a transforma tot textul n minuscule sau majuscule, sau pentru a transforma n majuscul prima liter din fiecare cuvnt. Exemplu:

p.uppercase {text-transform:uppercase}p.lowercase {text-transform:lowercase}p.capitalize {text-transform:capitalize}

Acesta este un text scris cu litere mari.Acesta este un text scris cu litere mici.Acesta este un text in care fiecare cuvant incepe cu litera mare.

Indentarea textuluiProprietatea text-indentation este utilizat pentru a specifica indentarea primei linii dintr-un text. Exemplu:

p {text-indent:50px}

Daca asi sti ca efortul pentru scrierea unui roman ma poate costa viata, mi-asi lua toate masurile de siguranta pentru a inlatura o eventualitatecum ar fi boala din care sa mi se traga moartea.Dar unica masura hotaratoare, aceea de a renunta la scris, nu asi lua-o.Marin Preda

28

Exemple

Exemplul 1Ilustreaz cum se mrete sau se micoreaz spaiul dintre caractere.

h1 {letter-spacing:2px}h2 {letter-spacing:-3px}

Acesta este un titlu 1Acesta este un titlu 2

Exemplul 2Ilustreaz cum se stabilete spaiul dintre liniile unui paragraf.

p.small {line-height: 90%}p.big {line-height: 200%}

Acesta este un paragraf cu distana dintre linii normala.In majoritatea browserelor, distanta standard dintre linii este intre 110% si 120%.Acesta este un paragraf cu distanta dintre linii normala.

Acesta este un paragraf cu distanta dintre linii micsorata.Acesta este un paragraf cu distanta dintre linii micsorata.

29

Acesta este un paragraf cu distanta dintre linii micsorata.

Acesta este un paragraf cu distanta dintre linii marita.Acesta este un paragraf cu distanta dintre linii marita.Acesta este un paragraf cu distanta dintre linii marita.

Exemplul 3Ilustreaz cum se schimb direcia textului pentru un element.

div.ex1 {direction:rtl}

Acest text are directia normala de scris.Acest text este scris de la dreapta la stanga.

Exemplul 4Ilustreaz cum se mrete spaiul dintre cuvintele unui paragraf.

p{ word-spacing:30px;}

30

Acesta este un text cu distanta dintre cuvinte marita.

Exemplul 5Ilustreaz cum se foreaz scrierea textului dintr-un element pe singur linie.

p{white-space:nowrap;}

Acesta este un text. Acesta este un text. Acesta este un text.Acesta este un text. Acesta este un text. Acesta este un text.Acesta este un text. Acesta este un text. Acesta este un text.Acesta este un text. Acesta este un text. Acesta este un text.

Exemplul 6Ilustreaz cum se stabilete alinierea vertical a unei imagini din text.

img.top {vertical-align:text-top}

31

img.super {vertical-align:super}

O imagine in interiorul unui paragraf, cu aliniere verticala implicita. O imagine in interiorul unui paragraf,cu aliniere la marginea de sus a textului. O imagine in interiorul unui paragraf, cu aliniere la marginea de jos a textului.

Toate proprietile CSS pentru formatarea textuluiProprietate Descriere Valoricolor Seteaz culoarea textului colordirection Seteaz direcia textului ltrrtlline-height Seteaz distana dintre linii

normalnumberlength%

letter-spacing

Mrete sau micoreaz spaiul dintre caractere

normallength

text-align Aliniaz un element n cadrul textuluileftrightcenterjustify

text-decoration Adaug decoraiuni unui text

noneunderlineoverlineline-throughblink

text-indent

Indenteaz prima linie de text dintr-un element

length%

text- Adaug umbr unui text none32

shadow colorlength

text-transform Controleaz literele unui element

nonecapitalizeuppercaselowercase

vertical-align Seteaz alinierea vertical a unui element

baselinesubsupertoptext-topmiddlebottomtext-bottomlength%

white-space

Seteaz spaiul alb din interiorul unui element

normalprenowrap

word-spacing

Mrete sau micoreaz spaiul dintre cuvinte

normallength

8. Fonturi

Proprietile CSS pentru fonturi definesc familia de fonturi, ngroarea, mrimea i stilul unui text.

Familiile de fonturi n CSSn CSS, numele unei familii de fonturi se poate defini n dou moduri:

Familie generic un grup de familii de fonturi care au un aspect similar (ca "Serif" sau "Monospace")

Familie de fonturi o familie specific de fonturi (ca "Times New Roman" sau "Arial")

Familia generic Familia specific Descriere

Serif Times New RomanGeorgia

Fonturile de tip serif au linii mici la sfritul unora dintre caractere

Sans-serif ArialVerdana

"Sans" nseamn fr aceste fonturi nu au linii la sfritul caracterelor

Monospace Courier New Toate caracterele monospace au aceeai 33

Lucida Console nlime

Familia de fonturi a unui text este stabilit cu proprietatea font-family.Aceast proprietate ar trebui s precizeze cel puin dou familii de fonturi. Dac browserul nu recunoate prima familie, o va ncerca pe a doua. ncepei cu fontul pe care l dorii i terminai cu o familie generic. Obs: Dac numele familiei de fonturi este format din mai multe cuvinte, numele trebuie scris ntre ghilimele, ca: "Times New Roman".Dac folosii mai multe nume de fonturi, ele trebuie separate n list prin virgul.Exemplu:.

p.serif{font-family:"Times New Roman", Times, Serif}p.sansserif{font-family:Arial, Helvetica, Sans-serif}

Familiile de fonturi in CSSAcest paragraf foloseste fontul Times New Roman.Acest paragraf foloseste fontul Arial.

Proprietatea font-styleAceast proprietate este utilizat frecvent pentru a seta textul italic. Proprietatea are trei valori:

normal textul este afiat normal italic textul este afiat italic oblique foarte similar cu italic, dar mai puin recunoscut de

browsereExemplu:

p.normal {font-style:normal}p.italic {font-style:italic}

34

p.oblique {font-style:oblique}

Acest paragraf este scris cu fontul normal.Acest paragraf este scris cu fontul italic.Acest paragraf este scris cu fontul oblic.

Proprietatea font-sizeAceast proprietate stabilete dimensiunea unui text. Valoarea proprietii poate fi absolut sau relativ.Dimensiunea absolut:

Fixeaz textul la dimensiunea specificat Nu permite user-ului s modifice dimensiunea textului n toate

browserele (dezavantaj) Este util cnd este cunoscut dimensiunea fizic a ferestrei de afiare

Dimensiunea relativ: Stabilete dimensiunea textului n funcie de elementele nconjurtoare Permite utilizatorului s modifice n browser dimensiunea textului

Obs. Dac nu specificai dimensiunea fontului, mrimea implicit pentru textul normal (cum ar fi paragraful) este de 16px (16px=1em).

Stabilirea dimensiunii textului n pixeliDac lucrai cu valori n pixeli, avei control total asupra dimensiunii textului.Exemplu:

h1 {font-size:40px}h2 {font-size:30px}p {font-size:14px}

35

Acesta este un titlu 1Acesta este un titlu 2Acesta este un paragraf.Daca precizati dimensiunea fontului in pixeli, in Firefox, Chrome, si Safari textul va putea fi redimensionat, iar in Internet Explorer nu.

Obs. Textul poate fi redimensionat n orice browser folosind instrumentul zoom. Aceasta se aplic ns ntregii pagini, nu numai textului dorit.

Stabilirea dimensiunii textului n emPentru a evita problemele de redimensionare din Internet Explorer, muli proiectani web utilizeaz em n loc de pixeli.Unitatea de msur em este recomandat i de W3C.1em este egal cu dimensiunea fontului normal, adic 16px. Pentru a trece de la pixeli la em folosim formula: pixels/16=emExemplu:

h1 {font-size:2.5em} /* 40px/16=2.5em */h2 {font-size:1.875em} /* 30px/16=1.875em */p {font-size:0.875em} /* 14px/16=0.875em */

Acesta este un titlu 1Acesta este un titlu 2Acesta este un paragraf.Daca specificati dimensiunea fontului in em, in Internet Explorer, Firefox, Chrome, si Safari textul va putea fi redimensionat.

Dei textul arat la fel ca n exemplul precedent, el poate fi redimensionat n orice browser. Totui, n Internet Explorer, cnd un text este redimensionat, devine mai mic sau mai mare dect ar trebui.

Folosii o combinaie de procente i em36

Soluia care funcioneaz n toate browserele, este s stabilii n procente dimensiunea implicit pentru elementul body, ca n exemplul urmtor:

body {font-size:100%}h1 {font-size:2.5em}h2 {font-size:1.875em}p {font-size:0.875em}

Acesta este un titlu 1Acesta este un titlu 2Acesta este un paragraf.Daca specificati dimensiunea fontului in procente si em,textul va fi afisat la fel in toate browserele si va putea fi redimensionat!

Exemple

Exemplul 1Ilustreaz cum se stabilete grosimea fontului.

p.normal {font-weight:normal}p.light {font-weight:lighter}p.thick {font-weight:bold}p.thicker {font-weight:900}

Acesta este un paragraf.Acesta este un paragraf.Acesta este un paragraf.Acesta este un paragraf.

37

Exemplul 2Ilustreaz cum se stabilete varianta fontului.

p.normal {font-variant:normal}p.small {font-variant:small-caps}

Numele meu este Adela Popescu.Numele meu este Adela Popescu.

Exemplul 3Ilustreaz cum putei folosi proprietatea scurt pentru a stabili toate caracteristicile fontului ntr-o singur declaraie.

p.ex1{font:15px arial,sans-serif;}p.ex2{font:italic bold 12px/30px Georgia, serif;}

Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf.

38

Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este unparagraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf.

Toate proprietile pentru fonturi n CSSProprietate Descriere Valori

font Seteaz toate proprietile fontului ntr-o singur declaraie

font-stylefont-variantfont-weightfont-size/line-heightfont-familycaptioniconmenumessage-boxsmall-captionstatus-bar

font-family Specific familia de fonturi family-namegeneric-family

font-size Specific dimensiunea fontului

xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength%

font-style Specific stilul fontuluinormalitalicoblique

font-variant Specific dac textul este afiat sau nu cu majuscule mici

normalsmall-caps

font-weight Specific grosimea fontului normalboldbolder

39

lighter100200300400500600700800900

9. Linkuri

Formatarea linkurilorLinkurile pot fi stilizate cu ajutorul proprietilor CSS , cum ar fi color, font-family, background-color.Special pentru linkuri este faptul c ele trebuie formatate diferit, n funcie de starea n care sunt.Cele patru stri ale unui link sunt:

a:link - a este link normal, nevizitat a:visited - a este un link care a fost vizitat de user a:hover - a este un link peste care se mic mouse-ul a:active - a este un link apsat (activ)

Exemplu:

a:link {color:#FF0000} /* link nevizitat */a:visited {color:#00FF00} /* link vizitat */a:hover {color:#FF00FF} /* link peste care se misca mouse-ul */a:active {color:#0000FF} /* link selectat */

Acesta este un link

40

Nota: a:hover TREBUIE scrisa in definitia CSS dupa a:link si a:visited pentru a fi efectiva.Nota: a:active TREBUIE scrisa in definitia CSS dupa a:hover pentru a fi efectiva.

Cnd stabilii stilul linkurilor, exist anumite reguli privind ordinea declaraiilor:

a:hover trebuie scris dup a:link i a:visited a:active trebuie scris dup a:hover

Decorarea textuluiProprietatea text-decoration este folosit cel mai des pentru a nltura sublinierea link-urilor.Exemplu:

a:link {text-decoration:none} /* link nevizitat */a:visited {text-decoration:none} /* link vizitat */a:hover {text-decoration:underline} /* mouse peste link */a:active {text-decoration:underline} /* link selectat */

Acesta este un link

Culoarea fundaluluiProprietatea background-color este utilizat pentru a specifica culoarea de fundal a linkurilor. Exemplu:

41

a:link {background-color:#B2FF99;} /* link nevizitat */a:visited {background-color:#FFFF85;} /* link vizitat */a:hover {background-color:#FF704D;} /* mouse peste link */a:active {background-color:#FF704D;} /* link selectat */

Acesta este un link

Exemple

Exemplul 1Ilustreaz cum se aplic unui link diferite stiluri.

a.one:link {color:#ff0000;}a.one:visited {color:#0000ff;}a.one:hover {color:#ffcc00;}a.two:link {color:#ff0000;}a.two:visited {color:#0000ff;}a.two:hover {font-size:150%;}a.three:link {color:#ff0000;}a.three:visited {color:#0000ff;}a.three:hover {background:#66ff66;}a.four:link {color:#ff0000;}a.four:visited {color:#0000ff;}a.four:hover {font-family:monospace;}a.five:link {color:#ff0000;text-decoration:none;}a.five:visited {color:#0000ff;text-decoration:none;}a.five:hover {text-decoration:underline;}

42

Plimbati mouse-ul peste linkuri pentru a vedea cum se schimba aspectul lor.Acest link isi schimba culoareaAcest link isi schimba dimensiunea fontuluiAcest link isi schimba culoarea de fundalAcest link isi schimba familia de fonturiAcest link isi schimba decoratia

Exemplul 2Ilustreaz cum se combin mai multe proprieti CSS pentru a afia link-urile ca nite csue colorate.

a:link,a:visited{display:block;font-weight:bold;color:#FFFFFF;background-color:#98bf21;width:120px;text-align:center;padding:4px;text-decoration:none;}

43

a:hover,a:active{background-color:#7A991A;}

Acesta este un link

10. Liste

Proprietile CSS pentru liste v permit s: setai diferii marcatori pentru itemii dintr-o list ordonat sau

neordonat s setai o imagine ca marcator pentru itemii unei liste neordonate

Setarea diferiilor marcatoriTipul marcatorilor itemilor dintr-o list neordonat se stabilete cu proprietatea list-style-type.Exemplu:

ul.a {list-style-type:circle;}ul.b {list-style-type:square;}ol.c {list-style-type:upper-roman;}ol.d {list-style-type:lower-alpha;}

Exemplu de lista neordonata:

Cafea Ceai Pepsi

44

Cafea Ceai Pepsi

Exemplu de list ordonat:

Cafea Ceai Pepsi

Cafea Ceai Pepsi

Valorile proprietii pentru liste neordonateValoare Descrierenone Fr marcatordisc Implicit. Marcatorul este un cerc plincircle Marcatorul este un cerc golsquare Marcatorul este un ptrat

Valorile proprietii pentru liste ordonateValoare Descrierearmenian Marcatorul este un numr tradiional armenescdecimal Marcatorul este un numr n baza zece

decimal-leading-zero Marcatorul este un numr precedat de zero (01, 02, 03, etc.)

georgian Marcatorul este un numr tradiional georgian (an, ban, gan, etc.)lower-alpha Marcatorul este litera mica (a, b, c, d, e, etc.)lower-greek Marcatorul este liter mic greceasc (alpha, beta,

45

gamma, etc.)lower-latin Marcatorul este liter latin mic (a, b, c, d, e, etc.)lower-roman Marcatorul este numr roman mic (i, ii, iii, iv, v, etc.)upper-alpha Marcatorul ete liter mare (A, B, C, D, E, etc.) upper-latin Marcatorul este liter latin mare (A, B, C, D, E, etc.)

upper-roman Marcatorul este numr roman mare (I, II, III, IV, V, etc.)Obs: Nici-o versiune de Internet Explorer (inclusiv IE8) nu accept valorile "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian", sau "georgian".

O imagine ca marcator n listPentru a specifica o imagine ca marcator ntr-o list se utilizeaz proprietatea list-style-image, ca n exemplul urmtor:

ul {list-style-image:url('sqpurple.gif');}

CeaiCafeaLapte

Proprietatea scurtPutei specifica toate proprietile unei liste ntr-o singur declaraie folosind list-style ca n urmtorul exemplu:

ul {

46

list-style:square url("sqpurple.gif");}

CafeaCeaiLapte

Cnd folosii varianta scurt, ordinea valorilor este:

list-style-type list-style-position list-style-image

Nu conteaz dac unele valori lipsesc, ct timp valorile care apar respect aceast ordine.

ExempluAcest exemplu ilustreaz utilizarea tuturor tipurilor de marcatori n CSS.

ul.a {list-style-type:disc;}ul.b {list-style-type:circle;}ul.c {list-style-type:square;}ul.d {list-style-type:none;}ol.e {list-style-type:decimal;}ol.f {list-style-type:decimal-leading-zero;}ol.g {list-style-type:lower-roman;}ol.h {list-style-type:upper-roman;}ol.i {list-style-type:lower-alpha;}ol.j {list-style-type:upper-alpha;}ol.k {list-style-type:lower-greek;}ol.l {list-style-type:lower-latin;}ol.m {list-style-type:upper-latin;}ol.n {list-style-type:armenian;}ol.o {list-style-type:georgian;}

47

DiscuriCeaiCafea

CercuriCeaiCafea

PatratePaineOua

Fara marcatoriCartiCaiete

Marcatori cifreBaietiFete

Marcatori care incep cu zeroRochiiCamasi

Cifre romane miciCaseVile

48

Cifre romane mariCariociAcuarele

Marcatori litere miciMereLamai

Marcatori litere mariGutuiPere

Litere grecesti miciCaiIepuri

Litere latine miciLapteSuc

Litere latine mariCartiReviste

Marcatori armenestiPantaloniSacouri

Marcatori georgieni

49

BereVin

Toate proprietile pentru liste n CSSProprietate Descriere Valori

list-style Precizeaz toate proprietile listei ntr-o singur declaraie

list-style-typelist-style-positionlist-style-image

list-style-image Specific o imagine drept marcator

URLnone

list-style-position

Specific dac marcatorii din list sunt n interiorul sau exteriorul coninutului

insideoutside

list-style-type Specific tipul marcatorilor din list

nonedisccirclesquaredecimaldecimal-leading-zeroarmeniangeorgianlower-alphaupper-alphalower-greeklower-latinupper-latinlower-romanupper-roman

11. Tabele

Aspectul unui tabel HTML poate fi mbuntit folosind CSS.

Chenarele tabelului

50

Pentru a specifica chenarele unui tabel n CSS, se folosete proprietatea border.Exemplul urmtor seteaz un chenar negru pentru tabel i pentru elementele th i td:

table,th,td{border:1px solid black;}

NumePrenume

PetrescuAmalia

ManoliuCristian

Observai c tabelul din exemplul anterior are chenare duble. Acest lucru se ntmpl deoarece elementele table, th, i td au chenare separate. Pentru a afia un singur chenar pentru tabel, folosii proprietatea border-collapse.

Proprietatea border-collapseAceast proprietate specific dac chenarele tabelului sunt sau nu reunite ntr-unul singur.

table

51

{border-collapse:collapse;}table, td, th{border:1px solid black;}

NumePrenume

PetrescuAmalia

ManoliuCristian

Dimensiunile unui tabelCu ajutorul proprietilor width i height putei stabili limea i nlimea unui tabel.n exemplul urmtor limea tabelului este stabilit la 100% i nlimea elementelor th la 50px:

table,td,th{border:1px solid black;}table{width:100%;

52

}th{height:50px;}

NumePrenumeEconomii

PetrescuAmalia500RON

ManoliuCristian350RON

BarbuDenisa300RON

SuciuAndrei450RON

Alinierea textului din tabelPentru a alinia textul dintr-un tabel se folosesc proprietile text-align i vertical-align.

53

Proprietatea text-align stabilete alinierea orizontal a textului, care poate avea valorile left, right sau center:

table,td,th{border:1px solid black;}td{text-align:right;}

NumePrenumeEconomii



BarbuDenisa300RON

SuciuAndrei450RON

54

Proprietatea vertical-align stabilete alinierea vertical a textului, i poate avea valorile top, bottom sau middle:

table, td, th{border:1px solid black;}td{height:50px;vertical-align:bottom;}

NumePrenumeEconomii



BarbuDenisa300RON

55

SuciuAndrei450RON

Spaiul dintre chenar i coninut (table padding)Pentru a controla spaiul dintre chenarul i coninutul tabelului, utilizai n elementele td i th proprietatea padding:

table, td, th{border:1px solid black;}td{padding:15px;}

NumePrenumeEconomii



56

BarbuDenisa300RON

SuciuAndrei450RON

Culoarea tabelelorn exemplul urmtor este precizat culoarea chenarului tabelului i culorile pentru textul i fundalul elementelor th:

table, td, th{border:1px solid green;}th{background-color:green;color:white;}

NumePrenumeEconomii


57


BarbuDenisa300RON

SuciuAndrei450RON

Exemple

Exemplul 1Ilustreaz cum putei crea un tabel cu un aspect deosebit.

#customers{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;width:100%;border-collapse:collapse;}#customers td, #customers th {font-size:1em;border:1px solid #98bf21;padding:3px 7px 2px 7px;}#customers th {font-size:1.1em;

58

text-align:left;padding-top:5px;padding-bottom:4px;background-color:#A7C942;color:#ffffff;}#customers tr.alt td {color:#000000;background-color:#EAF2D3;}

Compania Contact Tara

Alfreds FutterkisteMaria AndersGermania

Berglunds snabbkpChristina BerglundSuedia

Centro comercial MoctezumaFrancisco ChangMexic

Ernst HandelRoland MendelAustria

Island TradingHelen Bennett

59

UK

Kniglich EssenPhilip CramerGermania

Laughing Bacchus WinecellarsYoshi TannamuriCanada

Magazzini Alimentari RiunitiGiovanni RovelliItalia

North/SouthSimon CrowtherUK

Paris spcialitsMarie BertrandFranta

Exemplul 2Ilustreaz cum stabilii poziia denumirii tabelului (proprietatea caption).

caption {caption-side:bottom;}

60

Tabel 1.1 Clienti

Compania Contact Tara

Alfreds FutterkisteMaria AndersGermania

Berglunds snabbkpChristina BerglundSuedia

Centro comercial MoctezumaFrancisco ChangMexic

Ernst HandelRoland MendelAustria

Island TradingHelen BennettUK

Magazzini Alimentari RiunitiGiovanni RovelliItalia

North/SouthSimon CrowtherUK

61

12. Modelul box n CSS

Toate elementele HTML pot fi considerate a fi de tip box (caset). n CSS, termenul "box model" este folosit cnd se discut despre proiectare i aspect.n CSS modelul box este n esen o caset care nconjoar un element HTML i este format din: margini, chenare, distana dintre chenar i coninut (padding) i coninut.Modelul box ne permite s plasm chenare n jurul elementelor i s amplasm elementele n relaie cu alte elemente.Imaginea de mai jos ilustreaz modelul box:

Explicarea componentelor: Margin O zon goal n jurul unui chenar. Marginea nu are culoare

de fundal i este complet transparent. Border Un chenar care nconjoar coninutul. Padding O zon goal n jurul coninutului. Aceast zon este

afectat de culoarea de fundal a casetei. Content Coninutul casetei, unde apar textul i imaginile.

Pentru a stabili corect nlimea i limea unui element n orice browser, trebuie s nelegei cum lucreaz modelul box.

Dimensiunile unui element62

Important: Cnd specificai n CSS proprietile width i height ale unui element, stabilii de fapt dimensiunile numai pentru zona de coninut din desenul de mai sus. Pentru a cunoate adevratele dimensiuni ale unui element, trebuie s adugai padding-ul, chenarul i marginea.Limea total a elementului din exemplul urmtor este 300px:width:250px;padding:10px;border:5px solid gray;margin:10px;S socotim:250px (limea coninutului)+ 20px (padding-ul stng i drept)+ 10px (chenarul din stnga i din dreapta)+ 20px (marginea din stnga i din dreapta)= 300pxS presupunem c exist doar 250px spaiu pentru un element i s construim un element cu limea total de 250px:

div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}

Linia de deasupra are 250px lungime.Lungimea totala a acestui element este tot 250px.Important: Acest exemplu nu va fi afisat corect in IE!

63

Limea total a unui element trebuie calculat astfel:Limea total a elementului = lime + padding-ul stng + padding-ul drept + chenarul stng + chenarul drept + marginea stng + marginea dreaptnlimea total a unui element trebuie calculat astfel:nlimea total a elementului = nlime + padding-ul de sus + padding-ul de jos + chenarul de sus+ chenarul de jos + marginea de sus + marginea de jos

Probleme de compatibilitate n browsereDac testai exemplul anterior n Internet Explorer, vei vedea c limea total nu este de 250px.IE include padding-ul i bordura n lime, cnd proprietatea width este setat. Pentru a rezolva aceast problem, adugai n document declaraia DOCTYPE ca n exemplul urmtor:

div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}

Linia de deasupra are 250px lungime.Acum latimea totala a acestui element este tot 250px.Note: In acest exemplu am adaugat declaratia DOCTYPE (deasupra elementului html),

64

astfel incat va fi afisat corect in toate browserele.

13. Chenare

Proprietatea CSS border definete chenarul din jurul unui element. Putei specifica stilul i culoarea unui element al chenarului.

Stilul chenaruluiProprietatea border-style specific ce fel de bordur va fi afiat.Obs. Nici-una din celelalte proprieti ale chenarului nu va avea efect, dac proprietatea border-style nu este setat.Acest exemplu ilustreaz ce valori poate avea proprietatea border-style i cum arat fiecare chenar:

p.none {border-style:none}p.dotted {border-style:dotted}p.dashed {border-style:dashed}p.solid {border-style:solid}p.double {border-style:double}p.groove {border-style:groove}p.ridge {border-style:ridge}p.inset {border-style:inset}p.outset {border-style:outset}p.hidden {border-style:hidden}

Fara chenar.Chenar punctat.Chenar tip linie intrerupta.Chenar plin.Chenar dublu.Chenar tip groove.Chenar tip ridge.

65

Chenar tip inset.Chenar tip outset.Chenar ascuns.

Grosimea chenaruluiGrosimea chenarului se stabilete cu proprietatea border-width.Grosimea se stabilete n pixeli sau se folosete una din valorile predefinite: thin, medium, sau thick.Obs: Proprietatea border-width nu funcioneaz dac este utilizat singur; mai nti trebuie stabilit proprietatea border-style.Exemplu:

p.one {border-style:solid;border-width:5px;}p.two {border-style:solid;border-width:medium;}p.three{border-style:solid;border-width:1px;}

Un text oarecare.Un text oarecare.Un text oarecare.

66

Culoarea chenaruluiPentru a stabili culoarea chenarului se utilizeaz proprietatea border-color. Culoarea poate fi precizat prin:

nume numele culorii, ca "red" RGB - valoare RGB, ca "rgb(255,0,0)" Hex valoare hexazecimal, ca "#ff0000"

Putei stabili culoarea chenarului i cu valoarea "transparent".Obs: Proprietatea border-color nu are nici-un efect dac nu a fost setat mai nti proprietatea border-style.Exemplu:

p.one{border-style:solid;border-color:red;}p.two{border-style:solid;border-color:#98bf21;}

Un chenar rosu plin.Un chenar verde plin.

Laturile unui chenarn CSS este posibil s setai n mod diferit laturile unui chenar.Exemplu:

p{border-top-style:dotted;

67

border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;}

Acest paragraf are doua tipuri de chenare.

Exemplul anterior poate fi realizat i cu o singur declaraie, ca n exemplul urmtor:

p{border-style:dotted solid;}

Acest paragraf are doua tipuri de chenare.

Proprietatea border-style poate avea ntre una i patru valori.

border-style:dotted solid double dashed; o latura de sus este punctato latura dreapt este plino latura de jos este dublo latura stng este ntrerupt

border-style:dotted solid double; o latura de sus este punctato laturile dreapt i stng sunt plineo latura de jos este dubl

border-style:dotted solid; o laturile de sus i de jos sunt punctateo laturile din stnga i din dreapta sunt pline

68

border-style:dotted;o cele patru laturi sunt punctate

Proprietatea scurtPentru a scurta codul, este posibil s specificm toate proprietile chenarului ntr-o singur proprietate. Pentru chenare, varianta scurt este border:

p{border:5px solid red;}

Acesta este un paragraf oarecare.

Cnd folosii varianta scurt, ordinea valorilor este:

border-width border-style border-color

Nu conteaz ce valori lipsesc (oricum border-style trebuie s apar), att timp ct valorile prezente sunt specificate n aceast ordine.

Exemple

Exemplul 1Ilustreaz utilizarea variantei scurte pentru a seta toate proprietile chenarului cu o singur declaraie.

p {border-style:solid;border-top:thick double #ff0000;

69

}

Acesta este un paragraf oarecare.

Exemplul 2Ilustreaz cum se stabilete stilul laturii de jos a chenarului.

p {border-style:solid}p.none {border-bottom-style:none}p.dotted {border-bottom-style:dotted}p.dashed {border-bottom-style:dashed}p.solid {border-bottom-style:solid}p.double {border-bottom-style:double}p.groove {border-bottom-style:groove}p.ridge {border-bottom-style:ridge}p.inset {border-bottom-style:inset}p.outset {border-bottom-style:outset}

Chenar fara latura de jos.Chenar cu latura de jos punctata.Chenar cu latura de jos intrerupta.Chenar cu latura de jos plina.Chenar cu latura de jos dubla.Chenar cu latura de jos groove.Chenar cu latura de jos ridge.Chenar cu latura de jos inset.Chenar cu latura de jos outset.

70

Exemplul 3Ilustreaz cum se stabilete grosimea laturii stngi a chenarului.

p {border-style:solid;border-left-width:15px;}

Note: Proprietatea "border-left-width" functioneaza numai daca ati setat mai intai proprietatea "border-style".

Exemplul 4Ilustreaz cum se stabilete culoarea fiecrei laturi a chenarului.

p.one{border-style:solid;border-color:#0000ff;}p.two{border-style:solid;border-color:#ff0000 #0000ff;}p.three{border-style:solid;border-color:#ff0000 #00ff00 #0000ff;}p.four{border-style:solid;

71

border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);}

Chenar cu o singura culoare!Chenar cu doua culori!Chenar cu trei culori!Chenar cu patru culori!

Exemplul 5Ilustreaz cum se stabilete culoarea pentru latura dreapt a chenarului.

p {border-style:solid;border-right-color:#ff0000;}

Acesta este un paragraf.

Toate proprietile CSS pentru chenareProprietate Descriere Valori

border Seteaz toate proprietile ntr-o singur declaraie

border-widthborder-styleborder-color

border-bottomSeteaz toate proprietile laturii de jos a chenarului cu o singur declaraie

border-bottom-widthborder-bottom-styleborder-bottom-color

72

border-bottom-color Stabilete culoarea laturii de jos border-colorborder-bottom-style Stabilete stilul laturii de jos border-styleborder-bottom-width Stabilete grosimea laturii de jos border-width

border-color Stabilete culoarea ntregului chenar

color_namehex_numberrgb_numbertransparent

border-left Stabilete toate proprietile laturii stngi cu o singur declaraie

border-left-widthborder-left-styleborder-left-color

border-left-color Stabilete culoarea laturii stngi border-colorborder-left-style Stabilete stilul laturii stngi border-styleborder-left-width Stabilete grosimea laturii stngi border-width

border-right Stabilete toate proprietile laturii drepte cu o singur declaraie

border-right-widthborder-right-styleborder-right-color

border-right-color Stabilete culoarea laturii drepte border-colorborder-right-style Stabilete stilul laturii drepte border-styleborder-right-width Stabilete grosimea laturii drepte border-width

border-style Stabilete stilul pentru ntregul chenar

nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset

border-top Stabilete toate proprietile laturii de sus cu o singur declaraie.

border-top-widthborder-top-styleborder-top-color

73

border-top-color Stabilete culoarea laturii de sus border-colorborder-top-style Stabilete stilul laturii de sus border-styleborder-top-width Stabilete grosimea laturii de sus border-width

border-width Stabilete grosimea pentru ntreg chenarul

thinmediumthicklength

14. Linii exterioare (outlines)

O linie exterioar (outline) este o linie trasat n jurul elementului, n afara chenarului. Proprietile unei linii exterioare precizeaz stilul, culoarea i limea.

Exemple

Exemplul 1Ilustreaz cum se traseaz o linie exterioar (verde, groas, punctat) n jurul unui element, n afara chenarului.

p {border:1px solid red;outline:green dotted thick;}

74

Obs: Internet Explorer 8 accepta proprietatea outline daca este specificat !DOCTYPE in codul html.

Exemplul 2Ilustreaz cum se stabilete stilul unei linii exterioare.

p {border:1px solid red}p.dotted {outline-style:dotted}p.dashed {outline-style:dashed}p.solid {outline-style:solid}p.double {outline-style:double}p.groove {outline-style:groove}p.ridge {outline-style:ridge}p.inset {outline-style:inset}p.outset {outline-style:outset}

O linie exterioar punctata.O linie exterioara intrerupta.O linie exterioara plina.O linie exterioara dubla.O linie exterioara grooveO linie exterioara ridgeO linie exterioara insetO linie exterioara outsetObs: Internet Explorer 8 accepta proprietatea outline daca este specificat !DOCTYPE.

75

Exemplul 3Ilustreaz cum se stabilete culoarea unei linii exterioare.

p {border:1px solid red;outline-style:dotted;outline-color:#00ff00;}

Note: Internet Explorer 8 accepta proprietatea outline daca este specificat !DOCTYPE.

Exemplul 4Ilustreaz cum se stabilete grosimea unei linii exterioare.

p.one{border:1px solid red;outline-style:solid;outline-width:thin;}p.two{

76

border:1px solid red;outline-style:dotted;outline-width:3px;}

Un text intr-un paragraf.Un text in alt paragraf.

Toate proprietile CSS pentru linii exterioareProprietate Descriere Valori

outline Stabilete toate proprietile liniei exterioare ntr-o singur declaraie

outline-coloroutline-styleoutline-width

outline-color Stabilete culoarea liniei exterioare

color_namehex_numberrgb_numberinvert

outline-style Stabilete stilul liniei exterioare

nonedotteddashedsoliddoublegrooveridgeinsetoutset

outline-width Stabilete grosimea liniei exterioare

thinmediumthicklength

15. Margini

Proprietatea CSS margin definete spaiul din jurul unui element (n afara chenarului). Marginea nu are culoare de fundal i este complet transparent.

77

Cele patru margini ale elementului pot fi modificate n mod independent, folosind proprieti separate. O proprietate scurt poate fi, de asemenea, folosit pentru a schimba toate cele patru margini simultan.

Valori posibileValoareDescriere

auto Marginile sunt stabilite de ctre browser. Rezultatul depinde de browser.length Definete o margine fix (n pixeli, puncte, em, etc.) % Definete o margine n procente fa de elementul coninutObs. Este posibil utilizarea valorilor negative, pentru a suprapune coninutul.

Laturile marginiin CSS, este posibil s definim margini diferite pe cele patru laturi:

p{background-color:yellow;}p.margin{margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;}

Acesta este un paragraf cu margini nedefinite.Acesta este un paragraf cu margini definite.

Proprietatea prescurtatPentru a scurta codul, pot fi specificate cele patru margini ntr-o singur declaraie, utiliznd proprietatea scurt margin:

78

p{background-color:yellow;}p.margin{margin:100px 50px;}

Acest paragraf nu are marginile definite.Acest paragraf are marginile definite.

Proprietatea margin poate avea ntre una i patru valori.

margin:25px 50px 75px 100px; o marginea de sus este 25pxo marginea dreapt este 50pxo marginea de jos este 75pxo marginea stng este 100px

margin:25px 50px 75px;o marginea de sus este 25pxo marginile din dreapta i din stnga sunt 50pxo marginea de jos este75px

margin:25px 50px;o marginile de sus i de jos sunt 25pxo marginile din dreapta i din stnga sunt 50px

margin:25px;o toate cele patru margini sunt 25px

Exemple

79

Exemplul 1Ilustreaz cum se stabilete marginea de sus a unui text utiliznd o valoare n cm.

p.ex1 {margin-top:2cm}

Un paragraf cu margini nedefinite.Un paragraf cu marginea de sus de 2cm.Un paragraf cu margini nedefinite.

Exemplul 2Ilustreaz cum se stabilete marginea de jos a unui text utiliznd o valoare procentual.

p.bottommargin {margin-bottom:25%}

Acest paragraf are margini nedefinite.Acest paragraf are marginea de jos definita.Acest paragraf are margini nedefinite.

Toate proprietile pentru marginiProprietate Descriere Valorimargin Proprietate prescurtat pentru a seta

simultan toate marginilemargin-topmargin-right

80

margin-bottommargin-left

margin-bottom Stabilete marginea de jos

autolength%

margin-left Stabilete marginea stng

autolength%

margin-right Stabilete marginea dreapt

autolength%

margin-top Stabilete marginea de susautolength%

16. Padding

Proprietatea CSS padding definete spaiul dintre chenar i coninut. Acest spaiu este afectat de culoarea de fundal a elementului. Spaiul drept, stng, de sus i de jos (relativ la coninut) poate fi modificat n mod independent folosind proprieti diferite. Exist i varianta scurt a proprietii pentru a modifica cele patru spaii simultan.

Valori posibileValoare Descrierelength Definete un spaiu fix (n pixel, puncte, em, etc.)% Definete un spaiu n valoare procentual relativ la coninut

Modificarea individual a celor patru spaiin CSS, putei specifica spaii diferite pe cele patru laturi ale elementului, ca n exemplul urmtor:

p{background-color:yellow;}p.padding{

81

padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;}

Acesta este un paragraf cu spatiul nedefinit.Acest paragraf are cele patru spatii definite cu proprietatea padding.

Proprietatea scurtPentru a scurta codul, putei specifica toate cele patru spaii ntr-o singur proprietate numit simplu padding, ca n exemplul urmtor :

p{background-color:yellow;}p.padding{padding:25px 50px;}

Acesta este un paragraf cu spatiul nedefint.Acest paragraf are cele patru spatii definite cu proprietatea padding.

Proprietatea padding poate avea ntre una i patru valori:

padding:25px 50px 75px 100px; o spaiul de sus are25px

82

o spaiul din dreapta are 50pxo spaiul de jos are 75pxo spaiul din stnga are100px

padding:25px 50px 75px;o spaiul de sus are 25pxo spaiile din dreapta i din stnga au 50pxo spaiul de jos are 75px

padding:25px 50px;o spaiile de sus i de jos au 25pxo spaiile din dreapta i din stnga au 50px

padding:25px;o toate cele patru spaii au 25px

Exemple

Exemplul 1Ilustreaz utilizarea proprietii scurte pentru a seta spaiile unui element..

p.ex1 {padding:2cm}p.ex2 {padding:0.5cm 3cm}

Acest text are cele patru spatii egale. Spatiul pe fiecare latura a textului este de 2cm.Acest text are spatiile de sus si de jos de cate 0.5cm si spatiile din dreapta si din stanga de cate 3cm.

Exemplul 2Ilustreaz cum se stabilete spaiul din stnga pentru un paragraf.

83

p.padding {padding-left:2cm}p.padding2 {padding-left:50%}

Acest text nu are spatiul din stanga definit.Acest paragraf are spatiul din stanga de 2 cm.Acest paragraf are spatiul din stanga de 50%.

Exemplul 3Ilustreaz cum se stabilete spaiul din dreapta pentru un paragraf.

p.padding {padding-right:2cm}p.padding2 {padding-right:50%}

Acesta este un text care nu are definit spatiul din dreapta. Acesta este un text care nu are definit spatiul din dreapta. Acesta este un text care nu are definit spatiul din dreapta.Acest text are spatiul din dreapta de 2 cm. Acest text are spatiul din dreapta de 2 cm. Acest text are spatiul din dreapta de 2 cm.Acest text are spatiul din dreapta de 50%. Acest text are spatiul din dreapta de 50%. Acest text are spatiul din dreapta de 50%.

Exemplul 4Ilustreaz cum se stabilete spaiul de sus pentru un paragraf.

84

p.padding {padding-top:2cm}p.padding2 {padding-top:50%}

Acest text nu are spatiul de sus definit. Acest text nu are spatiul de sus definit. Acest text nu are spatiul de sus definit. Acest text nu are spatiul de sus definit.Acest text are spatiul de sus de 2 cm. Acest text are spatiul de sus de 2 cm. Acest text are spatiul de sus de 2 cm. Acest text are spatiul de sus de 2 cm. Acest text are spatiul de sus de 25%. Acest text are spatiul de sus de 25%. Acest text are spatiul de sus de 25%. Acest text are spatiul de sus de 25%.

Exemplul 5Ilustreaz cum se stabilete spaiul de jos pentru un paragraf.

p.padding {padding-bottom:2cm}p.padding2 {padding-bottom:50%}

Acest text nu are spatiul de jos definit. Acest text nu are spatiul de jos definit. Acest text nu are spatiul de jos definit. Acest text nu are spatiul de jos definit.Acest text are spatiul de jos de 2 cm. Acest text are spatiul de jos de 2 cm. Acest textare spatiul de jos de 2 cm. Acest text are spatiul de jos de 2 cm.Acest text are spatiul de jos de 25%. Acest text are spatiul de jos de 25%. Acest text

85

are spatiul de jos de 25%. Acest text are spatiul de jos de 25%.Acest text nu are spatiul de jos definit. Acest text nu are spatiul de jos definit. Acest text nu are spatiul de jos definit. Acest text nu are spatiul de jos definit.

Toate proprietile CSS pentru paddingProprietate Descriere Valori

padding Proprietatea scurt pentru a stabili toate spaiile cu o singur declaraie

padding-toppadding-rightpadding-bottompadding-left

padding-bottom Stabilete spaiul de jos

length%

padding-left Stabilete spaiul din stnga

length%

padding-right Stabilete spaiul din dreapta

length%

padding-top Stabilete spaiul de sus

length%

17. Gruparea i imbricarea selectorilor

Gruparea selectorilorn foile de stil se regsesc deseori elemente care au acelai stil. Exemplu:h1{color:green;}h2{color:green;}p{

86

color:green;}Pentru a micora codul, putei grupa selectorii ntr-o list n care selectorii sunt separai prin virgul.n exemplul urmtor, selectorii de mai sus au fost grupai:

h1,h2,p{color:green;}

Un titlu!Un titlu mai mic!Un paragraf oarecare.

Imbricarea selectorilorEste posibil s aplicai un stil unui selector aflat n interiorul unui alt selector.n exemplul urmtor, este precizat un stil pentru toate elementele p, i un alt stil pentru elementele p aflate n clasa "marked":

p{color:blue;text-align:center;}.marked{background-color:blue}.marked p{color:white;}

87

Acest paragraf are culoarea albastra si este aliniat la centru.

Acest paragraf din clasa marked trebuie sa aiba culoarea alba.

Paragrafele declarate in clasa "marked" pastreaza stilul de aliniere, dar textul are o culoare diferita.

18. Setarea dimensiunilor unui element

Dimensiunile unui element pot fi setate cu proprietile height i width.

Exemple

Exemplul 1Ilustreaz cum se pot stabili dimensiunile unui element.

img.normal {height:auto}img.big {height:150px}p.ex{height:100px;width:100px;}

88

Inaltimea si latimea acestui paragraf sunt de 100px.Un text intr-un paragraf. Un text intr-un paragraf. Un text intr-un paragraf.Un text intr-un paragraf. Un text intr-un paragraf. Un text intr-un paragraf. Un text intr-un paragraf.

Exemplul 2Ilustreaz cum se seteaz nlimea unui element folosind o valoare procentual.

img.normal {height:auto}img.big {height:50%}img.small {height:10%}

Exemplul 3Ilustreaz cum se seteaz limea unui element folosind o valoare n pixeli.

img{

89

width: 200px}

Exemplul 4Ilustreaz cum se seteaz nlimea maxim a unui element.

p.ex{max-height:100px;}

Inaltimea maxima a acestui paragraf este setata la 100px. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf.

Exemplul 5Ilustreaz cum se seteaz limea maxim a unui element folosind o valoare procentual. Textul va ocupa 50% din limea ferestrei browserului, chiar dac redimensionai fereastra.

p{max-width: 50%

90

}

Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este untext. Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text.

Exemplul 6Ilustreaz cum se seteaz nlimea minim a unui element.

p.ex{min-height:100px;}

Inaltimea minima a cestui paragraf este setata la 100px.Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf.

Exemplul 7Ilustreaz cum se seteaz limea minim a unui element folosind o valoare n pixeli.

p.ex{

91

min-width:50px;}

Latimea minima a acestui paragraf este setata la 50px.Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf.

Toate proprietile CSS pentru dimensiuniProprietate Descriere ValoriProperty Description Values

height Stabilete nlimea unui elementautolength%

max-height Stabilete nlimea maxim a unui element

nonelength%

max-width Stabilete limea maxim a unui elementnonelength%

min-height Stabilete nlimea minim a unui element

length%

min-width Stabilete limea minim a uni element length%width Stabilete limea unui element

autolength%

19. Proprietile display i visibilityProprietatea display specific dac/cum este afiat un element, iar proprietatea visibility specific dac elementul este vizibil sau ascuns.

92

Ascunderea unui element Se poate realiza setnd proprietatea display la valoarea none sau proprietatea visibility la valoarea hidden. Cele dou metode produc rezultate diferite.Proprietatea visibility:hidden ascunde elementul, dar el va ocupa acelai spaiu n pagin afectnd aspectul acesteia:

h1.hidden {visibility:hidden}

Acesta este un titlu vizibilAcesta este un titlu ascunsObservati ca titlul ascuns ocupa spatiu in pagina.

Proprietatea display:none ascunde elementul astfel nct acesta nu va mai ocupa spaiu n pagin.

h1.hidden {display:none}

Acesta este un titlu vizibil Acesta este un titlu ascuns Observati ca titlul ascuns nu ocupa spatiu in pagina.

Afiarea elementelor bloc i a elementelor inlineUn element bloc ocup ntreaga lime disponibil n pagin i are o ntrerupere de linie nainte i dup el.

93

Exemple de elemente bloc:

Un element inline ocup numai limea necesar i nu foreaz ntreruperile de linie.Exemple de elemente inline:

Schimbarea modului de afiare a unui elementSchimbarea unui element inline ntr-un element bloc, i reciproc, poate fi util pentru a face pagina s arate ntr-un anumit fel, respectnd standardele web.Exemplul urmtor afieaz o list de link-uri ca elemente inline, crend un meniu orizontal:

li{display:inline}

Lista de linkuri este afisata ca un meniu orizontal:

YahooGoogleMicrosoftOracle

Exemplul urmtor afieaz elementele span ca elemente bloc:

94

span{display:block;}

NirvanaRecord: MTV Unplugged in New YorkYear: 1993RadioheadRecord: OK ComputerYear: 1997

Obs: Schimbnd modul de afiare a unui element, nu schimbm i tipul acestuia. De exemplu, un element inline cu proprietatea display:block nu poate avea un element bloc n interiorul lui.

Exemple

Exemplul 1Ilustreaz cum se afieaz un element bloc ca element inline.

p {display: inline}

Deoarece proprietatea display a elementului p a fost setata la inlineintre aceste doua paragrafe nu mai exista intreruperile de linie.

95

Exemplul 2Ilustreaz cum se afieaz un element inline ca element bloc.

span{display:block;}

Deoarece proprietatea display a elementului span a fost setata la blockintre aceste doua elemente exista o intrerupere de linie.

Exemplul 3Ilustreaz cum se poate elimina o linie dintr-un tabel.

tr.collapse {visibility:collapse}

Tabelul normal

AmaliaPetrescu

GeorgeMoraru

96

Tabelul cu a doua linie setata la collapse.

AmaliaPetrescu

GeorgeMoraru

Nota: Internet Explorer nu recunoaste valoarea "collapse".

20. Poziionarea unui element

Proprietatea position v permite s stabilii poziia unui element n pagina web. Elementele pot fi poziionate utiliznd proprietile top, bottom, left, i right, dar ele nu vor funciona dac nu setai mai nti proprietatea position. De asemenea, cele patru proprieti lucreaz diferit, n funcie de metoda de poziionare. Sunt patru metode diferite de poziionare a unui element.

Poziionarea staticEste modul implicit de poziionare a elementelor HTML. Un element poziionat static respect ntotdeauna fluxul normal al paginii web. Elementele poziionate static nu sunt afectate de proprietile top, bottom, left, i right.Poziionarea fixUn element cu poziionare fix este poziionat relativ la fereastra browserului i nu se va deplasa chiar dac fereastra este derulat.Exemplu:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

p.pos_fixed{color:red;position:fixed;top:30px;right:5px;}

Un text cu pozitia fixaNote: Internet Explorer accepta pozitionarea fixa numai daca exista declaratia !DOCTYPE.Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal Un text normal

Elementele cu poziia fix sunt nlturate din fluxul normal al documentului. Documentul i alte elemente se comport ca i cum elementele cu poziia fix nu ar exista. Elementele cu poziia fix se pot suprapune peste alte elemente.

Poziionarea relativUn element cu poziionare relativ este poziionat relativ la poziia lui normal n document. Exemplu:

h2.pos_left{position:relative;

98

left:-30px;}h2.pos_right{position:relative;left:30px;}

Acest titlu are pozitionarea statica (implicita)Acest titlu este deplasat la stanga cu 30px fata de pozitia lui normalaAcest titlu este deplasat la dreapta cu 30px fata de pozitia lui normala

Coninutul unui element poziionat relativ poate fi mutat i suprapus peste alte elemente, dar spaiul rezervat elementului este pstrat n document.Exemplu:

h2.pos_top{position:relative;top:-40px;}

Acest titlu are pozitia implicitaAcest titlu este mutat in sus cu 40px fata de pozitia lui normala

99

Elementele poziionate relativ sunt folosite frecvent ca blocuri container pentru elementele cu poziionare absolut.

Poziionarea absolutUn element cu poziionare absolut este poziionat relativ fa de primul su printe care nu este poziionat static. Dac nu este gsit nici-un astfel de element, poziionarea se face fa de elementul .Exemplu:

h2{position:absolute;left:100px;top:150px;}

Acest titlu are o pozitionare absoluta la 150 px fata de inceputul documentului si 100px fata de marginea stanga a documentuluiAcest paragraf este pozitionat static (implicit).

Un element cu poziionarea absolut poate fi plasat oriunde in pagina. Aceste elemente sunt ndeprtate din fluxul normal i documentul se comport ca i cum nu ar exista. Elementele cu poziionare absolut se pot suprapune peste alte elemente.

Suprapunerea elementelorCnd elementele sunt poziionate n afara fluxului normal al documentului, ele pot acoperi alte elemente. Proprietatea z-index specific ordinea elementelor suprapuse: care element va fi plasat n faa sau n spatele celorlalte elemente. Ordinea n list poate fi pozitiv sau negativ.Exemplu:

100

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

Acesta este un titlu pozitionat static

Deoarece imaginea are proprietatea z-index egala cu -1, va fi afisata in spatele textului.

Un element cu indexul mai mare va fi plasat ntotdeauna n faa elementului cu indexul mai mic.

Exemple

Exemplul

Documents

Curs Css in Romana