CUPRINS

CUPRINS.......................................................................................7 1. Introducere................................................................................11 Ce este CSS?.............................................................................11 Stilurile rezolv o mare problem............................................11 2. Sinta a......................................................................................11 ! emple....................................................................................11 Comentarii CSS .......................................................................1" #. Selectorii id $i class .................................................................1" Selectorul id .............................................................................1" Selectorul class ........................................................................1% ". Cum inserm CSS &n documentele '()*...............................1+ ,oaie e tern de stil..................................................................1+ ,oaie intern de stil...................................................................17 Stiluri inline..............................................................................17 ,oi multiple de stiluri...............................................................17 %. ,ormatarea bac-.round/ului.....................................................10 Proprietatea bac-.round/color.................................................10 Proprietatea bac-.round/ima.e................................................21 Proprietatea bac-.round/repeat................................................21 Proprietatea bac-.round/position $i no/repeat.........................21 Propriet2i multiple pentru bac-.round....................................22 ! emple....................................................................................2# (oate propriet2ile 3undalului &n CSS.......................................2" +. ,ormatarea te tului...................................................................2% Culoarea te tului.......................................................................2% 4linierea te tului......................................................................2+ 5ecorarea te tului.....................................................................2+ (rans3ormarea te tului.............................................................27 Indentarea te tului....................................................................20 ! emple....................................................................................26 (oate propriet2ile CSS pentru 3ormatarea te tului..................#2 0. ,onturi......................................................................................## ,amiliile de 3onturi &n CSS.......................................................## 7

Proprietatea 3ont/st7le...............................................................#" Proprietatea 3ont/size................................................................#% ! emple....................................................................................#7 (oate propriet2ile pentru 3onturi &n CSS.................................#6 6. *in-uri......................................................................................"1 ,ormatarea lin-urilor................................................................"1 5ecorarea te tului....................................................................."1 Culoarea 3undalului.................................................................."1 ! emple...................................................................................."2 11. *iste........................................................................................"" Setarea di3eri2ilor marcatori......................................................"" 8 ima.ine ca marcator &n list.................................................."+ Proprietatea scurt...................................................................."+ ! emplu...................................................................................."7 (oate propriet2ile pentru liste &n CSS.....................................%1 11. (abele.....................................................................................%1 C9enarele tabelului...................................................................%1 Proprietatea border/collapse.....................................................%1 5imensiunile unui tabel............................................................%2 4linierea te tului din tabel.......................................................%# Spa2iul dintre c9enar $i con2inut :table paddin.;......................%+ Culoarea tabelelor.....................................................................%7 ! emple....................................................................................%0 12. )odelul bo &n CSS...............................................................+2 5imensiunile unui element.......................................................+2 Probleme de compatibilitate &n bro<sere.................................+" 1#. C9enare...................................................................................+% Stilul c9enarului........................................................................+% =rosimea c9enarului.................................................................++ Culoarea c9enarului..................................................................+7 *aturile unui c9enar..................................................................+7 Proprietatea scurt....................................................................+6 ! emple....................................................................................+6 (oate propriet2ile CSS pentru c9enare....................................72 1". *inii e terioare :outlines;.......................................................7" ! emple....................................................................................7" 0

(oate propriet2ile CSS pentru linii e terioare.........................77 1%. )ar.ini...................................................................................77 *aturile mar.inii.......................................................................70 Proprietatea prescurtat............................................................70 ! emple....................................................................................76 (oate propriet2ile pentru mar.ini............................................01 1+. Paddin....................................................................................01 )odi3icarea individual a celor patru spa2ii.............................01 Proprietatea scurt....................................................................02 ! emple....................................................................................0# (oate propriet2ile CSS pentru paddin....................................0+ 17. =ruparea $i imbricarea selectorilor.........................................0+ =ruparea selectorilor................................................................0+ Imbricarea selectorilor..............................................................07 10. Setarea dimensiunilor unui element.......................................00 ! emple....................................................................................00 (oate propriet2ile CSS pentru dimensiuni..............................62 16. Propriet2ile displa7 $i visibilit7.............................................62 4scunderea unui element .........................................................6# 43i$area elementelor bloc $i a elementelor inline.....................6# Sc9imbarea modului de a3i$are a unui element........................6" ! emple....................................................................................6% 21. Pozi2ionarea unui element......................................................67 ! emple..................................................................................111 (oate propriet2ile CSS pentru pozi2ionarea unui element.....11" 21. Proprietatea 3loat...................................................................11% Cum sunt deplasate elementele...............................................11% )utarea elementelor unele l>n. altele..................................11+ Proprietatea clear....................................................................117 ! emple..................................................................................110 (oate propriet2ile CSS pentru deplasarea elementelor..........11" 22. 4linierea orizontal..............................................................11% 4linierea elementelor bloc......................................................11% 4linierea la centru 3olosind proprietatea mar.in ...................11% 4linierea la st>n.a $i la dreapta 3olosind proprietatea position ................................................................................................11+ 6

4linierea la st>n.a $i la dreapta 3olosind proprietatea 3loat. . .11+ 2#. Pseudo/clasele CSS..............................................................117 Sinta a....................................................................................117 Pseudo/clase pentru lin-/uri...................................................117 Pseudo/clasa ?3irst/c9ild.........................................................110 Selectarea primului element @pA .......................................110 Selectarea primului element @iA din toate elementele @pA ............................................................................................116 Selectarea tuturor elementelor @iA din primul element @pA care este descendent al unui alt element.............................116 Selectarea primului item dintr/o list.................................121 Selectarea primului descendent al tuturor elementelor li dintr/ o list...................................................................................121 Pseudo/clasa ?lan. ................................................................121 ! emple..................................................................................122 Pseudo/clasele CSS................................................................12" 2". Pseudo/elementele CSS .......................................................12" Sinta ....................................................................................12" Pseudo/elementul ?3irst/line ...................................................12% Pseudo/elementul ?3irst/letter ...............................................12% Pseudo/elementele $i clasele CSS .........................................12+ Pseudo/elemente multiple.......................................................12+ Pseudo/elementul ?be3ore ......................................................127 Pseudo/elementul ?a3ter .........................................................120 Pseudo/elementele CSS..........................................................120 2%. Bara de navi.are...................................................................126 Bar de navi.are vertical......................................................1#1 Bar de navi.are orizontal....................................................1#1 2+. =alerie de ima.ini................................................................1#" 27. 8pacitateaCtransparen2a unei ima.ini...................................1#% 20. Ima.ini sprite........................................................................1#0 Crearea unei liste de navi.are.................................................1#0 26. 4tribute selector...................................................................1"1 Biblio.ra3ie.................................................................................1"+

11

1. Introducere
Ce este CSS?
CSS &nseamn Cascadin. St7le S9eets :3oi de stil &n cascad; Stilurile de3inesc cum vor fi afiate elementele '()* Stilurile au 3ost adu.ate &n '()* ".1 pentru a rezolva o problem oile de stiluri e!terne pot salva mult munc ,oile de stiluri e terne sunt memorate &n 3i$iere CSS

Stilurile rezolv o mare problem

'()* nu a 3ost conceput ca s con2in ta.uri pentru 3ormatarea documentelorD ci numai pentru de3inirea con2inutului documentelorD ca &n e emplul urmtor? <h1>Acesta este un titlu</h1> <p>Acesta este un paragraf.</p> C>nd ta.uri precum <font> $i atributele de culoare au 3ost adu.ate &n speci3ica2iile '()* #.2D a &nceput co$marul pentru proiectan2ii <eb. 5ezvoltarea site/urilor mariD &n care in3orma2iile despre 3ont $i culoare trebuiau adu.ate pe 3iecare pa.inD a devenit un proces lun. $i costisitor. Pentru a rezolva aceast problemD consor2iul Eorld Eide Eeb :E#C; a creat CSS. Fn '()* ".1D toate 3ormatrile pot 3i &nlturate din documentul '()* $i stocate &ntr/un 3i$ier CSS separat. (oate bro<serele suport CSS. Fn acest 3el pute2i sc9imba u$or aspectul tuturor pa.inilor <eb dintr/un site modi3ic>nd un sin.ur 3i$ier.

". Sinta!a
#!emple
1. ,i$ierul '()* urmtor se lea. la o 3oaie e tern de stil cu ta.ul <link>? <html> <head> <link rel="stylesheet" type="text/css" href="stil1.css" /> </head> <body>

11

<h1>Acest titlu are 3 pt</h1> <h!>Acest titlu este "erde</h!> <p>Acest paragraf are marginea stanga de #$ pixeli</p> </body> </html> ,i$ierul de stil :stil1.css; are urmtorul con2inut? body % background&color'yello() * h1 % font&si+e'3 pt) * h! % color'green) * p % margin&left'#$px) * 2. ,i$ierul '()* urmtor se lea. un 3i$ier e tern de stil situat pe un alt server? <html> <head> <link rel="stylesheet" type="text/css" href="stil!.css" /> </head> <body> <h1>Acesta este un titlu 1</h1> <hr /> <p>,uteti "edea continutul foii de stil care formatea+a textul la adresa'</p> <p><a href="http'//(((.mysite.com" target="-blank">.ink</a></p>

12

</body> </html> ,i$ierul de stil :stil".css; are urmtorul con2inut? body %background&color' tan* h1 %color'maroon) font&si+e'!$pt* hr %color'na"y* p %font&si+e'11pt) margin&left' 1 px* a'link %color'green* a'"isited %color'yello(* a'ho"er %color'black* a'acti"e %color'blue* 8 construc2ie CSS are dou pr2i? un selectorD $i una sau mai multe declara2ii?

Selectorul este uzual elementul '()* pe care dori2i s/l 3ormata2i. ,iecare declara2ie este 3ormat dintr/o proprietate $i o valoare. Proprietatea este atributul de stil pe care dori2i s/l modi3ica2i. ,iecare proprietate are o valoare. 5eclara2iile CSS se &nc9eie &ntotdeauna cu G $i .rupurile de declara2ii sunt scrise &ntre acolade. #!emplu$ p %color'red)text&align'center* Pentru a 3ace declara2iile CSS mai u$or de cititD pute2i scrie 3iecare declara2ie pe c>te o linie ca &n e emplul urmtor? p % color'red) text&align'center) * 5ocumentul '()* care con2ine declara2iile CSS de mai sus va arta ast3el? <html> <head> <style type="text/css"> p % color'red) text&align'center)

1#

* </style> </head> <body> <p>/una +iua0</p> <p>Acest paragraf este stili+at cu 122.</p> </body> </html>

Comentarii CSS
Comentariile se 3olosesc pentru a e plica codul $i pot 3i utile c>nd modi3ica2i codul surs pe parcurs. Comentariile sunt i.norate de ctre bro<sere. Un comentariu CSS &ncepe cu H/3HD $i se termin cu H3/HD ca &n e emplul urmtor? /3Acesta este un comentariu si nu se "a afisa3/ p % text&align'center) /3Acesta este un alt comentariu3/ color'blue) font&family'arial *

%. Selectorii id i class
Pe l>n. setarea stilului unui element '()*D CSS v permite s speci3ica2i doi selectori proprii numi2i id $i class.

Selectorul id
Selectorul id este utilizat pentru a speci3ica stilul unui sin.ur element . Selectorul id 3olose$te atributul id al unui element '()*D $i este de3init cu H4H. ! emplu? Stilul urmtor va 3i aplicat elementului care are atributul id="par1". <html> <head> <style type="text/css"> 4par1 %

1"

text&align'center) color'red * </style> </head> <body> <p id="par1">/una +iua0</p> <p>Acest paragraf nu este afectat de declaratia de stil.</p> </body> </html> &bs. Nu &ncepe2i numele id cu un numr deoarece nu va lucra &n )ozillaC,ire3o .

Selectorul class
4cest selector este utilizat pentru a speci3ica stilul unui .rup de elemente. 4st3elD pute2i seta un stil particular pentru toate elementele '()* care 3ace parte din aceea$i clas. Selectorul class 3olose$te atributul '()* class $i este de3init cu H.H Fn e emplul urmtorD toate elementele '()* cu atributul class="center" vor 3i aliniate la centru? <html> <head> <style type="text/css"> .center % text&align'center) * </style> </head> <body> <h1 class="center">Acest titlu este aliniat la centru cu 122</h1> <p class="center">Acest paragraf este de asemenea aliniat la centru cu 122.</p> </body> </html> Pute2i de asemenea speci3ica ce elemente din clas vor 3i a3ectate de stil. Fn e emplul urmtorD numai elementele p din clasa center vor 3i aliniate la centru? <html> <head>

1%

<style type="text/css"> p.center % text&align'center) * </style> </head> <body> <h1 class="center">Acest titlu nu este afectat de stilul 122</h1> <p class="center">Acest paragraf este aliniat la centru cu 122.</p> </body> </html> &bs. Nu &ncepe2i un nume de clas cu un numr deoarece numai Internet ! plorer accept acest lucru.

'. Cum inserm CSS (n documentele )*+,

8 3oaie de stil poate 3i inserat &n trei moduri? ,oaie e tern de stil ,oaie intern de stil Stil inline

oaie e!tern de stil

8 3oaie de stil e tern este ideal atunci c>nd stilul respectiv se aplic mai multor pa.ini. Cu o 3oaie CSS e ternD pute2i modi3ica aspectul &ntre.ului site modi3ic>nd un sin.ur 3i$ier. ,iecare pa.in trebuie s se le.e la 3oaia de stil 3olosind ta.ul <link> &n interiorul sec2iunii head? <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 8 3oaie e tern de stil poate 3i scris &n NotepadD nu trebuie s con2in ta.uri -tml $i trebuie salvat cu e tensia .css. Un e emplu de 3oaie de stil e ternD memorat &n 3i$ierul stil.cssD este prezentat mai Ios? hr %color'sienna* p %margin&left'!$px* body %background&image'url5"roses.gif"6*

1+

&bs. Nu lsa2i spa2ii &ntre valoarea propriet2ii $i unitatea de msurJ 5ac scrie2i Hmargin&left'!$ pxH :&n loc de Hmargin&left'!$pxH; va mer.e &n I!D dar nu &n ,ire3o sau 8pera.

oaie intern de stil

8 3oaie intern de stil trebuie 3olosit c>nd un sin.ur document are un anumit stil. ,oaia intern de stil se de3ine$te &n sec2iunea head a pa.inii '()* 3olosind ta.ul <style>D ca &n e emplul urmtor? <head> <style type="text/css"> hr %color'sienna* p %margin&left'!$px* body %background&image'url5"roses.gif"6* </style> </head>

Stiluri inline
Un stil inline pierde multe din avantaIele 3oilor de stiluri amestec>nd con2inutul cu prezentarea. Utiliza2i aceast metod c>t mai rar. Pentru a utiliza un stil inlineD 3olosi2i atributul style &n ta.ul respectiv. 4tributul style poate con2ine orice propriet2i CSS. ! emplul urmtor ilustreaz cum se poate sc9imba culoarea $i mar.inea st>n. a unui para.ra3? <p style="color'sienna)margin&left'!$px">Acesta este un paragraf.</p>

oi multiple de stiluri
5ac anumite propriet2i ale unui selector au 3ost setate &n 3oi de stiluri di3eriteD valorile vor 3i mo$tenite din cea mai speci3ic 3oaie de stil. Spre e empluD&ntr/o 3oaie de stil e ternD selectorul h3 are setate urmtoarele trei propriet2i? h3 % color'red) text&align'left) font&si+e'7pt * Ki 3oaia de stil intern seteaz pentru h3 urmtoarele propriet2i? h3 % text&align'right) font&si+e'!$pt *

17

5ac pa.ina care con2ine aceast 3oaie intern de stil se lea. $i la 3oaia de stil e ternD atunci propriet2ile pentru h3 vor 3i? color'red) text&align'right) font&si+e'!$pt Culoarea este mo$tenit din 3oaia e ternD iar alinierea $i dimensiunea 3ontului sunt &nlocuite cu valorile din 3oaia intern de stil. Stilurile pot 3i speci3icate? Fntr/un element '()* Fn sec2iunea head a unei pa.ini '()* Fntr/un 3i$ier e tern CSS &bs$ Fntr/un document '()* pot 3i re3erite mai multe 3oi de stiluri e terne.

&rdinea de aplicare
Ce stil va 3i utilizat c>nd &ntr/un document '()* sunt speci3icate mai multe 3oi de stil pentru un element '()*? *a modul .eneralD putem spune c stilurile se vor mi a &ntr/o 3oaie de stil virtual dup urmtoarele re.uliD unde prioritatea cre$te odat cu numrul de ordine? 1. Setrile implicite ale bro<serului 2. ,oi de stil e terne :din 3i$iere CSS; #. ,oi de stiluri interne :din sec2iunea head; ". Stiluri inline :din ta.ul elementului '()*; 5eciD stilul inline al unui element suprascrie stilul de3init &n <head>D &ntr/un 3i$ier e tern sau &n bro<ser. &bs$ 5ac le.tura ctre o 3oaie e tern de stil este amplasat &n sec2iunea <head> dup 3oaia intern de stiluriD atunci 3i$ierul e tern va suprascrie stilul internJ

.. ormatarea bac/0round1ului
Propriet2ile utilizate &n CSS pentru a de3ini 3undalul unui element sunt? background&color background&image background&repeat background&attachment background&position

Proprietatea background&color 10

Proprietatea speci3ic culoarea de 3undal a unui element. Culoarea de 3undal pentru &ntrea.a pa.in este de3init &n selectorul body ca &n e emplul urmtor? <html> <head> <style type="text/css"> body % background&color'4b$c#de) * </style> </head> <body> <h1>,agina stili+ata cu 1220</h1> <p>/una +iua0 Acesta este un exemplu de utili+are a stilurilor.</p> </body> </html> Culoarea de 3undal poate 3i speci3icat prin? nume L un nume de culoareD de e emplu HredH R=B L o valoare R=BD de e emplu Hr0b2"..34345H 'e L o valoare 9e azecimalD de e emplu H6ff4444H Fn e emplul urmtorD elementele h1D pD $i di" au di3erite culori de 3undal? <html> <head> <style type="text/css"> h1 % background&color'48#9 ed) * p % background&color'4e$ffff) * di" % background&color'4b$c#de) * </style>

16

</head> <body> <h1>:xemplu pentru proprietatea 122 background&color0 </h1> <di"> Acesta este un text in interiorul unui element di". <p>Acest paragraf are propria culoare de fundal; desi este in interiorul elementului di". </p> Acest text face parte tot din elementul di". </di"> </body> </html>

