curs-css-

8/3/2019 curs-CSS-

1/139

7

CUPRINS

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

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

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

Selectorul class ................................................................. 154. Cum inserm CSS n documentele HTML............................. 16

Foaie extern de stil .............................................................. 16Foaie intern de stil ............................................................... 16Stiluri inline .......................................................................... 17Foi multiple de stiluri ............................................................ 17

5. Formatarea background-ului.................................................. 18

Proprietateabackground-color

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

6. Formatarea textului ............................................................... 25

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

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

8/3/2019 curs-CSS-

2/139

8

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

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

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

11. Tabele..................................................................................50Chenarele tabelului ................................................................ 50Proprietatea border-collapse ........................................51Dimensiunile unui tabel.........................................................52

Alinierea textului din tabel.....................................................53Spaiul dintre chenar i coninut (table padding).....................56Culoarea tabelelor..................................................................57Exemple ................................................................................58

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

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

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

8/3/2019 curs-CSS-

3/139

9

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

Laturile marginii ................................................................... 78Proprietatea prescurtat ......................................................... 78

Exemple................................................................................ 79Toate proprietile pentru margini ......................................... 8016. Padding ............................................................................... 81

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

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

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

19. Proprietile display i visibility ............................ 92Ascunderea unui element ...................................................... 92

Afiarea elementelor bloc i a elementelor inline ................... 93Schimbarea modului de afiare a unui element ...................... 93Exemple................................................................................ 95

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

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

22. Alinierea orizontal ........................................................... 114Alinierea elementelor bloc................................................... 114Alinierea la centru folosind proprietatea margin ............... 115

Alinierea la stnga i la dreapta folosind proprietateaposition ......................................................................... 115

8/3/2019 curs-CSS-

4/139

10

Alinierea la stnga i la dreapta folosind proprietatea float............................................................................................ 116

23. Pseudo-clasele CSS ........................................................... 117Sintaxa.................................................................................117

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

Selectarea primului element

.....................................118Selectarea primului element din toate elementele

........................................................................................118Selectarea tuturor elementelor din primul element

care este descendent al unui alt element ........................... 119

Selectarea primului item dintr-o list................................ 120Selectarea primului descendent al tuturor elementelorlidintr-o list ...................................................................... 120

Pseudo-clasa :lang........................................................... 121Exemple ..............................................................................121Pseudo-clasele CSS ............................................................. 123

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

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

26. Galerie de imagini..............................................................13327. Opacitatea/transparena unei imagini.................................. 13528. Imagini sprite.....................................................................137

Crearea unei liste de navigare ................................ .............. 13829. Atribute selector ................................................................ 141Bibliografie .............................................................................145

8/3/2019 curs-CSS-

5/139

11

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 externepot 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 titlu

Acesta este un paragraf.

Cnd taguri precumi atributele de culoare au fost adugate nspecificaiile HTML 3.2, a nceput comarul pentru proiectanii web.Dezvoltarea site-urilor mari, n care informaiile despre font i culoare trebuiauadugate pe fiecare pagin, a devenit un proces lung i costisitor.Pentru a rezolva aceast problem, consoriul World Wide Web (W3C) a creatCSS.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 felputei schimba uor aspectul tuturor paginilor web dintr-un site modificnd unsingur fiier.

2. Sintaxa

Exemple

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

Acest titlu are 35 ptAcest titlu este verde

8/3/2019 curs-CSS-

6/139

12

Acest paragraf are marginea stanga de 40pixeli

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 altserver:

Acesta este un titlu 1

Puteti vedea continutul foii de stil careformateaza textul la adresa:

Link

8/3/2019 curs-CSS-

7/139

13

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. Fiecareproprietate 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 pecte 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;}

8/3/2019 curs-CSS-

8/139

14

Buna ziua!

Acest paragraf este stilizat cu CSS.

Comentarii CSSComentariile se folosesc pentru a explica codul i pot fi utile cnd modificaicodul surs pe parcurs. Comentariile sunt ignorate de ctre browsere.Un comentariu CSS ncepe cu "/*", i se termin cu "*/", ca n exemplulurmtor:

/*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 idi class

Pe lng setarea stilului unui element HTML, CSS v permite s specificai doiselectori proprii numii idi class.

Selectorul idSelectorul ideste utilizat pentru a specifica stilul unui singur element .Selectorul idfolosete atributul idal unui element HTML, i este definit cu

"#".Exemplu: Stilul urmtor va fi aplicat elementului care are atributulid="par1".

#par1{text-align:center;color:red}

8/3/2019 curs-CSS-

9/139

15

Buna ziua!

Acest paragraf nu este afectat de declaratia de

stil.

Obs. Nu ncepei numele idcu un numr deoarece nu va lucra nMozilla/Firefox.

Selectorul classAcest selector este utilizat pentru a specifica stilul unui grup de elemente.

Astfel, putei seta un stil particular pentru toate elementele HTML care faceparte din aceeai clas. Selectorul class folosete atributul HTML class ieste 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 centrucu CSS

Acest 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 elementelep din clasa center vor fi aliniate lacentru:

p.center{

8/3/2019 curs-CSS-

10/139

16

text-align:center;}

Acest titlu nu este afectat destilul CSS

Acest paragraf este aliniat lacentru cu CSS.

Obs. Nu ncepei un nume de clas cu un numr deoarece numai InternetExplorer 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 maimultor pagini. Cu o foaie CSS extern, putei modifica aspectul ntregului sitemodificnd un singur fiier. Fiecare pagin trebuie s se lege la foaia de stilfolosind taguln interiorul seciunii head:

O foaie extern de stil poate fi scris n Notepad, nu trebuie s conin tagurihtml 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")}

Obs. Nu lsai spaii ntre valoarea proprietii i unitatea de msur! Dacscriei " margin-left:20 px" (n loc de "margin-left:20px") vamerge n IE, dar nu n Firefox sau Opera.

Foaie intern de stil

8/3/2019 curs-CSS-

11/139

17

O foaie intern de stil trebuie folosit cnd un singur document are un anumitstil. Foaia intern de stil se definete n seciunea heada paginii HTMLfolosind 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 stilinline, folosii atributul style n tagul respectiv. Atributul style poateconine orice proprieti CSS. Exemplul urmtor ilustreaz cum se poateschimba culoarea i marginea stng a unui paragraf:

Acesta esteun 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 urmtoareletrei 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}Dac pagina care conine aceast foaie intern de stil se leag i la foaia de stilextern, atunci proprietile pentru h3 vor fi:

8/3/2019 curs-CSS-

12/139

18

color:red;text-align:right;font-size:20ptCuloarea este motenit din foaia extern, iar alinierea i dimensiunea fontuluisunt nlocuite cu valorile din foaia intern de stil.

Stilurile pot fi specificate: ntr-un element HTML n seciunea heada 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 stilvirtual dup urmtoarele reguli, unde prioritatea crete odat cu numrul deordine:

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 stilulintern!

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

Proprietateabackground-colorProprietatea specific culoarea de fundal a unui element. Culoarea de fundal

pentru ntreaga pagin este definit n selectorulbody ca n exemplul urmtor:

8/3/2019 curs-CSS-

13/139

19

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 divau diferite culori de fundal:h1{

background-color:#6495ed;}

p

{background-color:#e0ffff;}div{

background-color:#b0c4de;}

8/3/2019 curs-CSS-

14/139

20

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.
Proprietateabackground-image

Aceast proprietate definete imaginea folosit ca fundal pentru un element.Implicit, imaginea se repet pe suprafaa ntregului element. Imaginea de fundala 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.

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

8/3/2019 curs-CSS-

15/139

21

body{

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

Buna ziua!

Proprietateabackground-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), folosiivaloarea 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,darincomodeaza cititorul!

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

8/3/2019 curs-CSS-

16/139

22

{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 sipozitionata in afara textului.

In acest exemplu,marginea dreapta a textului a

fost setata la 200 pixeli. In acest fel, textul nu seva suprapune cu imaginea.

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

body{

background:#ffff00 url('tree.jpg') no-repeat topright;

margin-right:200px;}

Buna ziua!

Imaginea este afisata o singura data sipozitionata in afara textului.

In acest exemplu,marginea dreapta a textului a

fost setata la 200 pixeli. In acest fel, textul nu seva suprapune cu imaginea.

8/3/2019 curs-CSS-

17/139

23

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 valorileprezente sunt scrise n aceast ordine.

Exemple

Exemplul 1Ilustreaz cum se stabilete o imagine de fundal fix. Imaginea nu se va deplasaodat 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 sfarsitulpaginii.

Imaginea de fundal este fixa. Incercati samicsorati fereastra si sa derulati pana la sfarsitulpaginii.

8/3/2019 curs-CSS-

18/139

24

Imaginea de fundal este fixa. Incercati samicsorati fereastra si sa derulati pana la sfarsitulpaginii.

8/3/2019 curs-CSS-

19/139

25

center centercenter rightbottom leftbottom centerbottom right

x% y%xpos ypos

background-repeat

Stabilete dac i cum va firepetat imaginea de fundal

repeatrepeat-xrepeat-yno-repeat

6. Formatarea textului

Culoarea textuluiCuloarea textului este stabilit cu proprietatea color. Culoarea poate fispecificat 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 selectorulbody.Exemplu:body {color:red}h1 {color:#00ff00}

p.ex {color:rgb(0,0,255)}


Acesta este un paragraf obisnuit si are culoarearosie. Culoarea implicita a textului paginii estedefinita in selectorul body.

Acesta este un paragraf din clasa "ex"si are culoarea albastra.

8/3/2019 curs-CSS-

20/139

26

Obs. Conform cerinelor W3C, dac ai definit proprietatea color nbody,trebuie s definii i proprietateabackground-color.

Alinierea textului

Proprietatea text-align este utilizat pentru a seta alinierea orizontal atextului. 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 CSS

Ianuarie, 2010

Daca asi sti ca efortul pentruscrierea unui roman ma poate costa viata, mi-asi luatoate masurile de siguranta pentru a inlatura oeventualitatecum ar fi boala din care sa mi se traga moartea.Darunica masura hotaratoare, aceea de a renunta lascris, nu asi lua-o.
Marin Preda

Obs:Modificati dimensiunea ferestreibrowserului pentru a vedea cum arata aliniereajustified.

Decorarea textuluiProprietatea text-decoration este utilizat pentru a stabili decorarea unuitext. Cel mai des este utilizat pentru a nltura sublinierea link-urilor dinmotive de aspect, ca n exemplul urmtor:

a {text-decoration:none}

8/3/2019 curs-CSS-

21/139

27

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 3


Obs: Valoarea "blink" nu este recunoscutade IE, Chrome, sau Safari.

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

Transformarea textuluiProprietatea text-transformeste utilizat pentru a specifica literele mici iliterele mari dintr-un text.Poate fi utilizat pentru a transforma tot textul n minuscule sau majuscule, saupentru 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}

8/3/2019 curs-CSS-

22/139

28

Acesta este un text scris cu

litere mari.

Acesta este un text scris culitere mici.

Acesta este un text in carefiecare cuvant incepe cu litera mare.

Indentarea textuluiProprietatea text-indentation este utilizat pentru a specifica indentareaprimei linii dintr-un text. Exemplu:p {text-indent:50px}

Daca asi sti ca efortul pentru scrierea unuiroman ma poate costa viata, mi-asi lua toate masurilede siguranta pentru a inlatura o eventualitatecum ar fi boala din care sa mi se traga moartea.Darunica masura hotaratoare, aceea de a renunta lascris, nu asi lua-o.
Marin Preda

Exemple

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

h1 {letter-spacing:2px}

8/3/2019 curs-CSS-

23/139

29

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 dintrelinii este intre 110% si 120%.

Acesta este un paragraf cu distanta dintre liniinormala.

Acesta este un paragraf cu distanta dintre linii

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

Acesta este un paragraf cu distanta dintre liniimarita.Acesta este un paragraf cu distanta dintre liniimarita.

8/3/2019 curs-CSS-

24/139

30

Acesta este un paragraf cu distanta dintre liniimarita.

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 dreaptala stanga.

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

p{word-spacing:30px;

}

Acesta este un text cu distanta dintre cuvintemarita.

8/3/2019 curs-CSS-

25/139

31

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 esteun 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}img.super {vertical-align:super}

O imagine in interiorul unuiparagraf, cu aliniere verticala implicita.

8/3/2019 curs-CSS-

26/139

32

O imagine ininteriorul unui paragraf,cu aliniere la marginea desus a textului.

O imagine ininteriorul unui paragraf, cu aliniere la marginea dejos a textului.

Toate proprietile CSS pentru formatarea textuluiProprietate Descriere Valori

color Seteaz culoarea textului colordirection Seteaz direcia textului ltr

rtl

line-height Seteaz distana dintre linii

normalnumber

length

%letter-spacing

Mrete sau micoreaz spaiul dintrecaractere

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-unelement

length%

text-shadow

Adaug umbr unui textnonecolorlength

text-transform Controleaz literele unui element

nonecapitalizeuppercaselowercase

vertical-align Seteaz alinierea vertical a unui element

baselinesub

8/3/2019 curs-CSS-

27/139

33

supertoptext-topmiddlebottom

text-bottomlength%

white-space

Seteaz spaiul alb din interiorul unuielement

normalprenowrap

word-spacing

Mrete sau micoreaz spaiul dintrecuvinte

normallength

8. Fonturi

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

Familiile de fonturi n CSS

nCSS, 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")Familiageneric

Familia specific Descriere

SerifTimes New RomanGeorgia

Fonturile de tip serif au linii mici lasfritul unora dintre caractere

Sans-serif ArialVerdana

"Sans" nseamn fr aceste fonturinu au linii la sfritul caracterelor

Monospace Courier NewLucida Console

Toate caracterele monospace au aceeainlime

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 cufontul pe care l dorii i terminai cu o familie generic.

8/3/2019 curs-CSS-

28/139

34

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 prinvirgul.Exemplu:.

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

Familiile de fonturi in CSS

Acest paragraf foloseste fontulTimes New Roman.

Acest paragraf foloseste fontulArial.

Proprietatea font-styleAceast proprietate este utilizat frecvent pentru a seta textul italic. Proprietateaare 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}p.oblique {font-style:oblique}

8/3/2019 curs-CSS-

29/139

35

Acest paragraf este scris cu fontulnormal.

Acest paragraf este scris cu fontulitalic.

Acest paragraf este scris cu

fontul oblic.

Proprietatea font-sizeAceast proprietate stabilete dimensiunea unui text. Valoarea proprietii poatefi 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}



8/3/2019 curs-CSS-

30/139

36

Daca precizati dimensiunea fontului in pixeli, inFirefox, Chrome, si Safari textul va putea firedimensionat, iar in Internet Explorer nu.

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

Stabilirea dimensiunii textului n emPentru a evita problemele de redimensionare din Internet Explorer, muliproiectani 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 lapixeli 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 */