Proprietatea background&image
4ceast proprietate de3ine$te ima.inea 3olosit ca 3undal pentru un element. ImplicitD ima.inea se repet pe supra3a2a &ntre.ului element. Ima.inea de 3undal a pa.inii poate 3i setat ca &n e emplul urmtor? <html> <head> <style type="text/css"> body %background&image'url5<paper.gif<6* </style> </head> <body> <h1>/una +iua0</h1> </body> </html> &bs. Construc2ia url2...5 precizeaz locul &n care este stocat ima.inea. 5ac provine de pe netD preciza2i adresa complet ca &n e emplul urmtor? url27-ttp$88999.ima0e.com8ima0e.0if:5 Ima.inea de 3undal trebuie aleas ast3el &nc>t te tul s poat 3i citit cu u$urin2.

Proprietatea background&repeat
Prin de3ini2ieD proprietatea background&image repet o ima.ine $i vertical $i orizontal. Unele ima.ini trebuie repetate numai vertical sau numai orizontal. 5ac dori2i ca ima.inea s se repete numai pe orizontalD 3olosi2i valoarea repeat&xD iar pentru vertical 3olosi2i repeat&y. ! emplu?

21

<html> <head> <style type="text/css"> body % background&image'url5<gradient!.png<6) background&repeat'repeat&x) * </style> </head> <body> <h1>/una +iua0</h1> </body> </html>

Proprietatea background&position i no&repeat

C>nd 3olosi2i o ima.ine de 3undal ave2i .riI s nu &n.reuna2i citirea te tului. 5ac dori2i ca ima.inea s 3ie a3i$at o sin.ur dat :s nu se repete;D 3olosi2i valoarea no&repeat ca &n e emplul urmtor? <html> <head> <style type="text/css"> body % background&image'url5<tree.=pg<6) background&repeat'no&repeat) * </style> </head> <body> <h1>/una +iua0</h1> <p>:xemplu de imagine de fundal.</p> <p>>maginea este afisata o singura data;dar incomodea+a cititorul0</p> </body> </html> Pentru a sc9imba pozi2ia ima.inii de 3undalD background&position ca &n e emplul urmtor? 3olosi2i proprietatea

21

<html> <head> <style type="text/css"> body % background&image'url5<tree.=pg<6) background&repeat'no&repeat) background&position'top right) margin&right'!$$px) * </style> </head> <body> <h1>/una +iua0</h1> <p>:xemplu de imagine de fundal.</p> <p>>maginea este afisata o singura data si po+itionata in afara textului.</p> <p>>n acest exemplu;marginea dreapta a textului a fost setata la !$$ pixeli. >n acest fel; textul nu se "a suprapune cu imaginea.</p> </body> </html>

Propriet;i multiple pentru bac/0round

Pentru a scurta codulD pute2i preciza toate propriet2ile &ntr/o proprietate numit scurt background ca &n e emplul urmtor? <html> <head> <style type="text/css"> body % background'4ffff$$ url5<tree.=pg<6 no&repeat top right) margin&right'!$$px) * </style> </head> <body> <h1>/una +iua0</h1>

22

<p>>maginea este afisata o singura data si po+itionata in afara textului.</p> <p>>n acest exemplu;marginea dreapta a textului a fost setata la !$$ pixeli. >n acest fel; textul nu se "a suprapune cu imaginea.</p> </body> </html> C>nd 3olosi2i proprietatea scurtD ordinea valorilor propriet2ilor este? background&color background&image background&repeat background&attachment background&position Nu conteaz dac valoarea unei propriet2i lipse$teD at>t timp c>t valorile prezente sunt scrise &n aceast ordine.

#!emple
#!emplul 1 Ilustreaz cum se stabile$te o ima.ine de 3undal 3i . Ima.inea nu se va deplasa odat cu restul pa.inii. <html> <head> <style type="text/css"> body % background&image'url5<smiley.gif<6) background&repeat'no&repeat) background&attachment'fixed * </style> </head> <body> <p>>maginea de fundal este fixa. >ncercati micsorati fereastra si sa derulati pana la paginii.</p> <p>>maginea de fundal este fixa. >ncercati micsorati fereastra si sa derulati pana la paginii.</</p> sa sfarsitul sa sfarsitul

2#

<p>>maginea de fundal este fixa. >ncercati micsorati fereastra si sa derulati pana la paginii.</</p> <p>>maginea de fundal este fixa. >ncercati micsorati fereastra si sa derulati pana la paginii.</</p> <p>>maginea de fundal este fixa. >ncercati micsorati fereastra si sa derulati pana la paginii.</</p> <p>>maginea de fundal este fixa. >ncercati micsorati fereastra si sa derulati pana la paginii.</</p> <p>>maginea de fundal este fixa. >ncercati micsorati fereastra si sa derulati pana la paginii.</</p> <p>>maginea de fundal este fixa. >ncercati micsorati fereastra si sa derulati pana la paginii.</</p> <p>>maginea de fundal este fixa. >ncercati micsorati fereastra si sa derulati pana la paginii.</</p> </body> </html>

sa sfarsitul sa sfarsitul sa sfarsitul sa sfarsitul sa sfarsitul sa sfarsitul sa sfarsitul

*oate propriet;ile fundalului (n CSS

Proprietate <escriere =alori background-color background-image Seteaz toate propriet2ile background-repeat background bac-.round &ntr/o sin.ur backgrounddeclara2ie attachment background-position Stabile$te dac ima.inea de scroll background& 3undal este 3i sau fi!ed attachment de3ileaz &mpreun cu restul pa.inii color-rgb Seteaz culoarea de 3undal color-hex background&color a unui element color-name transparent background&image Seteaz ima.inea de 3undal url:URL;

2"

a unui element

background& position

background& repeat

none top left top center top ri0-t center left center center Seteaz pozi2ia de &nceput a center ri0-t unei ima.ini de 3undal bottom left bottom center bottom ri0-t x% y% xpos ypos repeat Stabile$te dac $i cum va 3i repeat1! repetat ima.inea de 3undal repeat1> no1repeat

?. ormatarea te!tului
Culoarea te!tului
Culoarea te tului este stabilit cu proprietatea color. Culoarea poate 3i speci3icat prin? nume L un nume de culoareD de e emplu HredH R=B L o valoare R=BD de e emplu Hr0b2"..34345H 'e L o valoare 9e azecimalD de e emplu @6ff4444H Culoarea implicit pentru &ntrea.a pa.in este de3init &n selectorul body. #!emplu$ <html> <head> <style type="text/css"> body %color'red* h1 %color'4$$ff$$* p.ex %color'rgb5$;$;! 6* </style> </head> <body> <h1>Acesta este un titlu 1</h1>

2%

<p>Acesta este un paragraf obisnuit si are culoarea rosie. 1uloarea implicita a textului paginii este definita in selectorul body.</p> <p class="ex">Acesta este un paragraf din clasa "ex" si are culoarea albastra.</p> </body> </html> &bs. Con3orm cerin2elor E#CD dac a2i de3init proprietatea color &n bodyD trebuie s de3ini2i $i proprietatea background&color.

Alinierea te!tului
Proprietatea text&align este utilizat pentru a seta alinierea orizontal a te tului. (e tul poate 3i aliniat la dreaptaD la st>n.aD centrat sau Iusti3ied. #!emplu$ <html> <head> <style type="text/css"> h1 %text&align'center* p.date %text&align'right* p.main %text&align'=ustify* </style> </head> <body> <h1>:xemplu de aliniere a textului cu 122</h1> <p class="date">>anuarie; !$1$</p> <p class="main">? @aca asi sti ca efortul pentru scrierea unui roman ma poate costa "iata; mi&asi lua toate masurile de siguranta pentru a inlatura o e"entualitate cum ar fi boala din care sa mi se traga moartea.@ar unica masura hotaratoare; aceea de a renunta la scris; nu asi lua&o.?<br/>Aarin ,reda</p> <p><b>Bbs'</b>Aodificati dimensiunea ferestrei bro(serului pentru a "edea cum arata alinierea =ustified.</p> </body> </html>

<ecorarea te!tului 2+

Proprietatea text&decoration este utilizat pentru a stabili decorarea unui te t. Cel mai des este utilizat pentru a &nltura sublinierea lin-/urilor din motive de aspectD ca &n e emplul urmtor? <html> <head> <style type="text/css"> a %text&decoration'none* </style> </head> <body> <p>.ink catre' <a href="http'//(((.yahoo.com">Cahoo</a></p> </body> </html> Poate 3i utilizat $i pentru a decora te tulD ca &n e emplul urmtor? <html> <head> <style type="text/css"> h1 %text&decoration'o"erline* h! %text&decoration'line&through* h3 %text&decoration'underline* h# %text&decoration'blink* </style> </head> <body> <h1>Acesta este un titlu 1</h1> <h!>Acesta este un titlu !</h!> <h3>Acesta este un titlu 3</h3> <h#>Acesta este un titlu #</h#> <p><b>Bbs'</b> Daloarea "blink" nu este recunoscuta de >:; 1hrome; sau 2afari.</p> </body> </html> Nu este recomandat s sublinia2i un te t care nu este un lin- deoarece poate produce con3uzie &n r>ndul cititorilor.

*ransformarea te!tului
Proprietatea text&transform este utilizat pentru a speci3ica literele mici $i literele mari dintr/un te t.

27

Poate 3i utilizat pentru a trans3orma tot te tul &n minuscule sau maIusculeD sau pentru a trans3orma &n maIuscul prima liter din 3iecare cuv>nt. ! emplu? <html> <head> <style type="text/css"> p.uppercase %text&transform'uppercase* p.lo(ercase %text&transform'lo(ercase* p.capitali+e %text&transform'capitali+e* </style> </head> <body> <p class="uppercase">Acesta este un text scris cu litere mari.</p> <p class="lo(ercase">Acesta este un text scris cu litere mici.</p> <p class="capitali+e">Acesta este un text in care fiecare cu"ant incepe cu litera mare.</p> </body> </html>

Indentarea te!tului
Proprietatea text&indentation este utilizat pentru a speci3ica indentarea primei linii dintr/un te t. ! emplu? <html> <head> <style type="text/css"> p %text&indent' $px* </style> </head> <body> <p>?@aca asi sti ca efortul pentru scrierea unui roman ma poate costa "iata; mi&asi lua toate masurile de siguranta pentru a inlatura o e"entualitate cum ar fi boala din care sa mi se traga moartea.@ar unica masura hotaratoare; aceea de a renunta la scris; nu asi lua&o.?<br/>Aarin ,reda</p> </body> </html>

20

#!emple
#!emplul 1 Ilustreaz cum se mre$te sau se mic$oreaz spa2iul dintre caractere. <html> <head> <style type="text/css"> h1 %letter&spacing'!px* h! %letter&spacing'&3px* </style> </head> <body> <h1>Acesta este un titlu 1</h1> <h!>Acesta este un titlu !</h!> </body> </html> #!emplul " Ilustreaz cum se stabile$te spa2iul dintre liniile unui para.ra3. <html> <head> <style type="text/css"> p.small %line&height' 9$E* p.big %line&height' !$$E* </style> </head> <body> <p> Acesta este un paragraf cu distanFa dintre linii normala. >n ma=oritatea bro(serelor; distanta standard dintre linii este intre 11$E si 1!$E. Acesta este un paragraf cu distanta dintre linii normala. </p> <p class="small"> Acesta este un paragraf cu distanta dintre linii micsorata. Acesta este un paragraf cu distanta dintre linii micsorata.

26

Acesta este un paragraf micsorata. </p> <p class="big"> Acesta este un paragraf marita. Acesta este un paragraf marita. Acesta este un paragraf marita. </p> </body> </html>

cu distanta dintre linii

cu distanta dintre linii cu distanta dintre linii cu distanta dintre linii

#!emplul % Ilustreaz cum se sc9imb direc2ia te tului pentru un element. <html> <head> <style type="text/css"> di".ex1 %direction'rtl* </style> </head> <body> <di">Acest text are directia normala de scris.</di"> <di" class="ex1">Acest text este scris de la dreapta la stanga.</di"> </body> </html> #!emplul ' Ilustreaz cum se mre$te spa2iul dintre cuvintele unui para.ra3. <html> <head> <style type="text/css"> p % (ord&spacing'3$px) * </style> </head>

#1

<body> <p> Acesta este un text cu distanta dintre cu"inte marita. </p> </body> </html> #!emplul . Ilustreaz cum se 3or2eaz scrierea te tului dintr/un element pe sin.ur linie. <html> <head> <style type="text/css"> p % (hite&space'no(rap) * </style> </head> <body> <p> Acesta este un text. Acesta este un text. Acesta este un text. Acesta este un text. </p> </body> </html> #!emplul ? Ilustreaz cum se stabile$te alinierea vertical a unei ima.ini din te t. <html> <head> <style type="text/css"> img.top %"ertical&align'text&top* 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

#1

img.super %"ertical&align'super* </style> </head> <body> <p>B <img src="img.gif" alt=",od suspendat" (idth="!G$" height=" $" /> imagine in interiorul unui paragraf; cu aliniere "erticala implicita.</p> <p>B <img class="top" src="img.gif" alt=",od suspendat" (idth="!G$" height=" $" /> imagine in interiorul unui paragraf;cu aliniere la marginea de sus a textului.</p> <p>B <img class="super" src="img.gif" alt=",od suspendat" (idth="!G$" height=" $" /> imagine in interiorul unui paragraf; cu aliniere la marginea de =os a textului.</p> </body> </html>

*oate propriet;ile CSS pentru formatarea te!tului

Proprietate color direction line& height letter& spacing <escriere Seteaz culoarea te tului Seteaz direc2ia te tului Seteaz distan2a dintre linii )re$te sau mic$oreaz spa2iul dintre caractere =alori color ltr rtl normal number length % normal length left ri0-t center Bustif> none underline overline line1t-rou0blin/ length % none

text&align 4liniaz un element &n cadrul te tului

text& decoration 4dau. decora2iuni unui te t text& indent text& Indenteaz prima linie de te t dintr/un element 4dau. umbr unui te t

#2

shado( text& transform

"ertical& align

(hite& space (ord& spacing

color length none capitalize Controleaz literele unui element uppercase lo9ercase baseline sub super top te!t1top Seteaz alinierea vertical a unui element middle bottom te!t1bottom length % normal Seteaz spa2iul alb din interiorul unui pre element no9rap )re$te sau mic$oreaz spa2iul dintre normal cuvinte length

C. onturi
Propriet2ile CSS pentru 3onturi de3inesc 3amilia de 3onturiD &n.ro$areaD mrimea $i stilul unui te t.

amiliile de fonturi (n CSS

Fn CSSD numele unei 3amilii de 3onturi se poate de3ini &n dou moduri? amilie 0eneric L un .rup de 3amilii de 3onturi care au un aspect similar :ca HSeri3H sau H)onospaceH; amilie de fonturi L o 3amilie speci3ic de 3onturi :ca H(imes Ne< RomanH sau H4rialH; amilia amilia specific <escriere 0eneric ,onturile de tip seri3 au linii mici la (imes Ne< Roman Seri3 Georgia s3>r$itul unora dintre caractere Arial HSansH &nseamn 3r L aceste 3onturi Sans/seri3 nu au linii la s3>r$itul caracterelor Verdana Courier New )onospace (oate caracterele monospace au aceea$i

##

Lucida Console

&nl2ime

,amilia de 3onturi a unui te t este stabilit cu proprietatea font&family. 4ceast proprietate ar trebui s precizeze cel pu2in dou 3amilii de 3onturi. 5ac bro<serul nu recunoa$te prima 3amilieD o va &ncerca pe a doua. Fncepe2i cu 3ontul pe care &l dori2i $i termina2i cu o 3amilie .eneric. &bs? 5ac numele 3amiliei de 3onturi este 3ormat din mai multe cuvinteD numele trebuie scris &ntre .9ilimeleD ca? H(imes Ne< RomanH. 5ac 3olosi2i mai multe nume de 3onturiD ele trebuie separate &n list prin vir.ul. #!emplu$. <html> <head> <style type="text/css"> p.serif%font&family'"Himes Ie( Joman"; Himes; 2erif* p.sansserif%font&family'Arial; Kel"etica; 2ans&serif* </style> </head> <body> <h1>Lamiliile de fonturi in 122</h1> <p class="serif">Acest paragraf foloseste fontul Himes Ie( Joman.</p> <p class="sansserif">Acest paragraf foloseste fontul Arial.</p> </body> </html>

Proprietatea font&style
4ceast proprietate este utilizat 3recvent pentru a seta te tul italic. Proprietatea are trei valori? normal L te tul este a3i$at normal italic L te tul este a3i$at italic obliMue L 3oarte similar cu italicD dar mai pu2in recunoscut de bro<sere #!emplu? <html> <head> <style type="text/css"> p.normal %font&style'normal* p.italic %font&style'italic*

#"

p.obliMue %font&style'obliMue* </style> </head> <body> <p class="normal">Acest paragraf este scris cu fontul normal.</p> <p class="italic">Acest paragraf este scris cu fontul italic.</p> <p class="obliMue">Acest paragraf este scris cu fontul oblic.</p> </body> </html>

Proprietatea font&si+e
4ceast proprietate stabile$te dimensiunea unui te t. Maloarea propriet2ii poate 3i absolut sau relativ. 5imensiunea absolut? ,i eaz te tul la dimensiunea speci3icat Nu permite user/ului s modi3ice dimensiunea te tului &n toate bro<serele :dezavantaI; !ste util c>nd este cunoscut dimensiunea 3izic a 3erestrei de a3i$are 5imensiunea relativ? Stabile$te dimensiunea te tului &n 3unc2ie de elementele &nconIurtoare Permite utilizatorului s modi3ice &n bro<ser dimensiunea te tului &bs. 5ac nu speci3ica2i dimensiunea 3ontuluiD mrimea implicit pentru te tul normal :cum ar 3i para.ra3ul; este de 1+p :1+p N1em;. Stabilirea dimensiunii te!tului (n pi!eli 5ac lucra2i cu valori &n pi eliD ave2i control total asupra dimensiunii te tului. #!emplu$ <html> <head> <style> h1 %font&si+e'#$px* h! %font&si+e'3$px* p %font&si+e'1#px* </style> </head> <body>

#%

<h1>Acesta este un titlu 1</h1> <h!>Acesta este un titlu !</h!> <p>Acesta este un paragraf.</p> <p>@aca preci+ati dimensiunea fontului in pixeli; in Lirefox; 1hrome; si 2afari textul "a putea fi redimensionat; iar in >nternet :xplorer nu.</p> </body> </html> &bs. (e tul poate 3i redimensionat &n orice bro<ser 3olosind instrumentul zoom. 4ceasta se aplic &ns &ntre.ii pa.iniD nu numai te tului dorit. Stabilirea dimensiunii te!tului (n em Pentru a evita problemele de redimensionare din Internet ! plorerD mul2i proiectan2i <eb utilizeaz em &n loc de pi eli. Unitatea de msur em este recomandat $i de E#C. 1em este e.al cu dimensiunea 3ontului normalD adic 1+p . Pentru a trece de la pi eli la em 3olosim 3ormula? pixelsC1+Nem #!emplu$ <html> <head> <style> h1 %font&si+e'!. em* /3 #$px/18=!. em 3/ h! %font&si+e'1.7G em* /3 3$px/18=1.7G em 3/ p %font&si+e'$.7G em* /3 1#px/18=$.7G em 3/ </style> </head> <body> <h1>Acesta este un titlu 1</h1> <h!>Acesta este un titlu !</h!> <p>Acesta este un paragraf.</p> <p>@aca specificati dimensiunea fontului in em; in >nternet :xplorer; Lirefox; 1hrome; si 2afari textul "a putea fi redimensionat. </p> </body> </html> 5e$i te tul arat la 3el ca &n e emplul precedentD el poate 3i redimensionat &n orice bro<ser. (otu$iD &n Internet ! plorerD c>nd un te t este redimensionatD devine mai mic sau mai mare dec>t ar trebui. olosi;i o combina;ie de procente i em

#+

Solu2ia care 3unc2ioneaz &n toate bro<sereleD este s stabili2i &n procente dimensiunea implicit pentru elementul bodyD ca &n e emplul urmtor? <html> <head> <style> body %font&si+e'1$$E* h1 %font&si+e'!. em* h! %font&si+e'1.7G em* p %font&si+e'$.7G em* </style> </head> <body> <h1>Acesta este un titlu 1</h1> <h!>Acesta este un titlu !</h!> <p>Acesta este un paragraf.</p> <p>@aca specificati dimensiunea fontului in procente si em;textul "a fi afisat la fel in toate bro(serele si "a putea fi redimensionat0</p> </body> </html>

#!emple
#!emplul 1 Ilustreaz cum se stabile$te .rosimea 3ontului. <html> <head> <style type="text/css"> p.normal %font&(eight'normal* p.light %font&(eight'lighter* p.thick %font&(eight'bold* p.thicker %font&(eight'9$$* </style> </head> <body> <p class="normal">Acesta este un paragraf.</p> <p class="light">Acesta este un paragraf.</p> <p class="thick">Acesta este un paragraf.</p> <p class="thicker">Acesta este un paragraf.</p> </body>

#7

</html> #!emplul " Ilustreaz cum se stabile$te varianta 3ontului. <html> <head> <style type="text/css"> p.normal %font&"ariant'normal* p.small %font&"ariant'small&caps* </style> </head> <body> <p class="normal">Iumele meu este Adela ,opescu.</p> <p class="small">Iumele meu este Adela ,opescu.</p> </body> </html> #!emplul % Ilustreaz cum pute2i 3olosi proprietatea scurt pentru a stabili toate caracteristicile 3ontului &ntr/o sin.ur declara2ie. <html> <head> <style type="text/css"> p.ex1 % font'1 px arial;sans&serif) * p.ex! % font'italic bold 1!px/3$px Neorgia; serif) * </style> </head> <body> <p class="ex1">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. </p>

#0

<p class="ex!"> 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. </p> </body> </html>

*oate propriet;ile pentru fonturi (n CSS

Proprietate =alori font-style font-variant font-weight font-size/line-height font-family Seteaz toate propriet2ile 3ontului font caption &ntr/o sin.ur declara2ie icon menu messa0e1bo! small1caption status1bar family-name font&family Speci3ic 3amilia de 3onturi generic-family !!1small !1small small medium lar0e font&si+e Speci3ic dimensiunea 3ontului !1lar0e !!1lar0e smaller lar0er length % normal font&style Speci3ic stilul 3ontului italic obliDue Speci3ic dac te tul este a3i$at normal font&"ariant sau nu cu maIuscule mici small1caps font&(eight Speci3ic .rosimea 3ontului normal bold bolder <escriere

#6

li0-ter 144 "44 %44 '44 .44 ?44 E44 C44 F44

F. ,in/uri
ormatarea lin/urilor
*in-urile pot 3i stilizate cu aIutorul propriet2ilor CSS D cum ar 3i colorD font&familyD background&color. Special pentru lin-uri este 3aptul c ele trebuie 3ormatate di3eritD &n 3unc2ie de starea &n care sunt. Cele patru stri ale unui lin- sunt? a'link / a este lin- normalD nevizitat a'"isited / a este un lin- care a 3ost vizitat de user a'ho"er / a este un lin- peste care se mi$c mouse/ul a'acti"e / a este un lin- apsat :activ; #!emplu$ <html> <head> <style type="text/css"> a'link %color'4LL$$$$* /3 link ne"i+itat 3/ a'"isited %color'4$$LL$$* /3 link "i+itat 3/ a'ho"er %color'4LL$$LL* /3 link peste care se misca mouse&ul 3/ a'acti"e %color'4$$$$LL* /3 link selectat 3/ </style> </head> <body> <p><b><a href="http'//(((.google.com" target="-blank">Acesta este un link</a></b></p>

"1

<p><b>Iota'</b> a'ho"er HJ:/O>: scrisa in definitia 122 dupa a'link si a'"isited pentru a fi efecti"a.</p> <p><b>Iota'</b> a'acti"e HJ:/O>: scrisa in definitia 122 dupa a'ho"er pentru a fi efecti"a.</p> </body> </html> C>nd stabili2i stilul lin-urilorD e ist anumite re.uli privind ordinea declara2iilor? a'ho"er trebuie scris dup a'link $i a'"isited a'acti"e trebuie scris dup a'ho"er

<ecorarea te!tului
Proprietatea text&decoration este 3olosit cel mai des pentru a &nltura sublinierea lin-/urilor. #!emplu$ <html> <head> <style type="text/css"> a'link %text&decoration'none* /3 link ne"i+itat 3/ a'"isited %text&decoration'none* /3 link "i+itat 3/ a'ho"er %text&decoration'underline* /3 mouse peste link 3/ a'acti"e %text&decoration'underline* /3 link selectat 3/ </style> </head> <body> <p><b><a href="http'//(((.google.com" target="-blank">Acesta este un link</a></b></p> </body> </html>

Culoarea fundalului
Proprietatea background&color este utilizat pentru a speci3ica culoarea de 3undal a lin-urilor. #!emplu$ <html> <head> <style type="text/css">

"1

a'link %background&color'4/!LL99)* ne"i+itat 3/ a'"isited %background&color'4LLLL7 )* 3/ a'ho"er %background&color'4LLG$#@)* link 3/ a'acti"e %background&color'4LLG$#@)* selectat 3/ </style> </head>

/3 link /3 link "i+itat /3 mouse peste /3 link

<body> <p><b><a href="http'//(((.google.com" target="-blank">Acesta este un link</a></b></p> </body> </html>

#!emple
#!emplul 1 Ilustreaz cum se aplic unui lin- di3erite stiluri. <html> <head> <style type="text/css"> a.one'link %color'4ff$$$$)* a.one'"isited %color'4$$$$ff)* a.one'ho"er %color'4ffcc$$)* a.t(o'link %color'4ff$$$$)* a.t(o'"isited %color'4$$$$ff)* a.t(o'ho"er %font&si+e'1 $E)* a.three'link %color'4ff$$$$)* a.three'"isited %color'4$$$$ff)* a.three'ho"er %background'488ff88)* a.four'link %color'4ff$$$$)* a.four'"isited %color'4$$$$ff)* a.four'ho"er %font&family'monospace)* a.fi"e'link %color'4ff$$$$)text&decoration'none)* a.fi"e'"isited %color'4$$$$ff)text&decoration'none)* a.fi"e'ho"er %text&decoration'underline)*

"2

</style> </head> <body> <p>,limbati mouse&ul peste linkuri pentru a "edea cum se schimba aspectul lor.</p> <p><b><a class="one" href="http'//(((.google.com" target="-blank">Acest link isi schimba culoarea</a></b></p> <p><b><a class="t(o" href="http'//(((.google.com" target="-blank">Acest link isi schimba dimensiunea fontului</a></b></p> <p><b><a class="three" href="http'//(((.google.com" target="-blank">Acest link isi schimba culoarea de fundal</a></b></p> <p><b><a class="four" href="http'//(((.google.com" target="-blank">Acest link isi schimba familia de fonturi</a></b></p> <p><b><a class="fi"e" href="http'//(((.google.com" target="-blank">Acest link isi schimba decoratia</a></b></p> </body> </html> #!emplul " Ilustreaz cum se combin mai multe propriet2i CSS pentru a a3i$a lin-/urile ca ni$te csu2e colorate. <html> <head> <style type="text/css"> a'link;a'"isited % display'block) font&(eight'bold) color'4LLLLLL) background&color'497bf!1) (idth'1!$px) text&align'center) padding'#px) text&decoration'none) *

"#

a'ho"er;a'acti"e % background&color'4GA991A) * </style> </head> <body> <a href="http'//(((.google.com" target="-blank">Acesta este un link</a> </body> </html>

14. ,iste
Propriet2ile CSS pentru liste v permit s? seta2i di3eri2i marcatori pentru itemii dintr/o list ordonat sau neordonat s seta2i o ima.ine ca marcator pentru itemii unei liste neordonate

Setarea diferi;ilor marcatori

(ipul marcatorilor itemilor dintr/o list neordonat se stabile$te cu proprietatea list&style&type. #!emplu$ <html> <head> <style type="text/css"> ul.a %list&style&type'circle)* ul.b %list&style&type'sMuare)* ol.c %list&style&type'upper&roman)* ol.d %list&style&type'lo(er&alpha)* </style> </head> <body> <p>:xemplu de lista neordonata'</p> <ul class="a"> <li>1afea</li> <li>1eai</li> <li>,epsi</li>

""

</ul> <ul class="b"> <li>1afea</li> <li>1eai</li> <li>,epsi</li> </ul> <p>:xemplu de listP ordonatP'</p> <ol class="c"> <li>1afea</li> <li>1eai</li> <li>,epsi</li> </ol> <ol class="d"> <li>1afea</li> <li>1eai</li> <li>,epsi</li> </ol> </body> </html> =alorile propriet;ii pentru liste neordonate =aloare <escriere none ,r marcator disc Implicit. )arcatorul este un cerc plin circle )arcatorul este un cerc .ol sDuare )arcatorul este un ptrat =alorile propriet;ii pentru liste ordonate =aloare <escriere armenian )arcatorul este un numr tradi2ional armenesc decimal )arcatorul este un numr &n baza zece )arcatorul este un numr precedat de zero :11D 12D 1#D decimal1leadin01zero etc.; )arcatorul este un numr tradi2ional .eor.ian :anD banD 0eor0ian .anD etc.; lo9er1alp-a )arcatorul este litera mica :aD bD cD dD eD etc.; lo9er10ree/ )arcatorul este liter mic .receasc :alp9aD betaD

"%

.ammaD etc.; )arcatorul este liter latin mic :aD bD cD dD eD etc.; )arcatorul este numr roman mic :iD iiD iiiD ivD vD etc.; )arcatorul ete liter mare :4D BD CD 5D !D etc.; )arcatorul este liter latin mare :4D BD CD 5D !D etc.; )arcatorul este numr roman mare :ID IID IIID IMD MD upper1roman etc.; &bs$ Nici/o versiune de Internet ! plorer :inclusiv I!0; nu accept valorile Hdecimal/leadin./zeroHD Hlo<er/.ree-HD Hlo<er/latinHD Hupper/latinHD HarmenianHD sau H.eor.ianH. lo9er1latin lo9er1roman upper1alp-a upper1latin

& ima0ine ca marcator (n list

Pentru a speci3ica o ima.ine ca marcator &ntr/o list se utilizeaz proprietatea list&style&imageD ca &n e emplul urmtor? <html> <head> <style type="text/css"> ul % list&style&image'url5<sMpurple.gif<6) * </style> </head> <body> <ul> <li>1eai</li> <li>1afea</li> <li>.apte</li> </ul> </body> </html>

Proprietatea scurt
Pute2i speci3ica toate propriet2ile unei liste &ntr/o sin.ur declara2ie 3olosind list&style ca &n urmtorul e emplu? <html> <head> <style type="text/css"> ul %

"+

list&style'sMuare url5"sMpurple.gif"6) * </style> </head> <body> <ul> <li>1afea</li> <li>1eai</li> <li>.apte</li> </ul> </body> </html> C>nd 3olosi2i varianta scurtD ordinea valorilor este? list&style&type list&style&position list&style&image Nu conteaz dac unele valori lipsescD c>t timp valorile care apar respect aceast ordine.

#!emplu
4cest e emplu ilustreaz utilizarea tuturor tipurilor de marcatori &n CSS. <html> <head> <style type="text/css"> ul.a %list&style&type'disc)* ul.b %list&style&type'circle)* ul.c %list&style&type'sMuare)* ul.d %list&style&type'none)* ol.e %list&style&type'decimal)* ol.f %list&style&type'decimal&leading&+ero)* ol.g %list&style&type'lo(er&roman)* ol.h %list&style&type'upper&roman)* ol.i %list&style&type'lo(er&alpha)* ol.= %list&style&type'upper&alpha)* ol.k %list&style&type'lo(er&greek)* ol.l %list&style&type'lo(er&latin)* ol.m %list&style&type'upper&latin)* ol.n %list&style&type'armenian)* ol.o %list&style&type'georgian)* </style> </head>

"7

<body> <ul class="a"> <li>@iscuri</li> <li>1eai</li> <li>1afea</li> </ul> <ul class="b"> <li>1ercuri</li> <li>1eai</li> <li>1afea</li> </ul> <ul class="c"> <li>,atrate</li> <li>,aine</li> <li>Bua</li> </ul> <ul class="d"> <li>Lara marcatori</li> <li>1arti</li> <li>1aiete</li> </ul> <ol class="e"> <li>Aarcatori cifre</li> <li>/aieti</li> <li>Lete</li> </ol> <ol class="f"> <li>Aarcatori care incep cu +ero</li> <li>Jochii</li> <li>1amasi</li> </ol> <ol class="g"> <li>1ifre romane mici</li> <li>1ase</li> <li>Dile</li> </ol>

"0

<ol class="h"> <li>1ifre romane mari</li> <li>1arioci</li> <li>Acuarele</li> </ol> <ol class="i"> <li>Aarcatori litere mici</li> <li>Aere</li> <li>.amai</li> </ol> <ol class="="> <li>Aarcatori litere mari</li> <li>Nutui</li> <li>,ere</li> </ol> <ol class="k"> <li>.itere grecesti mici</li> <li>1ai</li> <li>>epuri</li> </ol> <ol class="l"> <li>.itere latine mici</li> <li>.apte</li> <li>2uc</li> </ol> <ol class="m"> <li>.itere latine mari</li> <li>1arti</li> <li>Je"iste</li> </ol> <ol class="n"> <li>Aarcatori armenesti</li> <li>,antaloni</li> <li>2acouri</li> </ol> <ol class="o"> <li>Aarcatori georgieni</li>

"6

<li>/ere</li> <li>Din</li> </ol> </body> </html>

*oate propriet;ile pentru liste (n CSS

Proprietate list&style list&style& image list&style& position <escriere =alori list-style-type Precizeaz toate propriet2ile listei list-style-position &ntr/o sin.ur declara2ie list-style-image UR, Speci3ic o ima.ine drept marcator none Speci3ic dac marcatorii din list inside sunt &n interiorul sau e teriorul outside con2inutului none disc circle sDuare decimal decimal1leadin01 zero armenian Speci3ic tipul marcatorilor din list 0eor0ian lo9er1alp-a upper1alp-a lo9er10ree/ lo9er1latin upper1latin lo9er1roman upper1roman

list&style& type

11. *abele
4spectul unui tabel '()* poate 3i &mbunt2it 3olosind CSS.

C-enarele tabelului %1

Pentru a speci3ica c9enarele unui tabel &n CSSD se 3olose$te proprietatea border. ! emplul urmtor seteaz un c9enar ne.ru pentru tabel $i pentru elementele th $i td? <html> <head> <style type="text/css"> table;th;td % border'1px solid black) * </style> </head> <body> <table> <tr> <th>Iume</th> <th>,renume</th> </tr> <tr> <td>,etrescu</td> <td>Amalia</td> </tr> <tr> <td>Aanoliu</td> <td>1ristian</td> </tr> </table> </body> </html> 8bserva2i c tabelul din e emplul anterior are c9enare duble. 4cest lucru se &nt>mpl deoarece elementele tableD thD $i td au c9enare separate. Pentru a a3i$a un sin.ur c9enar pentru tabelD 3olosi2i proprietatea border&collapse.

Proprietatea border&collapse
4ceast proprietate speci3ic dac c9enarele tabelului sunt sau nu reunite &ntr/ unul sin.ur. <html> <head> <style type="text/css"> table

%1

% border&collapse'collapse) * table; td; th % border'1px solid black) * </style> </head> <body> <table> <tr> <th>Iume</th> <th>,renume</th> </tr> <tr> <td>,etrescu</td> <td>Amalia</td> </tr> <tr> <td>Aanoliu</td> <td>1ristian</td> </tr> </table> </body> </html>

<imensiunile unui tabel

Cu aIutorul propriet2ilor (idth $i height pute2i stabili l2imea $i &nl2imea unui tabel. Fn e emplul urmtor l2imea tabelului este stabilit la 111O $i &nl2imea elementelor th la %1p ? <html> <head> <style type="text/css"> table;td;th % border'1px solid black) * table % (idth'1$$E)

%2

* th % height' $px) * </style> </head> <body> <table> <tr> <th>Iume</th> <th>,renume</th> <th>:conomii</th> </tr> <tr> <td>,etrescu</td> <td>Amalia</td> <td> $$JBI</td> </tr> <tr> <td>Aanoliu</td> <td>1ristian</td> <td>3 $JBI</td> </tr> <tr> <td>/arbu</td> <td>@enisa</td> <td>3$$JBI</td> </tr> <tr> <td>2uciu</td> <td>Andrei</td> <td># $JBI</td> </tr> </table> </body> </html>

Alinierea te!tului din tabel

Pentru a alinia te tul dintr/un tabel se 3olosesc propriet2ile text&align $i "ertical&align.

%#

Proprietatea text&align stabile$te alinierea orizontal a te tuluiD care poate avea valorile leftD right sau center? <html> <head> <style type="text/css"> table;td;th % border'1px solid black) * td % text&align'right) * </style> </head> <body> <table> <tr> <th>Iume</th> <th>,renume</th> <th>:conomii</th> </tr> <tr> <td>,etrescu</td> <td>Amalia</td> <td> $$JBI</td> </tr> <tr> <td>Aanoliu</td> <td>1ristian</td> <td>3 $JBI</td> </tr> <tr> <td>/arbu</td> <td>@enisa</td> <td>3$$JBI</td> </tr> <tr> <td>2uciu</td> <td>Andrei</td> <td># $JBI</td> </tr>

%"

</table> </body> </html> Proprietatea "ertical&align stabile$te alinierea vertical a te tuluiD $i poate avea valorile topD bottom sau middle? <html> <head> <style type="text/css"> table; td; th % border'1px solid black) * td % height' $px) "ertical&align'bottom) * </style> </head> <body> <table> <tr> <th>Iume</th> <th>,renume</th> <th>:conomii</th> </tr> <tr> <td>,etrescu</td> <td>Amalia</td> <td> $$JBI</td> </tr> <tr> <td>Aanoliu</td> <td>1ristian</td> <td>3 $JBI</td> </tr> <tr> <td>/arbu</td> <td>@enisa</td> <td>3$$JBI</td> </tr>

%%

<tr> <td>2uciu</td> <td>Andrei</td> <td># $JBI</td> </tr> </table> </body> </html>

Spa;iul dintre c-enar i con;inut 2table paddin05

Pentru a controla spa2iul dintre c9enarul $i con2inutul tabeluluiD utiliza2i &n elementele td $i th proprietatea padding? <html> <head> <style type="text/css"> table; td; th % border'1px solid black) * td % padding'1 px) * </style> </head> <body> <table> <tr> <th>Iume</th> <th>,renume</th> <th>:conomii</th> </tr> <tr> <td>,etrescu</td> <td>Amalia</td> <td> $$JBI</td> </tr> <tr> <td>Aanoliu</td> <td>1ristian</td> <td>3 $JBI</td> </tr>