Daca specificati dimensiunea fontului in em, inInternet Explorer, Firefox, Chrome, si Safari textul

va putea fi redimensionat.

Dei textul arat la fel ca n exemplul precedent, el poate fi redimensionat norice 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 emSoluia care funcioneaz n toate browserele, este s stabilii n procente

dimensiunea implicit pentru elementulbody, ca n exemplul urmtor:

8/3/2019 curs-CSS-

31/139

37

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

p {font-size:0.875em}



Daca specificati dimensiunea fontului in procente

si em,textul va fi afisat la fel in toate browserelesi va putea fi redimensionat!

Exemple

Exemplul 1

Ilustreaz 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}





Exemplul 2

8/3/2019 curs-CSS-

32/139

38

Ilustreaz 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 toatecaracteristicile 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 esteun paragraf. Acesta este un paragraf. Acesta este un

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

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

8/3/2019 curs-CSS-

33/139

39

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

Toate proprietile pentru fonturi n CSSProprietate Descriere Valori

font

Seteaz toate proprietile

fontului ntr-o singur declaraie

ont-style

ont-variant

ont-weight

ont-size/line-height

ont-family

captioniconmenumessage-boxsmall-captionstatus-bar

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

font-size Specific dimensiunea fontului

xx-small

x-smallsmallmediumlargex-largexx-largesmallerlargerlength

%

font-style Specific stilul fontuluinormalitalicoblique

font-variant Specific dac textul este afiatsau nu cu majuscule mici

normalsmall-caps

font-weight Specific grosimea fontului

normalboldbolder

lighter100

8/3/2019 curs-CSS-

34/139

40

200300400500600

700800900

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 destarea 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

Nota: a:hover TREBUIE scrisa in definitiaCSS dupa a:link si a:visited pentru a fi

efectiva.

8/3/2019 curs-CSS-

35/139

41

Nota: a:active TREBUIE scrisa in definitiaCSS dupa a:hover pentru a fi efectiva.

Cnd stabilii stilul linkurilor, exist anumite reguli privind ordinea

declaraiilor: a:hovertrebuie scris dup a:link i a:visited a:activetrebuie scris dup a:hover

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

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

Acesta este un link

Culoarea fundaluluiProprietateabackground-color este utilizat pentru a specifica culoareade fundal a linkurilor.Exemplu:

a:link {background-color:#B2FF99;} /* linknevizitat */

a:visited {background-color:#FFFF85;} /* link vizitat*/

8/3/2019 curs-CSS-

36/139

42

a:hover {background-color:#FF704D;} /* mouse pestelink */a:active {background-color:#FF704D;} /* linkselectat */

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;}

8/3/2019 curs-CSS-

37/139

43

Plimbati mouse-ul peste linkuri pentru a vedea cumse schimba aspectul lor.

Acest link isi schimba

culoarea

Acest link isi schimba dimensiuneafontului

Acest link isi schimba culoarea defundal

Acest link isi schimba familia de

fonturi

Acest link isi schimbadecoratia

Exemplul 2

Ilustreaz cum se combin mai multe proprieti CSS pentru a afia link-urileca 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;}a:hover,a:active{

background-color:#7A991A;}

8/3/2019 curs-CSS-

38/139

44

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 proprietatealist-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:

CafeaCeaiPepsi

CafeaCeai

8/3/2019 curs-CSS-

39/139

45

Pepsi

Exemplu de list ordonat:

CafeaCeaiPepsi

CafeaCeai

Pepsi

Valorile proprietii pentru liste neordonate

Valoare Descriere

none Fr marcator

disc Implicit. Marcatorul este un cerc plincircle Marcatorul este un cerc golsquare Marcatorul este un ptrat

Valorile proprietii pentru liste ordonate

Valoare Descriere

armenian 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.)

georgianMarcatorul este un numr tradiional georgian (an, ban,gan, etc.)

lower-alpha Marcatorul este litera mica (a, b, c, d, e, etc.)

lower-greekMarcatorul este liter mic greceasc (alpha, beta,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.)

8/3/2019 curs-CSS-

40/139

46

upper-romanMarcatorul 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 proprietatealist-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 folosindlist-style ca n urmtorul exemplu:

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

8/3/2019 curs-CSS-

41/139

47

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 respectaceast 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;}

DiscuriCeai

Cafea

8/3/2019 curs-CSS-

42/139

48

CercuriCeaiCafea

PatratePaineOua

Fara marcatoriCartiCaiete

Marcatori cifreBaietiFete

Marcatori care incep cu zeroRochiiCamasi

Cifre romane miciCaseVile

Cifre romane mariCariociAcuarele

8/3/2019 curs-CSS-

43/139

49

Marcatori litere miciMereLamai

Marcatori litere mariGutuiPere

Litere grecesti miciCai

Iepuri

Litere latine miciLapteSuc

Litere latine mariCartiReviste

Marcatori armenestiPantaloniSacouri

Marcatori georgieniBereVin

8/3/2019 curs-CSS-

44/139

50

Toate proprietile pentru liste n CSSProprietate Descriere Valori

list-style

Precizeaz toate proprietile listei

ntr-o singur declaraie

list-style-type

list-style-positionlist-style-imagelist-style-image

Specific o imagine drept marcator URLnone

list-style-position

Specific dac marcatorii din listsunt n interiorul sau exteriorulconinutului

insideoutside

list-style-type Specific tipul marcatorilor din list

nonedisc

circlesquaredecimaldecimal-leading-zeroarmeniangeorgianlower-alphaupper-alpha

lower-greeklower-latinupper-latinlower-romanupper-roman

11. Tabele

Aspectul unui tabel HTML poate fi mbuntit folosind CSS.

Chenarele tabeluluiPentru a specifica chenarele unui tabel n CSS, se folosete proprietatea

border.Exemplul urmtor seteaz un chenar negru pentru tabel i pentru elementele thi td:

8/3/2019 curs-CSS-

45/139

51

table,th,td{

border:1px solid black;}

NumePrenume

PetrescuAmaliaManoliuCristian

Observai c tabelul din exemplul anterior are chenare duble. Acest lucru sentmpl deoarece elementele table, th, i tdau chenare separate. Pentru aafia un singur chenar pentru tabel, folosii proprietateaborder-collapse.

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