%+

<tr> <td>/arbu</td> <td>@enisa</td> <td>3$$JBI</td> </tr> <tr> <td>2uciu</td> <td>Andrei</td> <td># $JBI</td> </tr> </table> </body> </html>

Culoarea tabelelor
Fn e emplul urmtor este precizat culoarea c9enarului tabelului $i culorile pentru te tul $i 3undalul elementelor th? <html> <head> <style type="text/css"> table; td; th % border'1px solid green) * th % background&color'green) color'(hite) * </style> </head> <body> <table> <tr> <th>Iume</th> <th>,renume</th> <th>:conomii</th> </tr> <tr> <td>,etrescu</td> <td>Amalia</td> <td> $$JBI</td>

%7

</tr> <tr> <td>Aanoliu</td> <td>1ristian</td> <td>3 $JBI</td> </tr> <tr> <td>/arbu</td> <td>@enisa</td> <td>3$$JBI</td> </tr> <tr> <td>2uciu</td> <td>Andrei</td> <td># $JBI</td> </tr> </table> </body> </html>

#!emple
#!emplul 1 Ilustreaz cum pute2i crea un tabel cu un aspect deosebit. <html> <head> <style type="text/css"> 4customers % font&family'"Hrebuchet A2"; Arial; Kel"etica; sans& serif) (idth'1$$E) border&collapse'collapse) * 4customers td; 4customers th % font&si+e'1em) border'1px solid 497bf!1) padding'3px Gpx !px Gpx) * 4customers th % font&si+e'1.1em)

%0

text&align'left) padding&top' px) padding&bottom'#px) background&color'4AG19#!) color'4ffffff) * 4customers tr.alt td % color'4$$$$$$) background&color'4:AL!@3) * </style> </head> <body> <table id="customers"> <tr> <th>1ompania</th> <th>1ontact</th> <th>Hara</th> </tr> <tr> <td>Alfreds Lutterkiste</td> <td>Aaria Anders</td> <td>Nermania</td> </tr> <tr class="alt"> <td>/erglunds snabbkQp</td> <td>1hristina /erglund</td> <td>2uedia</td> </tr> <tr> <td>1entro comercial Aocte+uma</td> <td>Lrancisco 1hang</td> <td>Aexic</td> </tr> <tr class="alt"> <td>:rnst Kandel</td> <td>Joland Aendel</td> <td>Austria</td> </tr> <tr> <td>>sland Hrading</td> <td>Kelen /ennett</td>

%6

<td>OR</td> </tr> <tr class="alt"> <td>RQniglich :ssen</td> <td>,hilip 1ramer</td> <td>Nermania</td> </tr> <tr> <td>.aughing /acchus Sinecellars</td> <td>Coshi Hannamuri</td> <td>1anada</td> </tr> <tr class="alt"> <td>Aaga++ini Alimentari Jiuniti</td> <td>Nio"anni Jo"elli</td> <td>>talia</td> </tr> <tr> <td>Iorth/2outh</td> <td>2imon 1ro(ther</td> <td>OR</td> </tr> <tr class="alt"> <td>,aris spTcialitTs</td> <td>Aarie /ertrand</td> <td>Lranta</td> </tr> </table> </body> </html> #!emplul " Ilustreaz cum stabili2i pozi2ia denumirii tabelului :proprietatea caption;. <html> <head> <style type="text/css"> caption %caption&side'bottom)* </style> </head> <body> <table border="1">

+1

<caption>Habel 1.1 1lienti</caption> <tr> <th>1ompania</th> <th>1ontact</th> <th>Hara</th> </tr> <tr> <td>Alfreds Lutterkiste</td> <td>Aaria Anders</td> <td>Nermania</td> </tr> <tr> <td>/erglunds snabbkQp</td> <td>1hristina /erglund</td> <td>2uedia</td> </tr> <tr> <td>1entro comercial Aocte+uma</td> <td>Lrancisco 1hang</td> <td>Aexic</td> </tr> <tr> <td>:rnst Kandel</td> <td>Joland Aendel</td> <td>Austria</td> </tr> <tr> <td>>sland Hrading</td> <td>Kelen /ennett</td> <td>OR</td> </tr> <tr> <td>Aaga++ini Alimentari Jiuniti</td> <td>Nio"anni Jo"elli</td> <td>>talia</td> </tr> <tr> <td>Iorth/2outh</td> <td>2imon 1ro(ther</td> <td>OR</td> </tr> </table> </body>

+1

</html>

1". +odelul bo! (n CSS

(oate elementele '()* pot 3i considerate a 3i de tip bo :caset;. Fn CSSD termenul Hbo modelH este 3olosit c>nd se discut despre proiectare $i aspect. Fn CSS modelul bo este &n esen2 o caset care &nconIoar un element '()* $i este 3ormat din? mar.iniD c9enareD distan2a dintre c9enar $i con2inut :paddin.; $i con2inut. )odelul bo ne permite s plasm c9enare &n Iurul elementelor $i s amplasm elementele &n rela2ie cu alte elemente. Ima.inea de mai Ios ilustreaz modelul bo ?

! plicarea componentelor? +ar0in L 8 zon .oal &n Iurul unui c9enar. )ar.inea nu are culoare de 3undal $i este complet transparent. Gorder L Un c9enar care &nconIoar con2inutul. Paddin0 L 8 zon .oal &n Iurul con2inutului. 4ceast zon este a3ectat de culoarea de 3undal a casetei. Content L Con2inutul caseteiD unde apar te tul $i ima.inile. Pentru a stabili corect &nl2imea $i l2imea unui element &n orice bro<serD trebuie s &n2ele.e2i cum lucreaz modelul bo .

<imensiunile unui element +2

Important$ C>nd speci3ica2i &n CSS propriet2ile (idth $i height ale unui elementD stabili2i de 3apt dimensiunile numai pentru zona de con2inut din desenul de mai sus. Pentru a cunoa$te adevratele dimensiuni ale unui elementD trebuie s adu.a2i paddin./ulD c9enarul $i mar.inea. *2imea total a elementului din e emplul urmtor este #11p ? (idth'! $px) padding'1$px) border' px solid gray) margin'1$px) S socotim? 2%1p :l2imea con2inutului; P 21p :paddin./ul st>n. $i drept; P 11p :c9enarul din st>n.a $i din dreapta; P 21p :mar.inea din st>n.a $i din dreapta; N #11p S presupunem c e ist doar 2%1p spa2iu pentru un element $i s construim un element cu l2imea total de 2%1p ? <html> <head> <style type="text/css"> di".ex % (idth'!!$px) padding'1$px) border' px solid gray) margin'$px) * </style> </head> <body> <img src="..! $px.gif" (idth="! $" height="1$" /><br /><br /> <di" class="ex">.inia de deasupra are ! $px lungime.<br /> .ungimea totala a acestui element este tot ! $px.</di"> <p><b>>mportant'</b> Acest exemplu nu "a fi afisat corect in >:0<br /></p> </body>

+#

</html> *2imea total a unui element trebuie calculat ast3el? *2imea total a elementului N l2ime P paddin./ul st>n. P paddin./ul drept P c9enarul st>n. P c9enarul drept P mar.inea st>n. P mar.inea dreapt Fnl2imea total a unui element trebuie calculat ast3el? Fnl2imea total a elementului N &nl2ime P paddin./ul de sus P paddin./ul de Ios P c9enarul de susP c9enarul de Ios P mar.inea de sus P mar.inea de Ios

Probleme de compatibilitate (n bro9sere

5ac testa2i e emplul anterior &n Internet ! plorerD ve2i vedea c l2imea total nu este de 2%1p . I! include paddin./ul $i bordura &n l2imeD c>nd proprietatea (idth este setat. Pentru a rezolva aceast problemD adu.a2i &n document declara2ia @B1HC,: ca &n e emplul urmtor? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> di".ex % (idth'!!$px) padding'1$px) border' px solid gray) margin'$px) * </style> </head> <body> <img src="! $px.gif" (idth="! $" height="1$" /><br /><br /> <di" class="ex">.inia de deasupra are ! $px lungime.<br /> Acum latimea totala a acestui element este tot ! $px.</di"> <p><b>Iote'</b> >n acest exemplu am adaugat declaratia @B1HC,: 5deasupra elementului html6;

+"

astfel incat "a fi afisat corect in toate bro(serele.</p> </body> </html>

1%. C-enare
Proprietatea CSS border de3ine$te c9enarul din Iurul unui element. Pute2i speci3ica stilul $i culoarea unui element al c9enarului.

Stilul c-enarului
Proprietatea border&style speci3ic ce 3el de bordur va 3i a3i$at. &bs. Nici/una din celelalte propriet2i ale c9enarului nu va avea e3ectD dac proprietatea border&style nu este setat. 4cest e emplu ilustreaz ce valori poate avea proprietatea border&style $i cum arat 3iecare c9enar? <html> <head> <style type="text/css"> 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.groo"e %border&style'groo"e* p.ridge %border&style'ridge* p.inset %border&style'inset* p.outset %border&style'outset* p.hidden %border&style'hidden* </style> </head> <body> <p class="none">Lara chenar.</p> <p class="dotted">1henar punctat.</p> <p class="dashed">1henar tip linie intrerupta.</p> <p class="solid">1henar plin.</p> <p class="double">1henar dublu.</p> <p class="groo"e">1henar tip groo"e.</p> <p class="ridge">1henar tip ridge.</p>

+%

<p class="inset">1henar tip inset.</p> <p class="outset">1henar tip outset.</p> <p class="hidden">1henar ascuns.</p> </body> </html>

Hrosimea c-enarului
=rosimea c9enarului se stabile$te cu proprietatea border&(idth. =rosimea se stabile$te &n pi eli sau se 3olose$te una din valorile prede3inite? thinD mediumD sau thick. &bs$ Proprietatea border&(idth nu 3unc2ioneaz dac este utilizat sin.urG mai &nt>i trebuie stabilit proprietatea border&style. #!emplu$ <html> <head> <style type="text/css"> p.one % border&style'solid) border&(idth' px) * p.t(o % border&style'solid) border&(idth'medium) * p.three % border&style'solid) border&(idth'1px) * </style> </head> <body> <p class="one">On text oarecare.</p> <p class="t(o">On text oarecare.</p> <p class="three">On text oarecare.</p> </body> </html>

++

Culoarea c-enarului
Pentru a stabili culoarea c9enarului se utilizeaz proprietatea border&color. Culoarea poate 3i precizat prin? nume L numele culoriiD ca HredH R=B / valoare R=BD ca Hr0b2"..34345H 'e L valoare 9e azecimalD ca @6ff4444H Pute2i stabili culoarea c9enarului $i cu valoarea HtransparentH. &bs$ Proprietatea border&color nu are nici/un e3ect dac nu a 3ost setat mai &nt>i proprietatea border&style. #!emplu$ <html> <head> <style type="text/css"> p.one % border&style'solid) border&color'red) * p.t(o % border&style'solid) border&color'497bf!1) * </style> </head> <body> <p class="one">On chenar rosu plin.</p> <p class="t(o">On chenar "erde plin.</p> </body> </html>

,aturile unui c-enar

Fn CSS este posibil s seta2i &n mod di3erit laturile unui c9enar. #!emplu$ <html> <head> <style type="text/css"> p % border&top&style'dotted)

+7

border&right&style'solid) border&bottom&style'dotted) border&left&style'solid) * </style> </head> <body> <p>Acest paragraf are doua tipuri de chenare.</p> </body> </html> ! emplul anterior poate 3i realizat $i cu o sin.ur declara2ieD ca &n e emplul urmtor? <html> <head> <style type="text/css"> p % border&style'dotted solid) * </style> </head> <body> <p>Acest paragraf are doua tipuri de chenare.</p> </body> </html> Proprietatea border&style poate avea &ntre una $i patru valori. border1st>le$dotted solid double das-edI o latura de sus este punctat o latura dreapt este plin o latura de Ios este dubl o latura st>n. este &ntrerupt border1st>le$dotted solid doubleI o latura de sus este punctat o laturile dreapt $i st>n. sunt pline o latura de Ios este dubl border1st>le$dotted solidI o laturile de sus $i de Ios sunt punctate o laturile din st>n.a $i din dreapta sunt pline

+0

border1st>le$dottedI o cele patru laturi sunt punctate

Proprietatea scurt
Pentru a scurta codulD este posibil s speci3icm toate propriet2ile c9enarului &ntr/o sin.ur proprietate. Pentru c9enareD varianta scurt este border? <html> <head> <style type="text/css"> p % border' px solid red) * </style> </head> <body> <p>Acesta este un paragraf oarecare.</p> </body> </html> C>nd 3olosi2i varianta scurtD ordinea valorilor este? border&(idth border&style border&color Nu conteaz ce valori lipsesc :oricum border&style trebuie s apar;D at>t timp c>t valorile prezente sunt speci3icate &n aceast ordine.

#!emple
#!emplul 1 Ilustreaz utilizarea variantei scurte pentru a seta toate propriet2ile c9enarului cu o sin.ur declara2ie. <html> <head> <style type="text/css"> p % border&style'solid) border&top'thick double 4ff$$$$)

+6

* </style> </head> <body> <p>Acesta este un paragraf oarecare.</p> </body> </html> #!emplul " Ilustreaz cum se stabile$te stilul laturii de Ios a c9enarului. <html> <head> <style type="text/css"> 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.groo"e %border&bottom&style'groo"e* p.ridge %border&bottom&style'ridge* p.inset %border&bottom&style'inset* p.outset %border&bottom&style'outset* </style> </head> <body> <p class="none">1henar fara latura de =os.</p> <p class="dotted">1henar cu latura de =os punctata.</p> <p class="dashed">1henar cu latura de =os intrerupta.</p> <p class="solid">1henar cu latura de =os plina.</p> <p class="double">1henar cu latura de =os dubla.</p> <p class="groo"e">1henar cu latura de =os groo"e.</p> <p class="ridge">1henar cu latura de =os ridge.</p> <p class="inset">1henar cu latura de =os inset.</p> <p class="outset">1henar cu latura de =os outset.</p> </body> </html>

71

#!emplul % Ilustreaz cum se stabile$te .rosimea laturii st>n.i a c9enarului. <html> <head> <style type="text/css"> p % border&style'solid) border&left&(idth'1 px) * </style> </head> <body> <p><b>Iote'</b> ,roprietatea "border&left&(idth" functionea+a numai daca ati setat mai intai proprietatea "border&style".</p> </body> </html> #!emplul ' Ilustreaz cum se stabile$te culoarea 3iecrei laturi a c9enarului. <html> <head> <style type="text/css"> p.one % border&style'solid) border&color'4$$$$ff) * p.t(o % border&style'solid) border&color'4ff$$$$ 4$$$$ff) * p.three % border&style'solid) border&color'4ff$$$$ 4$$ff$$ 4$$$$ff) * p.four % border&style'solid)

71

border&color'4ff$$$$ 4$$ff$$ 4$$$$ff rgb5! $;$;! * </style> </head> <body> <p class="one">1henar cu o singura culoare0</p> <p class="t(o">1henar cu doua culori0</p> <p class="three">1henar cu trei culori0</p> <p class="four">1henar cu patru culori0</p> </body> </html> #!emplul . Ilustreaz cum se stabile$te culoarea pentru latura dreapt a c9enarului. <html> <head> <style type="text/css"> p % border&style'solid) border&right&color'4ff$$$$) * </style> </head> <body> <p>Acesta este un paragraf.</p> </body> </html>

6)

*oate propriet;ile CSS pentru c-enare

Proprietate =alori border-width Seteaz toate propriet2ile &ntr/o border border-style sin.ur declara2ie border-color border-bottomwidth Seteaz toate propriet2ile laturii de border-bottomborder&bottom Ios a c9enarului cu o sin.ur style declara2ie border-bottomcolor <escriere

72

border& bottom&color Stabile$te culoarea laturii de Ios border& bottom&style Stabile$te stilul laturii de Ios border& bottom&(idth Stabile$te .rosimea laturii de Ios border&color Stabile$te culoarea &ntre.ului c9enar border&left

border-color border-style border-width

color name hex number rgb number transparent border-left-width Stabile$te toate propriet2ile laturii border-left-style st>n.i cu o sin.ur declara2ie border-left-color border-color border-style border-width

border&left& Stabile$te culoarea laturii st>n.i color border&left& Stabile$te stilul laturii st>n.i style border&left& Stabile$te .rosimea laturii st>n.i (idth

border-rightwidth border&right Stabile$te toate propriet2ile laturii border-right-style drepte cu o sin.ur declara2ie border-rightcolor border&right& Stabile$te culoarea laturii drepte border-color color border&right& Stabile$te stilul laturii drepte border-style style border&right& Stabile$te .rosimea laturii drepte border-width (idth none -idden dotted das-ed Stabile$te stilul pentru &ntre.ul solid border&style c9enar double 0roove rid0e inset outset border-top-width Stabile$te toate propriet2ile laturii border&top border-top-style de sus cu o sin.ur declara2ie. border-top-color

7#

border&top& color border&top& style border&top& (idth

Stabile$te culoarea laturii de sus Stabile$te stilul laturii de sus Stabile$te .rosimea laturii de sus

border-color border-style border-width t-in medium t-ic/ length

border&(idth Stabile$te .rosimea pentru &ntre. c9enarul

1'. ,inii e!terioare 2outlines5

8 linie e terioar :outline; este o linie trasat &n Iurul elementuluiD &n a3ara c9enarului. Propriet2ile unei linii e terioare precizeaz stilulD culoarea $i l2imea.

#!emple
#!emplul 1 Ilustreaz cum se traseaz o linie e terioar :verdeD .roasD punctat; &n Iurul unui elementD &n a3ara c9enarului. <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> p % border'1px solid red) outline'green dotted thick) * </style> </head> <body>

7"

<p><b>Bbs'</b> >nternet :xplorer 7 accepta proprietatea outline daca este specificat 0@B1HC,: in codul html.</p> </body> </html>

#!emplul " Ilustreaz cum se stabile$te stilul unei linii e terioare. <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> 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.groo"e %outline&style'groo"e* p.ridge %outline&style'ridge* p.inset %outline&style'inset* p.outset %outline&style'outset* </style> </head> <body> <p class="dotted">B linie exterioarP punctata.</p> <p class="dashed">B linie exterioara intrerupta.</p> <p class="solid">B linie exterioara plina.</p> <p class="double">B linie exterioara dubla.</p> <p class="groo"e">B linie exterioara groo"e</p> <p class="ridge">B linie exterioara ridge</p> <p class="inset">B linie exterioara inset</p> <p class="outset">B linie exterioara outset</p> <b>Bbs'</b> >nternet :xplorer 7 accepta proprietatea outline daca este specificat 0@B1HC,:. </body> </html>

7%

#!emplul % Ilustreaz cum se stabile$te culoarea unei linii e terioare. <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> p % border'1px solid red) outline&style'dotted) outline&color'4$$ff$$) * </style> </head> <body> <p><b>Iote'</b> >nternet :xplorer 7 accepta proprietatea outline daca este specificat 0 @B1HC,:.</p> </body> </html> #!emplul ' Ilustreaz cum se stabile$te .rosimea unei linii e terioare. <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> p.one % border'1px solid red) outline&style'solid) outline&(idth'thin) * p.t(o %

7+

border'1px solid red) outline&style'dotted) outline&(idth'3px) * </style> </head> <body> <p class="one">On text intr&un paragraf.</p> <p class="t(o">On text in alt paragraf.</p> </body> </html>

*oate propriet;ile CSS pentru linii e!terioare

Proprietate outline outline& color <escriere Stabile$te toate propriet2ile liniei e terioare &ntr/o sin.ur declara2ie Stabile$te culoarea liniei e terioare =alori outline-color outline-style outline-width color name hex number rgb number invert none dotted das-ed solid double 0roove rid0e inset outset t-in medium t-ic/ length

outline& style

Stabile$te stilul liniei e terioare

outline& (idth

Stabile$te .rosimea liniei e terioare

1.. +ar0ini
Proprietatea CSS margin de3ine$te spa2iul din Iurul unui element :&n a3ara c9enarului;. )ar.inea nu are culoare de 3undal $i este complet transparent.

77

Cele patru mar.ini ale elementului pot 3i modi3icate &n mod independentD 3olosind propriet2i separate. 8 proprietate scurt poate 3iD de asemeneaD 3olosit pentru a sc9imba toate cele patru mar.ini simultan. =alori posibile =aloare <escriere )ar.inile sunt stabilite de ctre bro<ser. Rezultatul depinde de auto bro<ser. length 5e3ine$te o mar.ine 3i :&n pi eliD puncteD emD etc.; % 5e3ine$te o mar.ine &n procente 3a2 de elementul con2inut &bs. !ste posibil utilizarea valorilor ne.ativeD pentru a suprapune con2inutul.

,aturile mar0inii
Fn CSSD este posibil s de3inim mar.ini di3erite pe cele patru laturi? <html> <head> <style type="text/css"> p % background&color'yello() * p.margin % margin&top'1$$px) margin&bottom'1$$px) margin&right' $px) margin&left' $px) * </style> </head> <body> <p>Acesta este un paragraf cu margini nedefinite.</p> <p class="margin">Acesta este un paragraf cu margini definite.</p> </body> </html>

Proprietatea prescurtat
Pentru a scurta codulD pot 3i speci3icate cele patru mar.ini &ntr/o sin.ur declara2ieD utiliz>nd proprietatea scurt margin?

70

<html> <head> <style type="text/css"> p % background&color'yello() * p.margin % margin'1$$px $px) * </style> </head> <body> <p>Acest paragraf nu are marginile definite.</p> <p class="margin">Acest paragraf are marginile definite.</p> </body> </html> Proprietatea mar.in poate avea &ntre una $i patru valori. mar0in$".p! .4p! E.p! 144p!I o mar.inea de sus este 2%p o mar.inea dreapt este %1p o mar.inea de Ios este 7%p o mar.inea st>n. este 111p mar0in$".p! .4p! E.p!I o mar.inea de sus este 2%p o mar.inile din dreapta $i din st>n.a sunt %1p o mar.inea de Ios este7%p mar0in$".p! .4p!I o mar.inile de sus $i de Ios sunt 2%p o mar.inile din dreapta $i din st>n.a sunt %1p mar0in$".p!I o toate cele patru mar.ini sunt 2%p

#!emple 76

#!emplul 1 Ilustreaz cum se stabile$te mar.inea de sus a unui te t utiliz>nd o valoare &n cm. <html> <head> <style type="text/css"> p.ex1 %margin&top'!cm* </style> </head> <body> <p>On paragraf cu margini nedefinite.</p> <p class="ex1">On paragraf cu marginea de sus de !cm.</p> <p>On paragraf cu margini nedefinite.</p> </body> </html> #!emplul " Ilustreaz cum se stabile$te mar.inea de Ios a unui te t utiliz>nd o valoare procentual. <html> <head> <style type="text/css"> p.bottommargin %margin&bottom'! E* </style> </head> <body> <p>Acest paragraf are margini nedefinite.</p> <p class="bottommargin">Acest paragraf are marginea de =os definita.</p> <p>Acest paragraf are margini nedefinite.</p> </body> </html>

*oate propriet;ile pentru mar0ini

Proprietate margin <escriere Proprietate prescurtat pentru a seta simultan toate mar.inile =alori margin-top margin-right

01

margin& bottom margin& left margin& right

Stabile$te mar.inea de Ios Stabile$te mar.inea st>n. Stabile$te mar.inea dreapt

margin&top Stabile$te mar.inea de sus

margin-bottom margin-left auto length % auto length % auto length % auto length %

1?. Paddin0
Proprietatea CSS padding de3ine$te spa2iul dintre c9enar $i con2inut. 4cest spa2iu este a3ectat de culoarea de 3undal a elementului. Spa2iul dreptD st>n.D de sus $i de Ios :relativ la con2inut; poate 3i modi3icat &n mod independent 3olosind propriet2i di3erite. ! ist $i varianta scurt a propriet2ii pentru a modi3ica cele patru spa2ii simultan. =alori posibile =aloare <escriere length 5e3ine$te un spa2iu 3i :&n pi elD puncteD emD etc.; % 5e3ine$te un spa2iu &n valoare procentual relativ la con2inut

+odificarea individual a celor patru spa;ii

Fn CSSD pute2i speci3ica spa2ii di3erite pe cele patru laturi ale elementuluiD ca &n e emplul urmtor? <html> <head> <style type="text/css"> p % background&color'yello() * p.padding %

01

padding&top'! px) padding&bottom'! px) padding&right' $px) padding&left' $px) * </style> </head> <body> <p>Acesta este un paragraf cu spatiul nedefinit.</p> <p class="padding">Acest paragraf are cele patru spatii definite cu proprietatea padding.</p> </body> </html>

Proprietatea scurt
Pentru a scurta codulD pute2i speci3ica toate cele patru spa2ii &ntr/o sin.ur proprietate numit simplu paddingD ca &n e emplul urmtor ? <html> <head> <style type="text/css"> p % background&color'yello() * p.padding % padding'! px $px) * </style> </head> <body> <p>Acesta este un paragraf cu spatiul nedefint.</p> <p class="padding">Acest paragraf are cele patru spatii definite cu proprietatea padding.</p> </body> </html> Proprietatea padding poate avea &ntre una $i patru valori? paddin0$".p! .4p! E.p! 144p!I o spa2iul de sus are2%p

02

o o o

spa2iul din dreapta are %1p spa2iul de Ios are 7%p spa2iul din st>n.a are111p

paddin0$".p! .4p! E.p!I o spa2iul de sus are 2%p o spa2iile din dreapta $i din st>n.a au %1p o spa2iul de Ios are 7%p paddin0$".p! .4p!I o spa2iile de sus $i de Ios au 2%p o spa2iile din dreapta $i din st>n.a au %1p paddin0$".p!I o toate cele patru spa2ii au 2%p

#!emple
#!emplul 1 Ilustreaz utilizarea propriet2ii scurte pentru a seta spa2iile unui element.. <html> <head> <style type="text/css"> p.ex1 %padding'!cm* p.ex! %padding'$. cm 3cm* </style> </head> <body> <p class="ex1">Acest text are cele patru spatii egale. 2patiul pe fiecare latura a textului este de !cm.</p> <p class="ex!">Acest text are spatiile de sus si de =os de cate $. cm si spatiile din dreapta si din stanga de cate 3cm.</p> </body> </html> #!emplul " Ilustreaz cum se stabile$te spa2iul din st>n.a pentru un para.ra3. <html> <head>

0#

<style type="text/css"> p.padding %padding&left'!cm* p.padding! %padding&left' $E* </style> </head> <body> <p>Acest text nu are spatiul din stanga definit.</p> <p class="padding">Acest paragraf are spatiul din stanga de ! cm.</p> <p class="padding!">Acest paragraf are spatiul din stanga de $E.</p> </body> </html> #!emplul % Ilustreaz cum se stabile$te spa2iul din dreapta pentru un para.ra3. <html> <head> <style type="text/css"> p.padding %padding&right'!cm* p.padding! %padding&right' $E* </style> </head> <body> <p>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.</p> <p class="padding">Acest text are spatiul din dreapta de ! cm. Acest text are spatiul din dreapta de ! cm. Acest text are spatiul din dreapta de ! cm.</p> <p class="padding!">Acest text are spatiul din dreapta de $E. Acest text are spatiul din dreapta de $E. Acest text are spatiul din dreapta de $E.</p> </body> </html> #!emplul ' Ilustreaz cum se stabile$te spa2iul de sus pentru un para.ra3. <html> <head>

0"

<style type="text/css"> p.padding %padding&top'!cm* p.padding! %padding&top' $E* </style> </head> <body> <p>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.</p> <p class="padding">Acest text are spatiul de sus de ! cm. Acest text are spatiul de sus de ! cm. Acest text are spatiul de sus de ! cm. Acest text are spatiul de sus de ! cm. </p> <p class="padding!">Acest text are spatiul de sus de ! E. Acest text are spatiul de sus de ! E. Acest text are spatiul de sus de ! E. Acest text are spatiul de sus de ! E.</p> </body> </html> #!emplul . Ilustreaz cum se stabile$te spa2iul de Ios pentru un para.ra3. <html> <head> <style type="text/css"> p.padding %padding&bottom'!cm* p.padding! %padding&bottom' $E* </style> </head> <body> <p>Acest text nu are spatiul de =os definit. Acest text nu are spatiul de =os definit. Acest text nu are spatiul de =os definit. Acest text nu are spatiul de =os definit.</p> <p class="padding">Acest text are spatiul de =os de ! cm. Acest text are spatiul de =os de ! cm. Acest text are spatiul de =os de ! cm. Acest text are spatiul de =os de ! cm.</p> <p class="padding!">Acest text are spatiul de =os de ! E. Acest text are spatiul de =os de ! E. Acest text

0%

are spatiul de =os de ! E. Acest text are spatiul de =os de ! E.</p> <p>Acest text nu are spatiul de =os definit. Acest text nu are spatiul de =os definit. Acest text nu are spatiul de =os definit. Acest text nu are spatiul de =os definit.</p> </body> </html>

*oate propriet;ile CSS pentru paddin0

Proprietate padding padding& bottom padding& left padding& right padding& top <escriere =alori padding-top Proprietatea scurt pentru a stabili toate padding-right spa2iile cu o sin.ur declara2ie padding-bottom padding-left length Stabile$te spa2iul de Ios % length Stabile$te spa2iul din st>n.a % length Stabile$te spa2iul din dreapta % length Stabile$te spa2iul de sus %

1E. Hruparea i imbricarea selectorilor

Hruparea selectorilor
Fn 3oile de stil se re.sesc deseori elemente care au acela$i stil. ! emplu? h1 % color'green) * h! % color'green) * p %

0+

color'green) * Pentru a mic$ora codulD pute2i .rupa selectorii &ntr/o list &n care selectorii sunt separa2i prin vir.ul. Fn e emplul urmtorD selectorii de mai sus au 3ost .rupa2i? <html> <head> <style type="text/css"> h1;h!;p % color'green) * </style> </head> <body> <h1>On titlu0</h1> <h!>On titlu mai mic0</h!> <p>On paragraf oarecare.</p> </body> </html>

Imbricarea selectorilor
!ste posibil s aplica2i un stil unui selector a3lat &n interiorul unui alt selector. Fn e emplul urmtorD este precizat un stil pentru toate elementele pD $i un alt stil pentru elementele p a3late &n clasa Hmar/edH? <html> <head> <style type="text/css"> p % color'blue) text&align'center) * .marked % background&color'blue * .marked p % color'(hite) *

07

</style> </head> <body> <p>Acest paragraf are culoarea albastra si este aliniat la centru.</p> <di" class="marked"> <p>Acest paragraf din clasa marked trebuie sa aiba culoarea alba.</p> </di"> <p>,aragrafele declarate in clasa "marked" pastrea+a stilul de aliniere; dar textul are o culoare diferita.</p> </body> </html>

1C. Setarea dimensiunilor unui element

5imensiunile unui element pot 3i setate cu propriet2ile height $i (idth.

#!emple
#!emplul 1 Ilustreaz cum se pot stabili dimensiunile unui element. <html> <head> <style type="text/css"> img.normal %height'auto* img.big %height'1 $px* p.ex % height'1$$px) (idth'1$$px) * </style> </head> <body> <img class="normal" src="logo.gif" (idth="9 " height="7#" /><br />

00

<img class="big" src="logo.gif" (idth="9 " height="7#" /> <p class="ex">>naltimea si latimea acestui paragraf sunt de 1$$px.</p> <p>On text intr&un paragraf. On text intr&un paragraf. On text intr&un paragraf. On text intr&un paragraf. On text intr&un paragraf. On text intr&un paragraf. On text intr&un paragraf.</p> </body> </html> #!emplul " Ilustreaz cum se seteaz &nl2imea unui element 3olosind o valoare procentual. <html> <head> <style type="text/css"> img.normal %height'auto* img.big %height' $E* img.small %height'1$E* </style> </head> <body> <img class="normal" src="logo.gif" (idth="9 " height="7#" /><br /> <img class="big" src="logo.gif" (idth="9 " height="7#" /><br /> <img class="small" src="logo.gif" (idth="9 " height="7#" /> </body> </html> #!emplul % Ilustreaz cum se seteaz l2imea unui element 3olosind o valoare &n pi eli. <html> <head> <style type="text/css"> img %

06

(idth' !$$px * </style> </head> <body> <img src="logo.gif" (idth="9 " height="7#" /> </body> </html> #!emplul ' Ilustreaz cum se seteaz &nl2imea ma im a unui element. <html> <head> <style type="text/css"> p.ex % max&height'1$$px) * </style> </head> <body> <p class=?ex?>>naltimea maxima a acestui paragraf este setata la 1$$px. </p> <p>On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf. </p> </body> </html> #!emplul . Ilustreaz cum se seteaz l2imea ma im a unui element 3olosind o valoare procentual. (e tul va ocupa %1O din l2imea 3erestrei bro<seruluiD c9iar dac redimensiona2i 3ereastra. <html> <head> <style type="text/css"> p % max&(idth' $E

61

* </style> </head> <body> <p>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.</p> </body> </html> #!emplul ? Ilustreaz cum se seteaz &nl2imea minim a unui element. <html> <head> <style type="text/css"> p.ex % min&height'1$$px) * </style> </head> <body> <p class=?ex?>>naltimea minima a cestui paragraf este setata la 1$$px.</p> <p>On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf.</p> </body> </html> #!emplul E Ilustreaz cum se seteaz l2imea minim a unui element 3olosind o valoare &n pi eli. <html> <head> <style type="text/css"> p.ex %

61

min&(idth' $px) * </style> </head> <body> <p class=?ex?>.atimea minima a acestui paragraf este setata la $px.</p> <p>On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf. On alt paragraf.</p> </body> </html>

*oate propriet;ile CSS pentru dimensiuni

Proprietate Propert> =alori =alues auto height Stabile$te &nl2imea unui element length % none max&height Stabile$te &nl2imea ma im a unui length element % none max&(idth Stabile$te l2imea ma im a unui element length % Stabile$te &nl2imea minim a unui length min&height element % min&(idth Stabile$te l2imea minim a uni element length % auto (idth Stabile$te l2imea unui element length % <escriere <escription

1F. Propriet;ile display i "isibility

Proprietatea display speci3ic dacCcum este a3i$at un elementD iar proprietatea "isibility speci3ic dac elementul este vizibil sau ascuns.

62

Ascunderea unui element

Se poate realiza set>nd proprietatea display la valoarea none sau proprietatea "isibility la valoarea hidden. Cele dou metode produc rezultate di3erite. Proprietatea "isibility'hidden ascunde elementulD dar el va ocupa acela$i spa2iu &n pa.in a3ect>nd aspectul acesteia? <html> <head> <style type="text/css"> h1.hidden %"isibility'hidden* </style> </head> <body> <h1>Acesta este un titlu "i+ibil</h1> <h1 class="hidden">Acesta este un titlu ascuns</h1> <p>Bbser"ati ca titlul ascuns ocupa spatiu in pagina.</p> </body> </html> Proprietatea display'none ascunde elementul ast3el &nc>t acesta nu va mai ocupa spa2iu &n pa.in. <html> <head> <style type="text/css"> h1.hidden %display'none* </style> </head> <body> <h1> Acesta este un titlu "i+ibil </h1> <h1 class="hidden"> Acesta este un titlu ascuns </h1> <p> Bbser"ati ca titlul ascuns nu ocupa spatiu in pagina.</p> </body> </html>

Afiarea elementelor bloc i a elementelor inline

Un element bloc ocup &ntrea.a l2ime disponibil &n pa.in $i are o &ntrerupere de linie &nainte $i dup el.

6#

! emple de elemente bloc? <h1> <p> <di"> Un element inline ocup numai l2imea necesar $i nu 3or2eaz &ntreruperile de linie. ! emple de elemente inline? <span> <a>

Sc-imbarea modului de afiare a unui element

Sc9imbarea unui element inline &ntr/un element blocD $i reciprocD poate 3i util pentru a 3ace pa.ina s arate &ntr/un anumit 3elD respect>nd standardele <eb. ! emplul urmtor a3i$eaz o list de lin-/uri ca elemente inlineD cre>nd un meniu orizontal? <html> <head> <style type="text/css"> li%display'inline* </style> </head> <body> <p>.ista de linkuri este afisata ca un meniu ori+ontal'</p> <ul> <li><a href="http'(((.yahoo.com" target="-blank">Cahoo</a></li> <li><a href="http'(((.google.com" target="-blank">Noogle</a></li> <li><a href="http'(((.microsoft.com" target="-blank">Aicrosoft</a></li> <li><a href="http'(((.oracle.com" target="-blank">Bracle</a></li> </ul> </body> </html> ! emplul urmtor a3i$eaz elementele span ca elemente bloc? <html>

6"

<head> <style type="text/css"> span % display'block) * </style> </head> <body> <h!>Iir"ana</h!> <span>Jecord' AHD Onplugged in Ie( Cork</span> <span>Cear' 1993</span> <h!>Jadiohead</h!> <span>Jecord' BR 1omputer</span> <span>Cear' 199G</span> </body> </html> &bs$ Sc9imb>nd modul de a3i$are a unui elementD nu sc9imbm $i tipul acestuia. 5e e empluD un element inline cu proprietatea display'block nu poate avea un element bloc &n interiorul lui.

#!emple
#!emplul 1 Ilustreaz cum se a3i$eaz un element bloc ca element inline. <html> <head> <style type="text/css"> p %display' inline* </style> </head> <body> <p>@eoarece proprietatea display a elementului p a fost setata la inline</p> <p>intre aceste doua paragrafe nu mai exista intreruperile de linie.</p> </body> </html>

6%

#!emplul " Ilustreaz cum se a3i$eaz un element inline ca element bloc. <html> <head> <style type="text/css"> span % display'block) * </style> </head> <body> <span>@eoarece proprietatea display a elementului span a fost setata la block</span> <span>intre aceste doua elemente exista o intrerupere de linie.</span> </body> </html> #!emplul % Ilustreaz cum se poate elimina o linie dintr/un tabel. <html> <head> <style type="text/css"> tr.collapse %"isibility'collapse* </style> </head> <body> <p><b>Habelul normal</p> <table border="1"> <tr> <td>Amalia</td> <td>,etrescu</td> </tr> <tr> <td>Neorge</td> <td>Aoraru</td> </tr>

6+

</table> <p>Habelul cu a doua linie setata la collapse.</p> <table border="1"> <tr> <td>Amalia</td> <td>,etrescu</td> </tr> <tr class="collapse"> <td>Neorge</td> <td>Aoraru</td> </tr> </table> <p><b>Iota'</b> >nternet :xplorer nu recunoaste "aloarea "collapse".</p> </body> </html>

"4. Pozi;ionarea unui element

Proprietatea position v permite s stabili2i pozi2ia unui element &n pa.ina <eb. !lementele pot 3i pozi2ionate utiliz>nd propriet2ile topD bottomD leftD $i rightD dar ele nu vor 3unc2iona dac nu seta2i mai &nt>i proprietatea position. 5e asemeneaD cele patru propriet2i lucreaz di3eritD &n 3unc2ie de metoda de pozi2ionare. Sunt patru metode di3erite de pozi2ionare a unui element. Pozi;ionarea static !ste modul implicit de pozi2ionare a elementelor '()*. Un element pozi2ionat static respect &ntotdeauna 3lu ul normal al pa.inii <eb. !lementele pozi2ionate static nu sunt a3ectate de propriet2ile topD bottomD leftD $i right. Pozi;ionarea fi! Un element cu pozi2ionare 3i este pozi2ionat relativ la 3ereastra bro<serului $i nu se va deplasa c9iar dac 3ereastra este derulat. ! emplu? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I"

67

"http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> p.pos-fixed % color'red) position'fixed) top'3$px) right' px) * </style> </head> <body> <p class="pos-fixed">On text cu po+itia fixa</p> <p><b>Iote'</b> >nternet :xplorer accepta po+itionarea fixa numai daca exista declaratia 0 @B1HC,:.</p> <p>On text normal</p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p><p> On text normal </p> </body> </html> !lementele cu pozi2ia 3i sunt &nlturate din 3lu ul normal al documentului. 5ocumentul $i alte elemente se comport ca $i cum elementele cu pozi2ia 3i nu ar e ista. !lementele cu pozi2ia 3i se pot suprapune peste alte elemente. Pozi;ionarea relativ Un element cu pozi2ionare relativ este pozi2ionat relativ la pozi2ia lui normal &n document. #!emplu$ <html> <head> <style type="text/css"> h!.pos-left % position'relati"e)

60

left'&3$px) * h!.pos-right % position'relati"e) left'3$px) * </style> </head> <body> <h!>Acest titlu are po+itionarea statica 5implicita6</h!> <h! class="pos-left">Acest titlu este deplasat la stanga cu 3$px fata de po+itia lui normala</h!> <h! class="pos-right">Acest titlu este deplasat la dreapta cu 3$px fata de po+itia lui normala</h!> </body> </html> Con2inutul unui element pozi2ionat relativ poate 3i mutat $i suprapus peste alte elementeD dar spa2iul rezervat elementului este pstrat &n document. #!emplu$ <html> <head> <style type="text/css"> h!.pos-top % position'relati"e) top'&#$px) * </style> </head> <body> <h!>Acest titlu are po+itia implicita</h!> <h! class="pos-top">Acest titlu este mutat in sus cu #$px fata de po+itia lui normala</h!> </body> </html>

66

!lementele pozi2ionate relativ sunt 3olosite 3recvent ca blocuri container pentru elementele cu pozi2ionare absolut.

Pozi;ionarea absolut Un element cu pozi2ionare absolut este pozi2ionat relativ 3a2 de primul su printe care nu este pozi2ionat static. 5ac nu este .sit nici/un ast3el de elementD pozi2ionarea se 3ace 3a2 de elementul <html>. #!emplu$ <html> <head> <style type="text/css"> h! % position'absolute) left'1$$px) top'1 $px) * </style> </head> <body> <h!>Acest titlu are o po+itionare absoluta la 1 $ px fata de inceputul documentului si 1$$px fata de marginea stanga a documentului</h!> <p>Acest paragraf este po+itionat static 5implicit6.</p> </body> </html> Un element cu pozi2ionarea absolut poate 3i plasat oriunde in pa.ina. 4ceste elemente sunt &ndeprtate din 3lu ul normal $i documentul se comport ca $i cum nu ar e ista. !lementele cu pozi2ionare absolut se pot suprapune peste alte elemente. Suprapunerea elementelor C>nd elementele sunt pozi2ionate &n a3ara 3lu ului normal al documentuluiD ele pot acoperi alte elemente. Proprietatea +&index speci3ic ordinea elementelor suprapuse? care element va 3i plasat &n 3a2a sau &n spatele celorlalte elemente. 8rdinea &n list poate 3i pozitiv sau ne.ativ. #!emplu$

111

<html> <head> <style type="text/css"> img % position'absolute) left'$px) top'$px) +&index'&1) * </style> </head> <body> <h1>Acesta este un titlu po+itionat static</h1> <img src="logo.gif" (idth="1$$" height="1#$" /> <p>@eoarece imaginea are proprietatea +&index egala cu &1; "a fi afisata in spatele textului.</p> </body> </html> Un element cu inde ul mai mare va 3i plasat &ntotdeauna &n 3a2a elementului cu inde ul mai mic.

#!emple
#!emplul 1 Ilustreaz cum se stabile$te 3orma unui element. Ima.inea din e emplul urmtorul este prins &n 3orma dorit :cu proprietatea clip; $i a3i$at. <html> <head> <style type="text/css"> img % position'absolute) clip'rect5$px;7$px;!$$px;$px6) * </style> </head> <body> <img src="roses.gif" (idth="1$$" height="1#$" /> <hr/> </body>

111

</html>

#!emplul " Ilustreaz cum se 3olose$te proprietatea o"erflo( pentru a crea o bar de derulare atunci c>nd con2inutul elementului este prea mare pentru zona speci3icat. <html> <head> <style type="text/css"> di".scroll % background&color'4$$LLLL) (idth'1$$px) height'1$$px) o"erflo('scroll) * di".hidden % background&color'4$$LL$$) (idth'1$$px) height'1$$px) o"erflo('hidden) * </style> </head> <body> <p>Lolositi proprietatea o"erflo( atunci cand continutul elementului depaseste marimea +onei re+er"ate.</p> <p><b>o"erflo('scroll</b></p> <di" class="scroll">Lolositi proprietatea o"erflo( pentru a controla mai bine aspectul documentului.Daloarea implicita este "isible.</di"> <p><b>o"erflo('hidden</b></p>

112

<di" class="hidden"> Lolositi proprietatea o"erflo( pentru a controla mai bine aspectul documentului.Daloarea implicita este "isible.</di"> </body> </html>

#!emplul % Ilustreaz cum poate 3i setat bro<serul ast3el &nc>t s .estioneze &n mod automat dep$irea spa2iului rezevat de ctre con2inutul unui element. <html> <head> <style type="text/css"> di" % background&color'4$$LLLL) (idth'1 $px) height'1!$px) o"erflo(' auto * </style> </head> <body> <p>,roprietatea o"erflo( are "aloarea auto si detectea+P dacP continutul elementului depaseste +ona re+er"atP si este necesara bara de derulare.</p> <di"> ,uteti folosi proprietatea o"erflo( pentru a controla mai bine aspectul documentului. Dalorile posibile sunt' "isible; hidden; scroll; inherit. Daloarea implicita este "isible. </di"> </body> </html> #!emplul ' Ilustreaz cum se poate modi3ica tipul cursorului. <html> <body>

11#

<p>,limbati mouse&ul peste cu"intele din lista pentru a&l modifica.</p> <span style="cursor'auto">auto</span><br /> <span style="cursor'crosshair">crosshair</span><br /> <span style="cursor'default">default</span><br /> <span style="cursor'e&resi+e">e&resi+e</span><br /> <span style="cursor'help">help</span><br /> <span style="cursor'mo"e">mo"e</span><br /> <span style="cursor'n&resi+e">n&resi+e</span><br /> <span style="cursor'ne&resi+e">ne&resi+e</span><br /> <span style="cursor'n(&resi+e">n(&resi+e</span><br /> <span style="cursor'pointer">pointer</span><br /> <span style="cursor'progress">progress</span><br /> <span style="cursor's&resi+e">s&resi+e</span><br /> <span style="cursor'se&resi+e">se&resi+e</span><br /> <span style="cursor's(&resi+e">s(&resi+e</span><br /> <span style="cursor'text">text</span><br /> <span style="cursor'(&resi+e">(&resi+e</span><br /> <span style="cursor'(ait">(ait</span><br /> </body> </html>

*oate propriet;ile CSS pentru pozi;ionarea unui element

Proprietate bottom clip cursor <escriere =alori auto Stabile$te mar.inea de Ios pentru length o caset pozi2ionat %t ,i eaz &ntr/o 3orm un element shape pozi2ionat absolut auto Speci3ic tipul cursorului url auto cross-air default pointer move e1resize ne1resize n91resize n1resize se1resize s91resize s1resize 91resize

11"

left

o"erflo(

position

right top +&index

te!t 9ait -elp auto Stabile$te mar.inea din stan.a length pentru o caset pozi2ionat %t auto Stabile$te ce se &nt>mpl dac -idden con2inutul elementului dep$e$te scroll zona rezervat visible absolute Speci3ic tipul de pozi2ionare a fi!ed elementului relative static auto Stabile$te mar.inea din dreapta length pentru o caset pozi2ionat % auto Stabile$te mar.inea de sus pentru length o caset pozi2ionat % Stabile$te ordinea de a3i$are a number unui element suprapus auto

"1. Proprietatea float

Cu proprietatea CSS floatD un element poate 3i &mpins ctre dreapta sau ctre st>n.aD permi2>nd celorlalte elemente s se or.anizeze &n Iurul lui. Proprietatea este 3olosit 3recvent pentru ima.iniD dar este 3oarte util $i c>nd lucra2i cu aspectul pa.inii :la>outs;.

Cum sunt deplasate elementele

!lementele se deplaseaz numai orizontalD ctre st>n.a sau ctre dreapta. Un element deplasabil va &mpins spre dreapta sau spre st>n.a c>t de mult se poate. 4sta &nseamn c elementele care urmeaz elementului deplasabil se vor aranIa &n Iurul lui. !lementele dinaintea elementului deplasabil nu vor 3i a3ectate. 5ac o ima.ine este deplasat spre dreaptaD te tul care urmeaz se va aranIa &n Iurul ima.inii ca &n e emplul urmtor? <html> <head>

11%

<style type="text/css"> img % float'right) * </style> </head> <body> <p>>n paragraful urmator este o imagine cu proprietatea style setata la <b>float'right</b>. 1a urmare; imaginea se "a deplasa Vn paragraf spre dreapta.</p> <p> <img src="logo.gif" (idth="9 " height="7#" /> On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. </p> </body> </html> &bs. )ic$ora2i 3ereastra bro<serului pentru a observa aranIarea te tului &n Iurul ima.inii.

+utarea elementelor unele lJn0 altele

5ac plasa2i mai multe ima.ini deplasabile una dup altaD ele se vor deplasa una l>n. cealaltD c>t timp e ist spa2iu su3icient. Fn e emplul urmtor este construit o .alerie de ima.ini 3olosind proprietatea float? <html> <head>

11+

<style type="text/css"> .thumbnail % float'left) (idth'11$px) height'9$px) margin' px) * </style> </head> <body> <h3>Nalerie de imagini</h3> <p>Aicsorati fereastra bro(serului pentru a "edea ce se intampla cu imaginile cand nu mai au spatiu suficient.</p> <img class="thumbnail" src="roses.gif" (idth="1$G" height="9$"> <img class="thumbnail" src=" roses.gif" (idth="1$G" height="7$"> <img class="thumbnail" src=" roses.gif " (idth="118" height="9$"> <img class="thumbnail" src=" roses.gif " (idth="1!$" height="9$"> <img class="thumbnail" src=" roses.gif " (idth="1$G" height="9$"> <img class="thumbnail" src=" roses.gif " (idth="1$G" height="7$"> <img class="thumbnail" src=" roses.gif " (idth="118" height="9$"> <img class="thumbnail" src=" roses.gif " (idth="1!$" height="9$"> </body> </html>

Proprietatea clear
!lementele de dup un element deplasabil se vor or.aniza &n Iurul lui. Pentru a &mpiedica acest lucruD 3olosi2i proprietatea clear. 4ceast proprietate speci3ic care laturi nu sunt permise pentru deplasare. Fn e emplul urmtor a 3ost adu.at o linie de te t &n .aleria de ima.iniD 3olosind proprietatea clear? <html> <head>

117

<style type="text/css"> .thumbnail % float'left) (idth'11$px) height'9$px) margin' px) * .text-line % clear'both) margin&bottom'!px) * </style> </head> <body> <h3>Nalerie de imagini</h3> <p> Aicsorati fereastra bro(serului pentru a "edea ce se intampla cu imaginile cand nu mai au spatiu suficient.</p> <img class="thumbnail" src="roses.gif" (idth="1$G" height="9$"> <img class="thumbnail" src=" roses.gif" (idth="1$G" height="7$"> <img class="thumbnail" src=" roses.gif " (idth="118" height="9$"> <img class="thumbnail" src=" roses.gif " (idth="1!$" height="9$"> <h3 class="text-line">A doua linie</h3> <img class="thumbnail" src="roses.gif" (idth="1$G" height="9$"> <img class="thumbnail" src=" roses.gif" (idth="1$G" height="7$"> <img class="thumbnail" src=" roses.gif " (idth="118" height="9$"> <img class="thumbnail" src=" roses.gif " (idth="1!$" height="9$"> </body> </html>

#!emple 110

#!emplul 1 Ilustreaz cum se deplaseaz o ima.ine la dreapta unui para.ra3. Ima.inea are bordur $i mar.ini. <html> <head> <style type="text/css"> img % float'right) border'1px dotted black) margin'$px $px 1 px !$px) * </style> </head> <body> <p> >maginea din paragraful urmator se "a deplasa spre dreapta.>maginea are un chenar negru punctat.>maginea are si margini pentru a tine textul la distanta fata de imagine'$px deasupra si Vn partea dreaptP a imaginii; 1 px sub imagine si !$px in partea stanga a imaginii. </p> <p> <img src="logo.gif" (idth="9 " height="7#" /> On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. </p> </body> </html>

116

#!emplul " Ilustreaz utilizarea unei ima.ini cu un titlu care se deplaseaz spre dreapta. <html> <head> <style type="text/css"> di" % float'right) (idth'1!$px) margin'$ $ 1 px !$px) padding'1 px) border'1px solid black) text&align'center) * </style> </head> <body> <di"> <img src="logo.gif" (idth="9 " height="7#" /><br /> 122 este distracti"0 </di"> <p> On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. </p> <p> >n acest exemplu; elementul di" are 1!$ pixeli latime si contine imaginea.:lementul di" se "a deplasa spre

111

dreapta. Au fost adaugate margini pentru a indeparta textul de element.:lementul are chenar si padding pentru a incadra imaginea si titlul. </p> </body> </html> #!emplul % Fn acest e empluD prima liter din para.ra3 este stilizat $i deplasat spre st>n.a. <html> <head> <style type="text/css"> span % float'left) (idth'$.Gem) font&si+e'#$$E) font&family'algerian;courier) line&height'7$E) * </style> </head> <body> <p> <span>A</span>cesta este un text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. On text. </p> <p>

On On On On On On On On On On On On

text. text. text. text. text. text. text. text. text. text. text. text.

On On On On On On On On On On On On

text. text. text. text. text. text. text. text. text. text. text. text.

111

>n paragraful de mai sus; prima litera este inclusa intr&un element span. :lementul are latimea de $.G din marimea fontului curent.@imensiunea fontului pentru elementul span este de #$$E si inaltimea liniei este de 7$E. Lontul literei din span este "Algerian". </p> </body> </html> #!emplul ' Ilustreaz cum se 3olose$te float cu o list de lin-/uri pentru a crea un meniu orizontal. <html> <head> <base target="-blank"/> <style type="text/css"> ul % float'left) (idth'1$$E) padding'$) margin'$) list&style&type'none) * a % float'left) (idth'8em) text&decoration'none) color'(hite) background&color'purple) padding'$.!em $.8em) border&right'1px solid (hite) * a'ho"er %background&color'4ff33$$* li %display'inline* </style> </head> <body> <ul>

112

<li><a href="http'/(((.google.com">Noogle</a></li> <li><a href="http'/(((.yahoo.com">Cahoo</a></li> <li><a href="http'/(((.microsoft.com">Aicrosoft</a></li> <li><a href="http'/(((.oracle.com">Bracle</a></li> </ul> <p> >n acest exemplu elementele ul si a se deplasea+a spre stanga cu proprietatea float. :lementele li "or fi afisate unul dupa altul pe aceeasi linie. >n acest fel lista de link&uri de"ine un meniu ori+ontal.:lementul ul are latimea de 1$$E si fiecare link din lista are latimea de 8em 5de 8 ori marimea fontului curent6.Au fost adugate culori si chenare pentru a imbunatati aspectul listei. </p> </body> </html #!emplul . Ilustreaz crearea unei pa.ini <eb :9omepa.e; cu antetD subsolD con2inut st>n. $i con2inut principal utiliz>nd proprietatea float. <html> <head> <style type="text/css"> di".container % (idth'1$$E) margin'$px) border'1px solid gray) line&height'1 $E) * di".header;di".footer % padding'$. em) color'(hite) background&color'gray) clear'left) * h1.header

11#

% padding'$) margin'$) * di".left % float'left) (idth'18$px) margin'$) padding'1em) * di".content % margin&left'19$px) border&left'1px solid gray) padding'1em) * </style> </head> <body> <di" class="container"> <di" class="header"><h1 class="header">Seb @ata</h1></di"> <di" class="left"><p>"Iiciodata nu mariti; mai mult decat este necesar; numarul notiunilor necesare pentru a explica ce"a." Silliam of Bckham 51!7 & 13#96</p></di"> <di" class="content"> <h!>,rogramare (eb</h!> <p>>n acest site "eti gasi informatiile necesare pentru programarea (eb.</p> <p>Liti competiti"i0</p></di"> <di" class="footer">1opyright !$$G&!$$9 by Seb @ata.</di"> </di"> </body> </html>

*oate propriet;ile CSS pentru deplasarea elementelor

Propert> clear <escription Speci3ic pe care laturi ale =alues left

11"

elementului nu se pot deplasa elementele vecine float Speci3ic dac un element este sau nu deplasabil

ri0-t botnone left ri0-t none

"". Alinierea orizontal

Alinierea elementelor bloc
Un element bloc este un element care ocup toat l2imea disponibil $i are o &ntrerupere de linie &nainte $i dup el. ! emple de elemente bloc? <h1> <p> <di"> Pentru alinierea te tului vede2i capitolul corespunztor din aceast lucrare. Fn acest capitol va 3i prezentat alinierea orizontal a elementelor bloc pentru &mbunt2irea aspectului pa.inii.

Alinierea la centru folosind proprietatea margin

!lementele bloc pot 3i aliniate set>nd mar.inea st>n. $i cea dreapt la HautoH. &bs$ Proprietatea margin'auto 3unc2ioneaz &n Internet ! plorer numai dac include2i declara2ia 0@B1HC,:. Speci3ic>nd mar.inile laterale ca autoD spa2iul disponibil va 3i &mpr2it &n mod e.al rezult>nd un element aliniat la centru. #!emplu$ <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> .center % margin'auto) (idth'G$E) background&color'4b$e$e8) * </style>

11%

</head> <body> <di" class="center"> <p>"Wudecam oamenii nu numai prin ceea ce ei gandesc si nici macar prin sentimentele care ii domina; ci prin interferentele cu "iata noastra; pe care soarta i&a silit sa le traiasca."</p> <p>Aarin ,reda & "1el mai iubit dintre pamanteni"</p> </di"> </body> </html> &bs$ 4linierea nu are e3ect dac (idth este 111O.

Alinierea la stJn0a i la dreapta folosind proprietatea position

Pute2i alinia elementele 3olosind pozi2ionarea absolut ca &n e emplul urmtor? <html> <head> <style type="text/css"> .right % position'absolute) right'$px) (idth'3$$px) background&color'4b$e$e8) * </style> </head> <body> <di" class="right"> <p>"Wudecam oamenii nu numai prin ceea ce ei gandesc si nici macar prin sentimentele care ii domina; ci prin interferentele cu "iata noastra; pe care soarta i&a silit sa le traiasca."</p> <p>Aarin ,reda & "1el mai iubit dintre pamanteni"</p> </di"> </body> </html>

Alinierea la stJn0a i la dreapta folosind proprietatea float 11+

#!emplu$ <html> <head> <style type="text/css"> .right % float'right) (idth'3$$px) background&color'4b$e$e8) * </style> </head> <body> <di" class="right"> <p>"Wudecam oamenii nu numai prin ceea ce ei gandesc si nici macar prin sentimentele care ii domina; ci prin interferentele cu "iata noastra; pe care soarta i&a silit sa le traiasca."</p> <p>Aarin ,reda & "1el mai iubit dintre pamanteni"</p> </di"> </body> </html> &bs. C>nd alinia2i ast3el de elemente cu float sau positionD este indicat s de3ini2i elementele margin $i padding pentru elementul <body>. Fn acest 3el nu vor aprea di3eren2e vizibile &ntre bro<sere.

"%. Pseudo1clasele CSS

Pseudo/clasele CSS sunt 3olosite pentru a adu.a e3ecte speciale unor selectori.

Sinta!a
Sinta a pentru pseudo/clase este? selector'nume&pseudo&clasa %property'"alue* Pseudo/clasele pot 3i utilizate &mpreun cu clasele CSS? selector.class'pseudo&clasa %property'"alue*

Pseudo1clase pentru lin/1uri

*in-urile pot 3i a3i$ate &n di3erite moduri &n bro<serele care suport CSS?

117

<html> <head> <style type="text/css"> a'link %color'4LL$$$$* a'"isited %color'4$$LL$$* a'ho"er %color'4LL$$LL* a'acti"e %color'4$$$$LL* </style> </head>

/3 /3 /3 /3

link ne"i+itat 3/ link "i+itat 3/ mouse peste link 3/ link selectat 3/

<body> <p><b><a href="mypage.htm" target="-blank">Acesta este un link</a></b></p> </body> </html> &bs$ Numele unei pseudo/clase nu este case/sensitive. Pseudo/clasele pot 3i combinate cu clasele CSS? a.red'"isited %color'4LL$$$$* <a class="red" href="css-syntax.asp">122 2yntax</a> 5ac lin-/ul din acest e emplu a 3ost vizitatD el va 3i a3i$at cu culoarea ro$ie.

Pseudo1clasa 'first&child
4ceast pseudo/clas se aplic unui element care este primul descendent :c9ild; al unui alt element. &bs$ Pseudo/clasa 'first&child 3unc2ioneaz &n I! numai dac declara2ia <0@B1HC,:> este inclus &n document. Selectarea primului element <p> Fn e emplul urmtorD selectorul se aplic oricrui element <p> care este primul descendent al unui alt element? <0@B1HC,: KHA. ,O/.>1 "&//S31//@H@ KHA. #.$1 Hransitional//:I" "http'//(((.(3.org/HJ/html#/loose.dtd"> <html> <head> <style type="text/css"> p'first&child % color'blue) * </style>

110

</head> <body> <p>Acest paragraf este elementului body si "a <p>Acest paragraf este elementului body si nu </body> </html> primul descendent al fi stili+at.</p> al doilea descendent al este stili+at.</p>

Selectarea primului element <i> din toate elementele <p> #!emplu$ <0@B1HC,: KHA. ,O/.>1 "&//S31//@H@ KHA. #.$1 Hransitional//:I" "http'//(((.(3.org/HJ/html#/loose.dtd"> <html> <head> <style type="text/css"> p > i'first&child % color'blue) * </style> </head> <body> <p>Acesta este primul <i>element italic</i> din primul paragraf. Acesta este al doilea <i>element italic</i> din primul paragraf.</p> <p>Acesta este primul <i>element italic</i> din al doilea paragraf. Acesta este al doilea <i>element italic</i> din al doilea paragraf.</p> </body> </html> Selectarea tuturor elementelor <i> din primul element <p> care este descendent al unui alt element #!emplu$ <0@B1HC,: KHA. ,O/.>1 "&//S31//@H@ KHA. #.$1 Hransitional//:I" "http'//(((.(3.org/HJ/html#/loose.dtd"> <html>

116

<head> <style type="text/css"> p'first&child i % color'blue) * </style> </head> <body> <p>Acesta este primul <i>element italic</i> din primul paragraf. Acesta este al doilea <i>element italic</i> din primul paragraf.</p> <p>Acesta este primul <i>element italic</i> din al doilea paragraf. Acesta este al doilea <i>element italic</i> din al doilea paragraf.</p> </body> </html> Selectarea primului item dintr-o list Fn acest e empluD selectorul se aplic primelor elemente li din liste? <0@B1HC,: KHA. ,O/.>1 "&//S31//@H@ KHA. #.$1 Hransitional//:I" "http'//(((.(3.org/HJ/html#/loose.dtd"> <html> <head> <style type="text/css"> li'first&child % color'red) * </style> </head> <body> <ul> <li>Apa</li> <li>.apte</li> <li>1eai</li> </ul> <ul> <li>1afea</li>