table{

border-collapse:collapse;}table, td, th{


8/3/2019 curs-CSS-

46/139

52

NumePrenumePetrescuAmalia

ManoliuCristian

Dimensiunile unui tabelCu ajutorul proprietilorwidth i height putei stabili limea i nlimea

unui tabel.n exemplul urmtor limea tabelului este stabilit la 100% i nlimeaelementelorth la 50px:

table,td,th{

border:1px solid black;

}table{width:100%;}th{height:50px;}

8/3/2019 curs-CSS-

47/139

53

Nume

PrenumeEconomiiPetrescuAmalia500RON

ManoliuCristian350RONBarbuDenisa300RON

SuciuAndrei450RON

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

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

table,td,th

{border:1px solid black;

8/3/2019 curs-CSS-

48/139

54

}td{text-align:right;}

NumePrenumeEconomii

PetrescuAmalia500RONManoliuCristian

350RONBarbuDenisa300RONSuciuAndrei450RON

Proprietateavertical-align stabilete alinierea vertical a textului, ipoate avea valorile top,bottomsaumiddle:

8/3/2019 curs-CSS-

49/139

55

table, td, th{


td{height:50px;

vertical-align:bottom;}

NumePrenumeEconomiiPetrescuAmalia

500RONManoliuCristian350RONBarbuDenisa300RONSuciuAndrei450RON

8/3/2019 curs-CSS-

50/139

56

Spaiul dintre chenar i coninut (table padding)Pentru a controla spaiul dintre chenarul i coninutul tabelului, utilizai nelementele tdi th proprietateapadding:

table, td, th{

border:1px solid black;}td{

padding:15px;}

NumePrenume

EconomiiPetrescuAmalia500RONManoliu

Cristian350RONBarbuDenisa300RON

SuciuAndrei

8/3/2019 curs-CSS-

51/139

57

450RON

Culoarea tabelelorn exemplul urmtor este precizat culoarea chenarului tabelului i culorilepentru textul i fundalul elementelorth:table, td, th

{border:1px solid green;}th{

background-color:green;color:white;}

NumePrenumeEconomii

PetrescuAmalia500RONManoliuCristian350RON

Barbu

8/3/2019 curs-CSS-

52/139

58

Denisa300RONSuciu

Andrei450RON

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;text-align:left;

padding-top:5px;padding-bottom:4px;background-color:#A7C942;color:#ffffff;}

#customers tr.alt td{

8/3/2019 curs-CSS-

53/139

59

color:#000000;background-color:#EAF2D3;}

CompaniaContactTara

Alfreds FutterkisteMaria AndersGermaniaBerglunds snabbkpChristina BerglundSuedia

Centro comercial MoctezumaFrancisco ChangMexicErnst HandelRoland MendelAustriaIsland TradingHelen BennettUKKniglich EssenPhilip CramerGermania

8/3/2019 curs-CSS-

54/139

60

Laughing Bacchus WinecellarsYoshi TannamuriCanada

Magazzini Alimentari RiunitiGiovanni RovelliItaliaNorth/SouthSimon CrowtherUK

Paris spcialitsMarie BertrandFranta

Exemplul 2Ilustreaz cum stabilii poziia denumirii tabelului (proprietatea caption).caption {caption-side:bottom;}

Tabel 1.1 ClientiCompaniaContactTara

Alfreds Futterkiste

8/3/2019 curs-CSS-

55/139

61

Maria AndersGermaniaBerglunds snabbkp

Christina BerglundSuediaCentro comercial MoctezumaFrancisco ChangMexic

Ernst HandelRoland MendelAustriaIsland TradingHelen BennettUK

Magazzini Alimentari RiunitiGiovanni RovelliItaliaNorth/SouthSimon CrowtherUK

12. Modelul box n CSS

8/3/2019 curs-CSS-

56/139

62

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 HTMLi 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 amplasmelementele 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 elementImportant: Cnd specificai n CSS proprietilewidth i height ale unuielement, stabilii de fapt dimensiunile numai pentru zona de coninut dindesenul 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;

8/3/2019 curs-CSS-

57/139

63

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 construimun element cu limea total de 250px:

div.ex

{width:220px;

padding:10px;border:5px solid gray;margin:0px;}

Linia de deasupra are 250pxlungime.
Lungimea totala a acestui element este tot250px.

Important: Acest exemplu nu va fi afisatcorect in IE!

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 dejos + chenarul de sus+ chenarul de jos + marginea de sus + marginea de jos

8/3/2019 curs-CSS-

58/139

64

Probleme de compatibilitate n browsereDac testai exemplul anterior n Internet Explorer, vei vedea c limea totalnu este de 250px.IE include padding-ul i bordura n lime, cnd proprietatea

widtheste setat.

Pentru a rezolva aceast problem, adugai n document declaraia DOCTYPEca n exemplul urmtor:

div.ex{width:220px;

padding:10px;border:5px solid gray;margin:0px;}

Linia de deasupra are 250pxlungime.

Acum latimea totala a acestui element este tot250px.

Note: In acest exemplu am adaugatdeclaratia DOCTYPE (deasupra elementului html),astfel incat va fi afisat corect in toate

browserele.

13. Chenare

8/3/2019 curs-CSS-

59/139

65

Proprietatea CSSborder definete chenarul din jurul unui element. Puteispecifica stilul i culoarea unui element al chenarului.

Stilul chenarului

Proprietateaborder-style specific ce fel de bordur va fi afiat.Obs. Nici-una din celelalte proprieti ale chenarului nu va avea efect, dacproprietateaborder-style nu este setat.Acest exemplu ilustreaz ce valori poate avea proprietateaborder-style icum 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.

Chenar tip inset.

Chenar tip outset.

Chenar ascuns.

Grosimea chenaruluiGrosimea chenarului se stabilete cu proprietateaborder-width.

8/3/2019 curs-CSS-

60/139

66

Grosimea se stabilete n pixeli sau se folosete una din valorile predefinite:thin,medium, sau thick.Obs: Proprietateaborder-width nu funcioneaz dac este utilizat singur;mai nti trebuie stabilit proprietateaborder-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.

Culoarea chenaruluiPentru a stabili culoarea chenarului se utilizeaz proprietateaborder-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".

8/3/2019 curs-CSS-

61/139

67

Obs: Proprietateaborder-color nu are nici-un efect dac nu a fost setatmai nti proprietateaborder-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;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;}

Acest paragraf are doua tipuri de chenare.

8/3/2019 curs-CSS-

62/139

68

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

p{

border-style:dotted solid;}

Acest paragraf are doua tipuri de chenare.

Proprietateaborder-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

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

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

8/3/2019 curs-CSS-

63/139

69

p{

border:5px solid red;

}

Acesta este un paragraf oarecare.

Cnd folosii varianta scurt, ordinea valorilor este: border-width border-style

border-colorNu conteaz ce valori lipsesc (oricumborder-style trebuie s apar), atttimp ct valorile prezente sunt specificate n aceast ordine.

Exemple

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

p{

border-style:solid;

border-top:thick double #ff0000;}

Acesta este un paragraf oarecare.

8/3/2019 curs-CSS-

64/139

70

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

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.

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

p{

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

8/3/2019 curs-CSS-

65/139

71

Note: Proprietatea "border-left-width"

functioneaza numai daca ati setat mai intaiproprietatea "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;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!

8/3/2019 curs-CSS-

66/139

72

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

p{

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


Toate proprietile CSS pentru chenareProprietate Descriere Valori

border Seteaz toate proprietile ntr-osingur declaraie

border-widthborder-style

border-color

border-bottomSeteaz toate proprietile laturii deos a chenarului cu o singur

declaraie

border-bottom-

width

border-bottom-

style

border-bottom-

color

border-bottom-color Stabilete culoarea laturii de jos border-color

border-bottom-style Stabilete stilul laturii de jos border-style

border-bottom-width Stabilete grosimea laturii de jos border-width

border-color Stabilete culoarea ntreguluichenar

color_name

hex_numberrgb_number

transparentborder-left Stabilete toate proprietile laturii border-left-width

8/3/2019 curs-CSS-

67/139

73

stngi cu o singur declaraie border-left-styleborder-left-color

border-left-color

Stabilete culoarea laturii stngi border-color

border-left-

style Stabilete stilul laturii stngi border-styleborder-left-width Stabilete grosimea laturii stngi border-width

border-right Stabilete toate proprietile laturiidrepte cu o singur declaraie

border-right-

width

border-right-style

border-right-

colorborder-right-color Stabilete culoarea laturii drepte border-color

border-right-style

Stabilete stilul laturii drepte border-style

border-right-width Stabilete grosimea laturii drepte border-width

border-style Stabilete stilul pentru ntregulchenar

nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset

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

border-top-width

border-top-style

border-top-colorborder-top-color

Stabilete culoarea laturii de sus border-color

border-top-style Stabilete stilul laturii de sus border-style

border-top-width Stabilete grosimea laturii de sus border-width

border-width Stabilete grosimea pentru ntregchenarul

thinmedium

thicklength

8/3/2019 curs-CSS-

68/139

74

14. Linii exterioare (outlines)

O linie exterioar (outline) este o linie trasat n jurul elementului, n afarachenarului. Proprietile unei linii exterioare precizeaz stilul, culoarea ilimea.

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;}

Obs: Internet Explorer 8 accepta

proprietatea outline daca este specificat !DOCTYPE incodul html.

Exemplul 2Ilustreaz cum se stabilete stilul unei linii exterioare.

8/3/2019 curs-CSS-

69/139

75

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

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 groove

O linie exterioara ridge

O linie exterioara inset

O linie exterioara outset
Obs: Internet Explorer 8 accepta proprietateaoutline daca este specificat !DOCTYPE.
Exemplul 3Ilustreaz cum se stabilete culoarea unei linii exterioare.

p{

8/3/2019 curs-CSS-

70/139

76

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

Note: Internet Explorer 8 acceptaproprietatea 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{

border:1px solid red;

outline-style:dotted;outline-width:3px;}

Un text intr-un paragraf.

Un text in alt paragraf.

8/3/2019 curs-CSS-

71/139

77

Toate proprietile CSS pentru linii exterioareProprietate Descriere Valori

outline Stabilete toate proprietile linieiexterioare ntr-o singur declaraie

outline-color

outline-styleoutline-width

outline-color Stabilete culoarea liniei exterioare

color_name

hex_number

rgb_number

invert

outline-style Stabilete stilul liniei exterioare

nonedotteddashedsoliddoublegrooveridgeinsetoutset

outline-width Stabilete grosimea liniei exterioare

thinmediumthick

length

15. Margini

Proprietatea CSSmargin definete spaiul din jurul unui element (n afarachenarului). Marginea nu are culoare de fundal i este complet transparent.Cele patru margini ale elementului pot fi modificate n mod independent,folosind proprieti separate. O proprietate scurt poate fi, de asemenea, folositpentru a schimba toate cele patru margini simultan.

Valori posibile

Valoare Descriere

autoMarginile sunt stabilite de ctre browser. Rezultatul depinde debrowser.

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.

8/3/2019 curs-CSS-

72/139

78

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 singurdeclaraie, utiliznd proprietatea scurtmargin:

p{


p.margin{

margin:100px 50px;}

8/3/2019 curs-CSS-

73/139

79

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

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.

8/3/2019 curs-CSS-

74/139

80

Un paragraf cu marginea de sus de2cm.

Un paragraf cu margini nedefinite.

Exemplul 2Ilustreaz cum se stabilete marginea de jos a unui text utiliznd o valoareprocentual.p.bottommargin {margin-bottom:25%}

Acest paragraf are margini nedefinite.

Acest paragraf are margineade jos definita.

Acest paragraf are margini nedefinite.

Toate proprietile pentru marginiProprietate Descriere Valori

margin Proprietate prescurtat pentru a setasimultan toate marginile

margin-top

margin-right

margin-bottom

margin-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 sus auto

8/3/2019 curs-CSS-

75/139

81

length

%

16. Padding

Proprietatea CSSpadding definete spaiul dintre chenar i coninut. Acestspaiu este afectat de culoarea de fundal a elementului. Spaiul drept, stng, desus i de jos (relativ la coninut) poate fi modificat n mod independent folosindproprieti diferite. Exist i varianta scurt a proprietii pentru a modifica celepatru spaii simultan.

Valori posibile

Valoare Descriere

length 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 nexemplul urmtor:

p{


p.padding{

padding-top:25px;

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

Acesta este un paragraf cu spatiul nedefinit.

Acest paragraf are cele patruspatii definite cu proprietatea padding.

8/3/2019 curs-CSS-

76/139

82

Proprietatea scurtPentru a scurta codul, putei specifica toate cele patru spaii ntr-o singurproprietate numit simplupadding, ca n exemplul urmtor :p{

background-color:yellow;

}p.padding{

padding:25px 50px;}

Acesta este un paragraf cu spatiul nedefint.

Acest paragraf are cele patruspatii definite cu proprietatea padding.

Proprietateapadding poate avea ntre una i patru valori: padding:25px 50px 75px 100px;

o spaiul de sus are25pxo 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 25px

8/3/2019 curs-CSS-

77/139

83

o 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 spatiiegale. Spatiul pe fiecare latura a textului este de2cm.

Acest text are spatiile de sus si dejos 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.

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

Acest text nu are spatiul din stanga definit.

Acest paragraf are spatiul dinstanga de 2 cm.

Acest paragraf are spatiul dinstanga de 50%.

8/3/2019 curs-CSS-

78/139

84

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 spatiuldin dreapta. Acesta este un text care nu are definitspatiul din dreapta. Acesta este un text care nu aredefinit spatiul din dreapta.

Acest text are spatiul din dreaptade 2 cm. Acest text are spatiul din dreapta de 2 cm.

Acest text are spatiul din dreapta de 2 cm.

Acest text are spatiul dindreapta 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.

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

Acest text nu are spatiul de sus definit. Acesttext nu are spatiul de sus definit. Acest text nu arespatiul de sus definit. Acest text nu are spatiul de

sus definit.

8/3/2019 curs-CSS-

79/139

85

Acest text are spatiul de sus de 2cm. Acest text are spatiul de sus de 2 cm. Acest textare spatiul de sus de 2 cm. Acest text are spatiul desus de 2 cm.

Acest text are spatiul de sus de

25%. Acest text are spatiul de sus de 25%. Acest textare spatiul de sus de 25%. Acest text are spatiul desus 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 arespatiul de jos definit. Acest text nu are spatiul dejos definit.

Acest text are spatiul de jos de 2cm. Acest text are spatiul de jos de 2 cm. Acest textare spatiul de jos de 2 cm. Acest text are spatiul dejos de 2 cm.

Acest text are spatiul de jos de25%. Acest text are spatiul de jos de 25%. Acest text

are spatiul de jos de 25%. Acest text are spatiul dejos de 25%.

Acest text nu are spatiul de jos definit. Acesttext nu are spatiul de jos definit. Acest text nu arespatiul de jos definit. Acest text nu are spatiul dejos definit.

Toate proprietile CSS pentru paddingProprietate Descriere Valori

8/3/2019 curs-CSS-

80/139

86

paddingProprietatea scurt pentru a stabili toatespaiile cu o singur declaraie

adding-top

adding-right

adding-bottom

adding-leftpadding-

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{color:green;}

Pentru a micora codul, putei grupa selectorii ntr-o list n care selectorii suntseparai prin virgul.n exemplul urmtor, selectorii de mai sus au fost grupai:

h1,h2,p{color:green;

}

8/3/2019 curs-CSS-

81/139

87

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 elementelep, i un alt stilpentru elementelep aflate n clasa "marked":

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

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

Acest paragraf are culoarea albastra si estealiniat la centru.

Acest paragraf din clasa marked trebuie sa aibaculoarea alba.

Paragrafele declarate in clasa "marked" pastreazastilul de aliniere, dar textul are o culoare

diferita.

8/3/2019 curs-CSS-

82/139

88

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;}

Inaltimea si latimea acestui paragrafsunt de 100px.

Un text intr-un paragraf. Un text intr-unparagraf. 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 2

8/3/2019 curs-CSS-

83/139

89

Ilustreaz cum se seteaz nlimea unui element folosind o valoareprocentual.

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{width: 200px}

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

8/3/2019 curs-CSS-

84/139

90

p.ex{

max-height:100px;}

Inaltimea maxima a acestui paragrafeste 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 valoareprocentual. Textul va ocupa 50% din limea ferestrei browserului, chiar dacredimensionai fereastra.

p{

max-width: 50%}

Acesta este un text. Acesta este un text. Acestaeste 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.

8/3/2019 curs-CSS-

85/139

91

p.ex{

min-height:100px;}

Inaltimea minima a cestui paragraf estesetata la 100px.

Un alt paragraf. Un alt paragraf. Un alt paragraf.

Un alt paragraf. Un alt paragraf. Un altparagraf.

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

p.ex{

min-width:50px;}

Latimea minima a acestui paragraf estesetata la 50px.

Un alt paragraf. Un alt paragraf. Un alt paragraf.Un alt paragraf. Un alt paragraf. Un alt paragraf. Unalt paragraf. Un alt paragraf. Un alt paragraf.

8/3/2019 curs-CSS-

86/139

92

Toate proprietile CSS pentru dimensiuniProprietate Descriere Valori

Property Description Values

height Stabilete nlimea unui elementauto

length%

max-height Stabilete nlimea maxim a unuielement

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 elementautolength

%

19. Proprietile display ivisibility

Proprietatea display specific dac/cum este afiat un element, iarproprietateavisibility specific dac elementul este vizibil sau ascuns.

Ascunderea unui elementSe poate realiza setnd proprietatea display la valoarea none sauproprietateavisibility la valoarea hidden. Cele dou metode produc

rezultate diferite.Proprietateavisibility:hidden ascunde elementul, dar el va ocupaacelai spaiu n pagin afectnd aspectul acesteia:

h1.hidden {visibility:hidden}

8/3/2019 curs-CSS-

87/139

93

Acesta este un titlu vizibilAcesta este un titlu ascuns

Observati ca titlul ascuns ocupa spatiu inpagina.

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

h1.hidden {display:none}

Acesta este un titlu vizibil Acesta este un titlu ascuns

Observati ca titlul ascuns nu ocupa spatiu inpagina.

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

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

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

8/3/2019 curs-CSS-

88/139

94

li{display:inline}

Lista de linkuri este afisata ca un meniuorizontal:

Yahoo

Google

Microsoft

Oracle

Exemplul urmtor afieaz elementele span ca elemente bloc:span{display:block;

}

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

8/3/2019 curs-CSS-

89/139

95

Obs: Schimbnd modul de afiare a unui element, nu schimbm i tipulacestuia. De exemplu, un element inline cu proprietatea display:block nupoate 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 afost setata la inline

intre aceste doua paragrafe nu mai existaintreruperile de linie.

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

span{display:block;}

Deoarece proprietatea display a elementuluispan a fost setata la block

8/3/2019 curs-CSS-

90/139

96

intre aceste doua elemente exista o intreruperede linie.

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

tr.collapse {visibility:collapse}

Tabelul normal

AmaliaPetrescu

GeorgeMoraru

Tabelul cu a doua linie setata la collapse.

AmaliaPetrescuGeorgeMoraru

Nota: Internet Explorer nu recunoastevaloarea "collapse".

8/3/2019 curs-CSS-

91/139

97

20. Poziionarea unui element

Proprietateaposition v permite s stabilii poziia unui element n paginaweb. 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 demetoda de poziionare. Sunt patru metode diferite de poziionare a unuielement.

Poziionarea staticEste modul implicit de poziionare a elementelor HTML. Un element poziionatstatic respect ntotdeauna fluxul normal al paginii web. Elementele poziionatestatic nu sunt afectate de proprietile top,bottom, left, i right.

Poziionarea fixUn element cu poziionare fix este poziionat relativ la fereastra browserului inu se va deplasa chiar dac fereastra este derulat.

Exemplu:

p.pos_fixed

{color:red;

position:fixed;top:30px;right:5px;}

Un text cu pozitia fixa

8/3/2019 curs-CSS-

92/139

98

Note: Internet Explorer acceptapozitionarea fixa numai daca exista declaratia!DOCTYPE.

Un text normal

Un text normal

Untext 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 textnormal

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 normaln document.Exemplu:

h2.pos_left{

position:relative;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 normala

8/3/2019 curs-CSS-

93/139

99

Acest titlu este deplasat ladreapta cu 30px fata de pozitia lui normala

Coninutul unui element poziionat relativ poate fi mutat i suprapus peste alteelemente, 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 cu40px fata de pozitia lui normala

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

Poziionarea absolut

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

h2{

position:absolute;left:100px;

8/3/2019 curs-CSS-

94/139

100

top:150px;}

Acest titlu are o pozitionare absoluta la 150 pxfata de inceputul documentului si 100px fata de

marginea stanga a documentului

Acest paragraf este pozitionat static(implicit).

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

Suprapunerea elementelorCnd elementele sunt poziionate n afara fluxului normal al documentului, elepot acoperi alte elemente. Proprietatea z-index specific ordinea elementelorsuprapuse: care element va fi plasat n faa sau n spatele celorlalte elemente.

Ordinea n list poate fi pozitiv sau negativ.Exemplu:

img{

position:absolute;left:0px;

top:0px;z-index:-1;}

Acesta este un titlu pozitionat static

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

8/3/2019 curs-CSS-

95/139

101

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

Exemple

Exemplul 1Ilustreaz cum se stabilete forma unui element. Imaginea din exemplulurmtorul este prins n forma dorit (cu proprietatea clip) i afiat.

img{

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

Exemplul 2

Ilustreaz cum se folosete proprietatea overflow pentru a crea o bar dederulare atunci cnd coninutul elementului este prea mare pentru zonaspecificat.

div.scroll{

background-color:#00FFFF;

width:100px;height:100px;

8/3/2019 curs-CSS-

96/139

102

overflow:scroll;}

div.hidden{

background-color:#00FF00;width:100px;height:100px;overflow:hidden;}

Folositi proprietatea overflow atunci candcontinutul elementului depaseste marimea zoneirezervate.

overflow:scroll
Folositi proprietatea overflowpentru a controla mai bine aspectuldocumentului.Valoarea implicita este visible.
overflow:hidden
Folositi proprietatea overflowpentru a controla mai bine aspectuldocumentului.Valoarea implicita este visible.
Exemplul 3Ilustreaz cum poate fi setat browserul astfel nct s gestioneze n modautomat depirea spaiului rezevat de ctre coninutul unui element.

div{

background-color:#00FFFF;width:150px;height:120px;

8/3/2019 curs-CSS-

97/139

103

overflow: auto}

Proprietatea overflow are valoarea auto sidetecteaz dac continutul elementului depaseste zonarezervat si este necesara bara de derulare.

Puteti folosi proprietatea overflow pentru a controla

mai bine aspectul documentului. Valorile posibilesunt: visible, hidden, scroll, inherit. Valoarea

implicita este visible.

Exemplul 4Ilustreaz cum se poate modifica tipul cursorului.

Plimbati mouse-ul peste cuvintele din lista pentrua-l modifica.

auto
crosshair
default
e-resize
help
move

n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait

8/3/2019 curs-CSS-

98/139

104

Toate proprietile CSS pentru poziionarea unui elementProprietate Descriere Valori

bottom Stabilete marginea de jos pentruo caset poziionat

autolength

%t

clip Fixeaz ntr-o form un elementpoziionat absolut

shape

auto

cursor Specific tipul cursorului

urlautocrosshairdefault

pointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resize

w-resizetextwaithelp

leftStabilete marginea din stangapentru o caset poziionat

autolength

%t

overflowStabilete ce se ntmpl dacconinutul elementului depetezona rezervat

autohidden

scrollvisible

position Specific tipul de poziionare aelementului

absolutefixedrelativestatic

right Stabilete marginea din dreaptapentru o caset poziionat

autolength

%

top Stabilete marginea de sus pentruo caset poziionat

autolength

8/3/2019 curs-CSS-

99/139

105

%

z-index Stabilete ordinea de afiare aunui element suprapus

number

auto

21. Proprietatea float

Cu proprietatea CSS float, un element poate fi mpins ctre dreapta sau ctrestnga, permind celorlalte elemente s se organizeze n jurul lui. Proprietateaeste folosit frecvent pentru imagini, dar este foarte util i cnd lucrai cuaspectul paginii (layouts).

Cum sunt deplasate elementeleElementele se deplaseaz numai orizontal, ctre stnga sau ctre dreapta. Unelement deplasabil va mpins spre dreapta sau spre stnga ct de mult se poate.Asta nseamn c elementele care urmeaz elementului deplasabil se vor aranjan jurul lui. Elementele dinaintea elementului deplasabil nu vor fi afectate.Dac o imagine este deplasat spre dreapta, textul care urmeaz se va aranja njurul imaginii ca n exemplul urmtor:img{float:right;}

In paragraful urmator este o imagine cu

proprietatea style setata la float:right. Caurmare, imaginea se va deplasa n paragraf spredreapta.

Un text. Un text. Un text. Un text. Un text. Un text.Un text. Un text. Un text. Un text. Un text. Un text.Un text. Un text. Un text. Un text. Un text. Un text.Un text. Un text. Un text. Un text. Un text.

curs-css-

Documents