121

<li>1eai</li> <li>,epsi</li> </ul> </body> </html> Selectarea primului descendent al tuturor elementelor li dintr-o list #!emplu$ <0@B1HC,: KHA. ,O/.>1 "&//S31//@H@ KHA. #.$1 Hransitional//:I" "http'//(((.(3.org/HJ/html#/loose.dtd"> <html> <head> <style type="text/css"> li>3'first&child % color'red) * </style> </head> <body> <ul> <li>1afea <i>& bautura neagra fierbinte</i></li> <li>1oca 1ola <i>& bautura neagra rece</i></li> </ul> <ul> <li>1afea <i>& bautura neagra fierbinte</i></li> <li>.apte <i>& bautura alba rece</i></li> </ul> </body> </html>

Pseudo1clasa 'lang
4ceast clas v permite s de3ini2i re.uli speciale pentru di3erite limbi. &bs$ Internet ! plorer recunoa$te pseudo/clasa 'lang numai dac declara2ia KL<&C*MP#N este inclus &n document. Fn e emplul urmtorD pseudo/clasa 'lang de3ine$te modul de marcare a citatelor pentru elementele M care au lan0O@no@?

121

<0@B1HC,: KHA. ,O/.>1 "&//S31//@H@ KHA. #.$1 Hransitional//:I" "http'//(((.(3.org/HJ/html#/loose.dtd"> <html> <head> <style type="text/css"> M'lang5no6 % Muotes' "X" "X") * </style> </head> <body> <p>On text in paragraf.<M lang="no">On citat in cadrul paragrafului</M> On text in paragraf.</p> </body> </html>

#!emple
#!emplul 1 Ilustreaz cum se stabilesc di3erite stiluri pentru lin-/uri. <html> <head> <style type="text/css"> a.one'link %color' 4ff$$$$* a.one'"isited %color' 4$$$$ff* a.one'ho"er %color' 4ffcc$$* a.t(o'link %color' 4ff$$$$* a.t(o'"isited %color' 4$$$$ff* a.t(o'ho"er %font&si+e' 1 $E* a.three'link %color' 4ff$$$$* a.three'"isited %color' 4$$$$ff* a.three'ho"er %background' 488ff88* a.four'link %color' 4ff$$$$* a.four'"isited %color' 4$$$$ff* a.four'ho"er %font&family' monospace* a.fi"e'link %color' 4ff$$$$) text&decoration' none*

122

a.fi"e'"isited %color' 4$$$$ff) text&decoration' none* a.fi"e'ho"er %text&decoration' underline* </style> </head> <body> <p>Aiscati mouse&ul peste link&uri pentru a "edea cum li se schimba aspectul..</p> <p><b><a class="one" href="http'/(((.google.com" target="-blank">Acest link isi schimba culoarea</a></b></p> <p><b><a class="t(o" href=" http'/(((.google.com" target="-blank">Acest link isi schimba dimensiunea fontului</a></b></p> <p><b><a class="three" href=" http'/(((.google.com" target="-blank">Acest link isi schimba culoarea de fundal</a></b></p> <p><b><a class="four" href=" http'/(((.google.com" target="-blank">Acest link isi schimba familia fontului</a></b></p> <p><b><a class="fi"e" href=" http'/(((.google.com" target="-blank">Acest link isi schimba modul de decorare</a></b></p> </body> </html> #!emplul " Ilustreaz cum se 3olose$te pseudo/clasa 'focus. <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> input'focus % background&color'yello() * </style>

12#

</head> <body> <form action="form-action.asp" method="get"> Iume' <input type="text" name="nume" /><br /> ,renume' <input type="text" name="pren" /><br /> <input type="submit" "alue="Hrimite" /> </form> <p><b>Iote'</b> >nternet :xplorer suporta pseudo& clasa 'focus daca este specificat 0@B1HC,:.</p> </body> </html>

Pseudo1clasele CSS
Nume 'acti"e 'first&child 'focus 'ho"er 'lang 'link '"isited <escriere 4dau. un stil unui element care este activat 4dau. un stil unui element care este primul descendent al unui alt element 4dau. un stil unui element care este 3ocusat pentru intrare de la tastatur 4dau. un stil unui element c>nd mouse/ul trece peste el 4dau. un stil unui element care are un anumit atribut lan0 4dau. un stil unui lin- nevizitat 4dau. un stil unui lin- vizitat

"'. Pseudo1elementele CSS

Sunt 3olosite pentru a adu.a e3ecte speciale unor selectori.

Sinta!
Sinta a unui pseudo/element este? selector'pseudo&element %property'"alue* Pseudo/elementele pot 3i 3olosite &mpreun cu clasele CSS? selector.class'pseudo&element %property'"alue*

12"

Pseudo1elementul 'first&line
4cest pseudo/element este utilizat pentru a adu.a un stil primei linii dintr/un te t. Fn e emplul urmtorD stilul se aplic primei linii din elementele p? <html> <head> <style type="text/css"> p'first&line % color'4ff$$$$) font&"ariant'small&caps) * </style> </head> <body> <p>,rima linie din fiecare paragraf are un stil special; adaugat cu pseudo&elementul 'first&line.</p> <p>,entru a "edea efectul; redimensionati fereastra bro(serului astfel incat aceste doua paragrafe sa fie afisate pe doua sau mai multe linii.</p> </body> </html> &bs$ Pseudo/elementul Hfirst1lineH poate 3i utilizat numai cu elementele bloc. &bs$ Pseudo/elementul Hfirst1lineH poate avea urmtoarele propriet2i? pentru 3ont pentru culoare pentru 3undal spa2ierea cuvintelor spa2ierea literelor decorarea te tului aliniere vertical trans3ormarea te tului &nl2imea liniei clear

Pseudo1elementul 'first&letter
4cest pseudo/element este utilizat pentru a adu.a un anumit stil primei litere dintr/un te t? <html> <head>

12%

<style type="text/css"> p'first&letter % color'4ff$$$$) font&si+e'xx&large) * </style> </head> <body> <p>,rima litera din acest paragraf este stili+ata cu a=utorul pseudo&elementului 'first&letter. ,rima litera din acest paragraf este stili+ata cu a=utorul elementului 'first&letter.</p> </body> </html> &bs$ Pseudo/elementul Hfirst1letterH poate 3i utilizat numai cu elementele bloc. &bs$ Pseudo/elementul Hfirst1letterH poate avea urmtoarele propriet2i? pentru 3ont pentru culoare pentru 3undal pentru mar.ini pentru paddin. pentru c9enar decorarea te tului aliniere vertical :numai dac HfloatH este HnoneH; trans3ormarea te tului &nl2imea liniei float clear

Pseudo1elementele i clasele CSS

Pseudo/elementele pot 3i combinate cu clasele CSS ? p.articol'first&letter %color'4ff$$$$* <p class="articol">On paragraph din clasa articol.</p> ! emplul de mai sus va a3i$a prima liter din toate para.ra3ele care 3ac parte din clasa HarticolHD &n ro$u.

Pseudo1elemente multiple 12+

Pseudo/elementele pot 3i combinate. Fn e emplul urmtorD prima liter din para.ra3 este ro$ie cu dimensiunea 3ontului !!1lar0e. Restul te tului din prima linie este albastruD cu maIuscule mici :small1caps;. Restul te tului din para.ra3 are culoarea $i dimensiunea 3ontului implicite? <html> <head> <style type="text/css"> p'first&letter % color'4ff$$$$) font&si+e'xx&large) * p'first&line % color'4$$$$ff) font&"ariant'small&caps) * </style> </head> <body> <p>,uteti combina pseudo&elementele 'first&letter si 'first&line pentru a adauga efecte speciale primei litere; respecti" primei linii dintr&un text.</p> </body> </html>

Pseudo1elementul 'before
4cest pseudo/element poate 3i utilizat pentru a insera un con2inut &naintea unui element. Fn e emplul urmtor este inserat o ima.ine &naintea 3iecrui element <h1> din document? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> h1'before %content'url5roses.gif6* </style> </head>

127

<body> <h1>Acesta este un titlu</h1> <p>,seudo&elementul 'before inserea+a un continut inaintea unui element.</p> <h1>Acesta este un titlu</h1> <p><b>Iote'</b> >nternet :xplorer accepta aceasta proprietate numai daca este specificat 0@B1HC,:.</p> </body> </html>

Pseudo1elementul 'after
4cest pseudo/element poate 3i 3olosit pentru a insera un con2inut dup un element. Fn e emplul urmtor este inserat o ima.ine dup 3iecare element <h1>? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> h1'after %content'url5roses.gif6* </style> </head> <body> <h1>Acesta este un titlu</h1> <p>,seudo&elementul 'after inserea+a un continut dupa un element.</p> <h1>Acesta este un titlu</h1> <p><b>Iote'</b> >nternet :xplorer accepta aceasta proprietate numai dacP este specificat 0@B1HC,:.</p> </body> </html>

Pseudo1elementele CSS
Nume 'after 'before 'first&letter 'first&line <escriere 4dau. con2inut dup un element 4dau. con2inut &naintea unui element 4dau. un stil primei litere dintr/un te t 4dau. un stil primei linii dintr/un te t

120

".. Gara de navi0are

!ste 3oarte important pentru un site <eb s aib un sistem de navi.are u$or de 3olosit. Cu CSS pute2i trans3orma plictisitoarele meniuri '()* &n bare de navi.are aspectuoase. 8 bar de navi.are este de 3apt o list de lin-/uri. Fn e emplul vom construi o bar de navi.are dintr/o list '()* standard. <html> <body> <ul> <li><a href="4home">Kome</a></li> <li><a href="4ne(s">Ie(s</a></li> <li><a href="4contact">1ontact</a></li> <li><a href="4about">About</a></li> </ul> <p>Bbs' ,entru a testa link&urile folosim href="4". >ntr&un site real trebuie sa apara adresele OJ. reale.</p> </body> </html> 4cum &nlturm marcatoriiD mar.inile $i paddin./ul din list? <html> <head> <style> ul % list&style&type'none) margin'$) padding'$) * </style> </head> <body>

126

<ul> <li><a href="4home">Kome</a></li> <li><a href="4ne(s">Ie(s</a></li> <li><a href="4contact">1ontact</a></li> <li><a href="4about">About</a></li> </ul> </body> </html> ! plica2ii list&style&type'none L &nltur marcatoriiG ei nu sunt necesari &ntr/o bar de navi.are propriet2ile margins $i padding au valoarea 1 pentru a &nltura setrile implicite ale bro<serului Codul din e emplul urmtor este codul standard utilizat &n construirea barelor de navi.are verticale sau orizontale.

Gar de navi0are vertical

Pentru a construi o bar de navi.are verticalD trebuie s stilizm elementele <a>? <html> <head> <style type="text/css"> ul % list&style&type'none) margin'$) padding'$) * a'link;a'"isited % display'block) font&(eight'bold) color'4LLLLLL) background&color'497bf!1) (idth'1!$px) text&align'center) padding'#px) text&decoration'none) text&transform'uppercase) * a'ho"er;a'acti"e %

1#1

background&color'4GA991A) * </style> </head> <body> <ul> <li><a href="4home">Kome</a></li> <li><a href="4ne(s">Ie(s</a></li> <li><a href="4contact">1ontact</a></li> <li><a href="4about">About</a></li> </ul> </body> </html> ! plica2ii display'block) L a3i$>nd lin-urile ca blocuriD &ntrea.a zon poate 3i ac2ionat cu mouse/ulD nu numai te ulD $i se poate speci3ica l2imea (idth'8$px L elementele bloc ocup toat l2imea disponibilD de aceea se speci3ic l2imea dorit &bs$ Speci3ica2i &ntotdeauna l2imea pentru elementele <a> dintr/o bar de navi.are verticalD alt3el pute2i ob2ine rezultate nedorite &n I!.

Gar de navi0are orizontal

Putem crea o bar de navi.are &n dou moduriD 3olosind itemi inline sau float. 4m>ndou metodele sunt buneD dar dac dori2i ca lin-urile s aib aceea$i dimensiuneD trebuie s 3olosi2i itemi de tip float. Itemi inline 8 metod de a construi o bar de navi.are vertical este s declara2i elemente <li> din lista de lin-uri ca elemente inline? <html> <head> <style type="text/css"> ul % list&style&type'none) margin'$) padding'$) padding&top'8px) padding&bottom'8px) *

1#1

li % display'inline) * a'link;a'"isited % font&(eight'bold) color'4LLLLLL) background&color'497bf!1) text&align'center) padding'8px) text&decoration'none) text&transform'uppercase) * a'ho"er;a'acti"e % background&color'4GA991A) * </style> </head> <body> <ul> <li><a href="4home">Kome</a></li> <li><a href="4ne(s">Ie(s</a></li> <li><a href="4contact">1ontact</a></li> <li><a href="4about">About</a></li> </ul> </body> </html> ! plica2ii display'inline) / implicitD elementele <li> sunt elemente bloc. 4u 3ost &nlturate &ntreruperile de linie dinaintea $i dup 3iecare elementD pentru a 3i a3i$ate pe aceea$i linie. dac seta2i paddin./ul pentru elementele li :$i nu pentru ul;D lin-urile se vor deplasa &n a3ara elementului ul. 5in acest motivD a 3ost speci3icat paddin./ul de sus $i de Ios pentru elementul ul. Itemi float Fn e emplul anteriorD lin-/urile au l2imi di3erite. Pentru ca toate lin-/urile s aib aceea$i l2imeD elementele <liA trebuie declarate ca float $i trebuie speci3icat l2imea pentru elementele <a>?

1#2

<html> <head> <style type="text/css"> ul % list&style&type'none) margin'$) padding'$) o"erflo('hidden) * li % float'left) * a'link;a'"isited % display'block) (idth'1!$px) font&(eight'bold) color'4LLLLLL) background&color'497bf!1) text&align'center) padding'#px) text&decoration'none) text&transform'uppercase) * a'ho"er;a'acti"e % background&color'4GA991A) * </style> </head> <body> <ul> <li><a href="4home">Kome</a></li> <li><a href="4ne(s">Ie(s</a></li> <li><a href="4contact">1ontact</a></li> <li><a href="4about">About</a></li> </ul> </body> </html> ! plica2ii?

1##

float'left) / se 3olose$te float pentru ca elementele bloc s se deplaseze unele l>n. celelalte display'block) / a3i$>nd lin-/urile ca elemente blocD &ntrea.a zon :nu numai te tul; poate 3i ac2ionat cu mouse/ul $i se poate speci3ica l2imea 3iecrei zone (idth'8$px)/ deoarece elementele bloc ocup &ntrea.a l2ime disponibilD nu se pot deplasa unul l>n. altul. 5in acest motivD se speci3ic l2imea dorit a lin-/urilor.

"?. Halerie de ima0ini

Putem 3olosi CSS pentru a crea o .alerie de ima.iniD ca &n e emplul urmtor? <html> <head> <style type="text/css"> di".img % margin' !px) border' 1px solid 4$$$$ff) height' auto) (idth' auto) float' left) text&align' center) * di".img img % display' inline) margin' 3px) border' 1px solid 4ffffff) * di".img a'ho"er img %border' 1px solid 4$$$$ff)* di".desc % text&align' center) font&(eight' normal) (idth' 1!$px) margin' !px) * </style> </head>

1#"

<body> <di" class="img"> <a target="-blank" href="roses.htm"><img src="roses.=pg" alt="Joses" (idth="11$" height="9$" /></a> <di" class="desc">Adaugati o descriere a imaginii</di"> </di"> <di" class="img"> <a target="-blank" href="roses.htm"><img src="roses.=pg" alt="Joses" (idth="11$" height="9$" /></a> <di" class="desc">Adaugati o descriere a imaginii</di"> </di"> <di" class="img"> <a target="-blank" href="roses.htm"><img src="roses.=pg" alt="Joses" (idth="11$" height="9$" /></a> <di" class="desc">Adaugati o descriere a imaginii</di"> </di"> <di" class="img"> <a target="-blank" href="roses.htm"><img src="roses.=pg" alt="Joses" (idth="11$" height="9$" /></a> <di" class="desc">Adaugati o descriere a imaginii</di"> </di"> </body> </html>

"E. &pacitatea8transparen;a unei ima0ini

#!emplul 1 Crearea unei ima.ini transparente cu e3ect la mi$carea mouse/ului peste ima.ine? <html> <head>

1#%

<style type="text/css"> img % opacity'$.#) filter'alpha5opacity=#$6 * </style> </head> <body> <h1>>magini transparente cu efect mouseo"er</h1> <img src="roses.=pg" (idth="1 $" height="113" alt="Joses" onmouseo"er="this.style.opacity=1)this.filters.alpha. opacity=1$$" onmouseout="this.style.opacity=$.#)this.filters.alpha .opacity=#$" /> <img src="tulip.=pg" (idth="1 $" height="113" alt="Hulips" onmouseo"er="this.style.opacity=1)this.filters.alpha. opacity=1$$" onmouseout="this.style.opacity=$.#)this.filters.alpha .opacity=#$" /> </body> </html> ,ire3o utilizeaz pentru transparen2 proprietatea opacity'xD &n timp ce I! 3olose$te filter'alpha5opacity=x6. Fn CSS# sinta a pentru transparen2 este opacity'x. Fn ,ire3o valoarea lui ! poate 3i &ntre 1.1 $i 1.1. 8 valoare mai mic &nseamn un element mai transparent. Fn I! valoarea lui ! poate 3i &ntre 1 $i 111. 8 valoare mai mic &nseamn un element mai transparent. #!emplul " Crearea unei casete transparente cu te t peste o ima.ine de 3undal? <html> <head> <style type="text/css"> di".background % (idth' $$px) height'! $px)

1#+

background'url5klematis.=pg6 repeat) border'!px solid black) * di".transbox % (idth'#$$px) height'17$px) margin'3$px $px) background&color'4ffffff) border'1px solid black) /3 for >: 3/ filter'alpha5opacity=8$6) /3 1223 standard 3/ opacity'$.8) * di".transbox p % margin'3$px #$px) font&(eight'bold) color'4$$$$$$) * </style> </head> <body> <di" class="background"> <di" class="transbox"> <p>Acesta este un text plasat intr&o caseta transparenta. Acesta este un text plasat intr&o caseta transparenta. Acesta este un text plasat intr&o caseta transparenta. Acesta este un text plasat intr&o caseta transparenta Acesta este un text plasat intr&o caseta transparenta. </p> </di"> </di"> </body> </html> Fn acest e emplu a 3ost adu.at un atribut onmouseo"er $i un atribut onmouseout. 4tributul onmouseo"er de3ine$te ce se &nt>mpl c>nd

1#7

mouse/ul se mi$c peste ima.ine. Fn acest e emplu dorim ca ima.inea s nu 3ie transparent c>nd mi$cm mouse/ul peste ea. Pentru aceastaD sinta a &n ,ire3o este? this.style.opacity=13 iar &n I! este? this.filters.alpha.opacity=1$$. C>nd mouse/ul prse$te ima.ineaD ea va 3i din nou transparent. 4cest lucru este realizat cu atributul onmouseout. )ai &nt>iD a 3ost creat elementul di" din class="background" cu &nl2imea $i l2imea 3i ateD o ima.ine de 3undal $i un c9enar. Fn interiorul acestui elementD a 3ost creat un element di" mai micD din class="transbox". 4cest element di" are &nl2imea $i l2imea 3i ateD o culoare de 3undalD un c9enar $i este transparent. Fn interiorul elementului di" transparent a 3ost creat un element p care con2ine te tul.

"C. Ima0ini sprite

8 ima.ine sprite este o colec2ie de ima.ini asamblate &ntr/o sin.ur ima.ine. 8 pa.in <eb care con2ine multe ima.ini are nevoie de mult timp pentru a 3i &ncrcat $i .enereaz numeroase cereri ctre server. ,olosirea ima.inilor sprite reduce numrul acestor cereri ctre server $i l2imea de band utilizat. #!emplu Fn loc s 3olosi2i trei ima.ini separate pentru navi.area &n pa.ina <ebD 3olosi2i ima.inea sprite de mai Ios :QnavRsprite..i3H;?

Cu CSSD putem a3i$a doar por2iunea de ima.ine pe care o dorimD a$a cum ilustreaz e emplul urmtor?

Crearea unei liste de navi0are

Mom 3olosi o list '()D deoarece poate elementele pot 3i lin-uri $i suport o ima.ine de 3undal? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ 2trict//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& strict.dtd"> <html> <head> <style type="text/css"> 4na"list%position'relati"e)* 4na"list li%margin'$)padding'$)list& style'none)position'absolute)top'$)*

1#0

4na"list li; 4na"list a%height'##px)display'block)* 4home%left'$px)(idth'#8px)* 4home%background'url5<na"-sprite.gif<6 $ $)* 4pre"%left'83px)(idth'#3px)* 4pre"%background'url5<na"-sprite.gif<6 &#Gpx $)* 4next%left'1!9px)(idth'#3px)* 4next%background'url5<na"-sprite.gif<6 &91px $)* </style> </head> <body> <ul id="na"list"> <li id="home"><a href="default.asp"></a></li> <li id="pre""><a href="css-intro.asp"></a></li> <li id="next"><a href="css-syntax.asp"></a></li> </ul> </body> </html> #!plica;ii 4na"list%position'relati"e)* L pozi2ia listei de navi.are este relativ pentru a permite pozi2ionarea absolut &n interiorul ei 4na"list li%margin'$)padding'$)list& style'none)position'absolute)top'$)* L elementele listei au mar.inile $i paddin./ul setate la 1D stilul caracteristic listelor este &nlturat $i sunt pozi2ionate absolut 4na"list li; 4na"list a%height'##px)display'block)* L &nl2imea pentru toate ima.inile este setat la ""p 4cum pozi2ionm $i 3i m stilul pentru 3iecare por2iune de ima.ine? 4home%left'$px)(idth'#8px)* L elementul este pozi2ionat la st>n.a $i are l2imea de "+p 4home%background'url5img-na"sprites.gif6 $ $)* L se de3ine$te ima.inea de 3undal pentru element $i pozi2ia acestei ima.ini :left 4p!D top 4p!; 4pre"%left'83px)(idth'#3px)* L elementul listei este pozi2ionat la +#p spre dreapta 26-ome are "+p P 17p spa2iu suplimentar &ntre elementele listei;D $i l2imea este de "#p .

1#6

4pre"%background'url5<img-na"sprites.gif<6 &#Gpx $)* L de3ine$te ima.inea de 3undal a acestui element la "7p spre dreapta 26-ome are "+p P 1p linia despr2itoare; 4next%left'1!9px)(idth'#3px)*/ elementul este pozi2ionat la 126p spre dreapta :elementul 6prev &ncepe la +#p P l2imea lui 6prev de "#p P spa2iu suplimentar;D $i are l2imea de "#p . 4next%background'url5<img-na"sprites.gif<6 no& repeat &91px $)* L de3ine$te ima.inea de 3undal a acestui element la 61p spre dreapta 26-ome are "+p P 1p linia P 6prev are "#p P 1p linia;

4cum vom adu.a un e3ect listei de navi.areD atunci c>nd mouse/ul se mi$c peste ea :9over;. Noua ima.ine :HnavRspriteR9over..i3H; con2ine trei ima.ini normale de navi.are $i trei ima.ini pentru e3ect?

5eoarece este o sin.ur ima.ine $i nu $ase ima.ini separateD pa.ina va 3i &ncrcat rapid. Pentru a ob2ine acest e3ect adu.m doar trei linii de cod? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ 2trict//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& strict.dtd"> <html> <head> <style type="text/css"> 4na"list%position'relati"e)* 4na"list li%margin'$)padding'$)list& style'none)position'absolute)top'$)* 4na"list li; 4na"list a%height'##px)display'block)* 4home%left'$px)(idth'#8px)* 4home%background'url5<na"-sprite-ho"er.gif<6 $ $)* 4home a'ho"er%background' url5<na"-sprite-ho"er.gif<6 $ &# px)* 4pre"%left'83px)(idth'#3px)* 4pre"%background'url5<na"-sprite-ho"er.gif<6 &#Gpx $)*

1"1

4pre" a'ho"er%background' url5<na"-sprite-ho"er.gif<6 &#Gpx &# px)* 4next%left'1!9px)(idth'#3px)* 4next%background'url5<na"-sprite-ho"er.gif<6 &91px $)* 4next a'ho"er%background' url5<na"-sprite-ho"er.gif<6 &91px &# px)* </style> </head> <body> <ul id="na"list"> <li id="home"><a href="home.htm"></a></li> <li id="pre""><a href="page1.htm"></a></li> <li id="next"><a href="page!.htm"></a></li> </ul> </body> </html> ! plica2ii deoarece itemii listei sunt lin-/uriD putem 3olosi pseudo/clasa 'ho"er 4home a'ho"er%background' transparent url5img-na"sprites-ho"er.gif6 $ &# px)* L pentru toate cele trei ima.ini cu e3ectD precizm aceea$i pozi2ie a 3undaluluiD dar cu "%p mai Ios.

"F. Atribute selector

!ste posibil s stiliza2i elementele '()* care au un anumit atributD nu numai class $i id. &bs$ Internet ! plorer recunoa$te atributele selector numai dac declara2ia J 58C(SP! este inclus &n document. #!emplul 1 ! emplul urmtor ilustreaz cum pot 3i stilizate toate elementele care au atributul title? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd">

1"1

<html> <head> <style type="text/css"> YtitleZ % color'blue) * </style> </head> <body> <h!>2tilul "a fi aplicat elementelor'</h!> <h1 title="2alut">/una +iua</h1> <a title="Noogle" href="http'//(((.google.com">Noogle</a> <hr /> <h!>2tilul nu "a fi aplicat elementelor'</h!> <p>2alutare0</p> </body> </html> #!emplul " Ilustreaz aplicarea unui stil tuturor elementelor care au title="122"? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> Ytitle=122Z % border' px solid green) * </style> </head> <body> <h!>2tilul "a fi aplicat elementelor'</h!> <img title="122" src="logo.gif" (idth="1G$" height=" $" /> <br />

atributul

1"2

<a title="122" href="http'//(((.yahoo.com">Cahoo</a> <hr /> <h!>2tilul nu "a fi aplicat elementelor'</h!> <p title="salutari">/una0</p> <a class="122" href="http'//(((.yahoo.com">Cahoo</a> </body> </html> #!emplul % Ilustreaz cum pot 3i stilizate toate elementele al cror atribut con2ine o anumit valoare? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style type="text/css"> YtitleX=helloZ % color'blue) * </style> </head> <body> <h!>2tilul "a fi aplicat elementelor'</h!> <h1 title="hello all">/una +iua</h1> <p title="ele" hello">/una +iua ele"i0</h1> <hr /> <h!>2tilul nu "a fi aplicat elementelor'</h!> <p title="ele"">/una +iua ele"i0</p> </body> </html> #!emplul ' ! emplul urmtor ilustreaz cum se stilizeaz toate elementele care con2in o anumit valoare &n atributul lang? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html>

1"#

<head> <style type="text/css"> Ylang[=enZ % color'blue) * </style> </head> <body> <h!>2tilul "a fi aplicat elementelor'</h!> <p lang="en">Kello0</p> <p lang="en&us">Ki0</p> <p lang="en&gb">Kello0</p> <hr /> <h!>2tilul nu "a fi aplicat elementelor'</h!> <p lang="us">Ki0</p> <p lang="no">Kei0</p> </body> </html> #!emplul . 4tributele selector sunt &n mod deosebit utile pentru stilizarea 3ormularelor 3r atributele class sau id? <0@B1HC,: html ,O/.>1 "&//S31//@H@ UKHA. 1.$ Hransitional//:I" "http'//(((.(3.org/HJ/xhtml1/@H@/xhtml1& transitional.dtd"> <html> <head> <style> inputYtype="text"Z % (idth'1 $px) display'block) margin&bottom'1$px) background&color'yello() * inputYtype="button"Z % (idth'1!$px) margin&left'3 px) display'block)

1""

* </style> </head> <body> <form name="input" action="" method="get"> Iume'<input type="text" name="Iume" "alue=",etrescu" si+e="!$"> ,renume'<input type="text" name=",renume" "alue="Amalia" si+e="!$"> <input type="button" "alue="Hrimite"> </form> </body> </html>

1"%

Giblio0rafie

Tason Cran3ord (ea.ueD 5'()* si CSS D !ditura (eora (eodor =u.oiuD '()*D U'()*D CSS si U)* prin e empleD !ditura (eora 5an SomneaD )i9ai CalciuD TSPD 4SPD U)*D US*(D U'()*C'()*CCSS D !ditura 4S! D 211% 9ttp?CC<<<.<#sc9ools.comC 9ttp?CC<<<.csstutorial.netC 9ttp?CCmanuale.21m.comCCSS

1"+