Introducere in CSS Crearea paginilor HTML este un lucru relativ simplu, invatarea etichetelor HTML si crearea unor imagini

ducand la realizarea de pagini web de o complexitate medie. Odata cu dezvoltarea internetului, site-urile au devenit din ce in ce mai complexe, cu un numar mai mare de pagini, cerintele privind gra ica si elementele din pagina au devenit mai pretentioase si ast el proiectarea paginilor web a devenit o sarcina ceva mai di icila. O problema importanta cand avem un site cu multe pagini este atunci cand dorim sa acem anumite schimbari in elementele pagini! ondul, gra ica sau ontul textelor din pagini. "rin utilizarea C## $Cascading #t%le #heets&, in traducere 'foi de stil in cascada', acest lucru nu mai este o problema, realizandu-se relativ usor, prin schimbarea sau adaugarea unor elemente in codul C##, ne iind nevoi sa lucram la iecare pagina sau la iecare element din pagina. C## se ocupa in general cu aspectul si controlul gra ic al elementelor din pagina, cum ar i! textul, imaginile, ondul, culorile si asezarea acestora in cadrul erestrei paginii. C## oloseste stiluri, acestea inglobeaza, sub un anumit nume, atribute de ormatare care se aplica asupra unui element individual din pagina, asupra unui grup de elemente sau la nivelul intregului document. C## unctioneaza cu HTML, insa nu este HTML. (l extinde unctionalitatile HTML, permitand rede inirea etichetelor HTML existente. "rin utilizarea C## aspectul documentului pe ansamblu, sau a unui element individual din interiorul sau, poate i controlat mult mai usor. #tilurile pot i aplicate asupra unui element, a unui document sau chiar asupra unui intreg site web. )n dezavanta* ar i ca unele navigatoare nu sunt compatibile C##, ast el ca documentele HTML sunt a isate ca si cum C## n-ar exista, dar cele mai cunoscute si utilizate browsere, cum ar i! Mozilla +ire ox, ,nternet (xplorer, Opera, si altele, sunt compatibile C##. -cest curs prezinta elementele de baza C## si modul de lucru cu ' oile de stil', va invata cum sa adaugati si sa olositi C## in paginile dv. web. Tot ce aveti nevoie este un editor de texte simplu, cum ar i .otepad, si un navigator, de exemplu Mozilla +ire ox, care este gratuit "entru a invata cat mai bine elementele prezentate in aceste lectii, exersati personal iecare exemplu si proprietate explicata. /etineti ca acest curs reprezinta un punct de plecare, ne iind prezentate aici toate proprietatile si elementele C##. Scrierea codului CSS Codurile C## pot i scrise in interiorul paginii sau intr-un isier extern cu extensia'.css'. Codul C##, ca orma generala, este alcatuit din! obiectul care va i ormatat. proprietatile acestuia si valoarea $sau atributele& iecarei proprietati. Cand este adaugat in documentul HTML, trebuie scris in cadrul unui tag <style> in sectiunea H(-0 a documentului HTML, dupa cum se vede in ormula generala de cmai *os1 2html3 2head3 2title3Titlul24title3 <style type="text/css"> obiect_css { proprietate:valoare; alta_proprietate:valoare; } </style>

24head3 2bod%3 ... Continut ... 24bod%3 24html3 - Observati sintaxa codului C##. "erechile proprietate:valoare se scriu intre acoladele obiectului C## pe care-l de inesc, intre 'proprietate' si 'valoare' trebuie sa ie un caracter doua-puncte $:& iar la s arsitul perechii se adauga un caracter punct-si-virgula $;& - Cand este adaugat intr-un isier extern '.css', codul C## se scrie la el, dar nu se mai adauga tag-ul 2st%le3. ! "biectele #re$ulile% CSS (xista trei tipuri principale de obiecte C##! selector, clasa si identi icator. & Selectorul '()* #electorul HTML se oloseste pentru a rede ini modul de a isare a continutului etichetei HTML. )n selector HTML reprezinta partea etichetei HTML care indica navigatorului tipul de eticheta. ,ata un exemplu! h5 6 ont- amil%!'-rial'1 ont-size!57px1 8 - -ici selectorul este 'h5'. 0e inirea unui selector HTML olosind C## are ca rezultat rede inirea etichetei HTML. #electorul si eticheta desi par identice, totusi nu sunt. & Clasa Clasa este un obiect care poate i aplicat oricarei etichete HTML. O clasa trebuie creata in interiorul etichetei HTML inainte de a i de inita intr-un cod C##. Crearea clasei in interiorul etichetei se ace simplu, prin speci icarea cuvantului class si numele clasei, ca in exemplu de mai *os!

<+ class="nu,e_clasa"> (ext </+ >

- 'nume9clasa', poate i orice nume dorim. - -poi in interiorul codului C##, clasa trebuie de inita prin adaugarea unui caracter punct $.& inaintea numelui clasei, ca in exemplu urmator! .nume9clasa 6 ont- amil%!'-rial'1 ont-size!57px1 8 .umele aceleasi clase poate i atribuit mai multor etichete HTML din aceeasi pagina, si toate vor prelua acelasi stil css. & Identi-icator Obiectele de tip identi icator $,0& sunt asemanatoare cu clasele. "ot i aplicate oricarei etichete HTML, dar spre deosebire de clase, numele unui identi icator trebuie atribuit numai unei singure etichete HTML dintr-o pagina, pentru alta eticheta se adauga un ,0 cu nume di erit.

Ca si clasa, identi icatoru trebuie intai creat in interiorul etichetei HTML. Modul de creare este simplu, prin speci icarea cuvantului id si numele clasei, ca in exemplu de mai *os!

<+ id="nu,e_id"> (ext </+ >

- 'nume9id', poate i orice nume dorim. ,n interiorul codului C##, identi icatorul este de init prin adaugarea unui caracter diez $:& inaintea numelui, ca in exemplu urmator! :nume9id 6 ont- amil%!'-rial'1 ont-size!57px1 8 In urmatoarea lectie va fi explicat mai amanuntit modul de definire si rolul acestor obiecte CSS . .! Co,ponentele unui obiect CSS Obiectele C##, indi erent de tipul lor, au in componenta urmatoarele elemente!

Selectorii - identi ica un obiect1 pot i selectori de etichete HTML, clase sau identi icatori. /roprietatile - identi ica o proprietate a obiectului1 se re era in special la aspect. 0alorile - sunt atributele unei proprietati1 pot i cuvinte cheie, valori numerice sau procentuale, tipul valorii depinzand de proprietate.

#intaxa generala a unei reguli C## este urmatoarea! selector {proprietate: valoare; } "roprietatile si valorile constituie de initia regulii $obiectului& C##. -cestea se regasesc sub orma de perechi,despartite de caracterul doua puncte ;!;, iecare pereche se termina cu un caracter punct si virgula '1'. (tichetele HTML nu sunt sensibile la di erenta intre ma*uscule si litere mici. 0ar odata cu aparitia limba*ului <HTML, acesta ace distinctie intre ma*uscule si minuscule, ast el ca toate etichetele si toti selectorii trebuie scrisi cu litere mici. Crearea 1oilor de Stil ! 2tic+ete '()* si stiluri CSS C## o era posibilitatea de a schimba aspectul iecarei etichete in parte, prin stabilirea unui anume stil in interiorul ei, cu atributul 'style'. -cest lucru este util mai ales pentru a anula alte stiluri ale elementului respectiv sau de a da elemente gra ice de stil doar etichetei respective. #intaxa pentru de inirea stilurilor in interiorul unei etichete HTML este urmatoarea!

<etic+eta style="proprietate:valoare;"> text !!! </etic+eta>

C## permite si de inirea unor reguli de stil generale intr-o pagina web. -cest set de reguli trebuie scris in sectiunea de antet $head& a documentului, in cadrul tag-ului 2st%le3. #intaxa pentru de inirea C## intr-un document HTML, in interiorul etichetei 2head3 24head3, este urmatoarea! <style type="text/css"> selector_ {proprietate :valoare ; proprietate.:valoare.; !!! } !!! selector_n {proprietate :valoare ; proprietate.:valoare.; !!! } </style>

- 0e inirea tuturor stilurilor intr-o locatie comuna usureaza modi icarea mai rapida a unei pagini. ,ata un exemplu practic de cod css! 2st%le t%pe='text4css'3 h5 6 ont- amil%!>-rial>1 ont-size!57px1 ont-weight!bold1 color!:5555 1 8 p 6 ont- amil%!>-rial>1 ont-size!5?px1 color!blue1 8 24st%le3 +oile de stil pot i utilizate nu doar la nivel de pagina web, ci si la nivel de intreg site. -st el, trebuie creata o oaie de stil externa intr-un isier separat, de pre erat cu extensia '.css', care poate i inclus in pagina HTML prin doua procedee! legatura sau import. Crearea unei oaie de stil externe se ace scriind codul C## intr-un isier text cu a*utorul unui editor de texte simplu $de exemplu .otepad in @indows&, sau specializat in acest sens $precum .otepadAA&. ,n isierul extern creat se adauga reguli C##, ara insa ca aceste reguli sa ie incadrate in etichete #TBL(. 0upa ce a ost creata oaia de stil externa, aceasta poate i olosita de un document HTML utilizand urmatoarea sintaxa, in interiorul tag-ului 2head3 24head3!

<lin3 rel="styles+eet" +re-="nu,e_-isier!css" type="text/css">

- (ticheta L,.C apare in antetul documentului $sectiunea head&, iar atributele olosite transmit navigatorului tipul de legatura $'rel' D legatura cu o oaie de stil, 't%pe' - tipul codului din isier& si locatia inspre isierul ce contine codul C## $'hre ' D calea si numele complet al isierului, inclusiv extensia&. O alta modalitate de utilizare a oilor de stil externe intr-un document HTML o reprezinta importul acestora olosind comanda 4i,port. #intaxa pentru importul unei oi de stil externe este urmatoarea! <style type="text/css"> 4i,port url#nu,e_-isier!css%; </style> "entru a importa un isier C## extern se oloseste in cadrul sectiunii H(-0 a documentului HTML eticheta #TBL(. ,n cadrul acestei etichete este adaugata instructiunea 'Eimport' de mai sus, unde 'nume9 isier.css' reprezinta calea si numele isierului ce contine regulile C## de inite. -laturi de instructiunea 'Eimport', in cadrul etichetei #TBL(, pot i adaugate de initi si selectori suplimentari. Legatura la un isier C## extern sau importul acestuia intr-un document HTML are acelasi e ect ca si cum stilurile incluse ar i ost de inire direct in eticheta #TBL( din sectiunea H(-0 a documentului HTML. .! 5e-inirea selectorilor - #electorii HTML pot i de initi prin adaugarea unui numar de de initii compatibilie cu eticheta HTML la care se re era, avand urmatoarea orma generala!

selector_'()* { proprietate :valoare ; proprietate.:valoare.; !!! }

0upa rede inirea etichetei HTML, stilurile etichetelor respective din documentul HTML vor i modi icate automat. "rin rede inirea unei etichete, proprietatile prestabilite existente nu sunt anulate, ci se adauga altele noi. )tilizarea selectorilor de tip clasa o era posibilitatea con igurarii unor stiluri care se pot aplica doar acelor elemente care sunt etichetate cu clasa respectiva. #intaxa generala de de inire a unei clase C## este! !nu,e_clasa { proprietate :valoare ; proprietate.:valoare.; !!! }

(xista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa poate i olosita doar cu eticheta HTML respectiva. "entru a de ini o clasa care sa a ecteze in mod direct un anume selector HTML, se oloseste urmatoarea sintaxa! selector_'()* !nu,e_clasa { proprietate :valoare ; proprietate.:valoare.; !!! } #electoarele de clasa sunt acceptate de toate navigatoarele. .umele unei clase e recomandat sa ie di erit de cuvantele rezervate Fava#cript. - -semanator cu selectorii de clasa se de inesc si identi icatorii $id-ul&. -cestia sunt olositi pentru crearea de stiluri care pot i atribuite unei singure etichete HTML dintr-o pagina. #intaxa generala de de inire a unui identi icator este! 6identi-icator { proprietate :valoare ; proprietate.:valoare.; !!! } ,denti icatorii permit de inirea unui element sub orma unui obiect, iind olositi doar o singura data in cadrul unei pagini web pentru identi icarea tag-ului respectiv, ast el poate i manipulat si cu a*utorul unctiilor Fava#cript. .umele unui identi icator e recomandat sa ie di erit de cuvantele rezervate Fava#cript. 7! Crearea etic+etelor '()* personali8ate Ma*oritatea etichetelor HTML au unele proprietati prestabilite. -cestea ie raman asa cum sunt, ie pot i rede inite. (xista insa cazuri in care se doreste crearea unor etichete personalizate, pornind de la zero. ,n acest caz se olosesc etichetele <span> si <div>. (ticheta <span> nu are proprietati mostenite. (a reprezinta doar o locatie vida care creaza o eticheta in linie. "entru a con igura o eticheta in linie trebuie de inita o clasa sau identi icator care sa poata i aplicat apoi unei etichete 2span3. ,ata un exemplu cu, orma generala, in care selectori sunt precedati de eticheta 2span3 ! ... 2span class='nume9clasa'3 ... 24span3 ... 2span id='span5'3 ... 24span3 ... 2span class='clasa9span'3 ... 24span3 ... -cum iata cum pot i de initi acestia in interiorul unei oi de stil! .nume9clasa 6 proprietate5!valoare51 proprietate?!valoare?1 ... 8 :span5 6 proprietate5!valoare51 proprietate?!valoare?1 ... 8 span .clasa9span 6 proprietate5!valoare51 proprietate?!valoare?1 ... 8

,n momentul in care se doreste con igurarea unui bloc separat de restul continutului unui document HTML, solutia este eticheta <div>. -ceasta creaza o zona proprie in pagina, cu linie noua atat deasupra sa cat si dedesubtul sau. "entru crearea etichetelor 0,G se procedeaza la el ca si in cazul etichetelor in linie #"-., prin de inirea mai intai a unei etichete de tip clasa sau identi icator, urmata apoi de aplicarea ei asupra unei etichete 2div3. ,ata orma generala de aplicare a unei etichete 2div3 intr-o pagina HTML !

... 2div class='nume9clasa'3 ... 24div3 ... 2div id='div5'3 ... 24div3 ... 0e inirea acestor etichete 2div3 intr-un cod C## se ace ast el! div 6 proprietate5!valoare51 proprietate?!valoare?1 ... 8 .nume9clasa 6 proprietate5!valoare51 proprietate?!valoare?1 ... 8 :div5 6 proprietate5!valoare51 proprietate?!valoare?1 ... 8 /egulile C## pentru de inirea etichetelor 2span3 sau 2div3, pot i plasate la el ca si celelalte tipuri de selectoare, in sectiunea 'head' a documentului in interiorul etichetei 'st%le', sau intr-un isier extern carev ulterior este legat sau importat in documentul HTML. Mai multe lucruri despre DIV si SPAN puteti invata de aici -> DIV si SPAN. 9! 5e-inirea de re$uli si,ilare 0aca mai multi selectori olosesc aceleasi de initii css, acestia pot avea aceeasi lista de elemente, iind scrisi separat prin virgule. #intaxa generala pentru de inirea unei liste cu mai multi selectori este urmatoarea!

selector : selector.: !!! { proprietate :valoare ; proprietate.:valoare.; !!! }

,mpreuna cu selectorii pot i de asemenea de initi identi icatorii si clasele. 0ezavanta*ul ar i ca in momentul in care este modi icata o valoare a unei proprietati incluse in de initie, valoarea respectiva se va modi ica in toate etichetele reprezentate de acesti selectori. ;! 5e-inirea etic+etelor in context #i,bricate% Cand o eticheta este incon*urata de alte etichete $a landu-se ast el una in interiorul alteia&, spunem ca aceste etichete sunt imbricate. (ticheta exterioara se numeste, in acest caz, eticheta parinte, iar cea in erioara se numeste copil. #e pot crea reguli care revin numai etichetelor copil, sintaxa generala a unei ast el de reguli iind!

selector selector. !!! { proprietate :valoare ; proprietate.:valoare.; !!! }

- )nde 'selector5' este selectorul parinte iar 'selector?' este selectorul copil. Lista de selectori imbricati poate i mai mare de doi, ultimul selector din lista este cel care primeste toate stilurile incluse in regula si in plus le mosteneste si pe cele ale parintilor. Ca si selectorii singuri, selectorii imbricati pot include in lista clase, identi icatori sau selectori HTML. Toate etichetele HTML, cu exceptia etichetei HO0B, au cel putin o eticheta parinte care le incon*oara. 0e cele mai multe ori stilurile etichetelor din interior preiau stilurile etichetelor parinte $exista insa cazuri in care proprietatile nu sunt mostenite de etichetele imbricate&. -cest mecanism se numeste mostenirea stilurilor. "rin rede inirea unui selector, eticheta nu-si pierde proprietatile prestabilite, doar in cazul in care acestea sunt modi icate. -st el proprietatile mostenite pot i anulate prin rede inirea acestora in lista de de initii a etichetei imbricate.

<! Cresterea prioritatii unei de-initii Galoarea =i,portant adaugata unei de initii atribuie maximum de prioritate in determinarea ordinii unei executii. Galoarea =i,portant trebuie plasata inaintea caracterului >1>, ca in exempul urmator!

selector { proprietate :valoare ; proprietate.:valoare. =i,portant; !!! }

>! 5eter,inarea ordinii executiei 0eoarece exista mai multe moduri de a aplica stilurile, pot apare situatii in care unei etichete sa-i ie aplicate mai multe stiluri. +oile de stil din doua sau mai multe surse, olosite simultan, pot cauza contradictii. 0e aceea exista cateva reguli care determina ordinea executiei $numita si cascada&, acestea sunt!

5. /egulile C## scrise in interiorul paginii HTML, in cadrul etichetei 'st%le' din sectiunea 'head' au o prioritate mai mare decat cele scrise intr-un isier extern, iar regulile scrise in interiorul etichetelor au o prioritate mai mare decat cele din cadrul etichetei 'st%le' din sectiunea 'head'. ?. (xistenta atributului =i,portant D con era prioritate maxima la a isare de initiei in care este utilizat. I. Sursa re$ulilor D exista numeroase navigatoare care permit utilizatorului sa-si de ineasca propriile oi de stil. Totusi, oile de stil ale autorului le anuleaza pe cele ale vizitatorului daca acestea din urma nu au valoarea 'Jimportant'. K. Speci-icitate D cu cat o regula dispune de mai multi selectori HTML, de clasa si de identi icator, cu atat prioritatea ei creste. ,0-urile au valoarea 5LL, clasele au valoarea 5L, iar selectorii HTML au valoarea 5. 7. )o,entul aparitiei D cu cat un stil apare mai tarziu, cu atat importanta lui este mai mare. -st el, de initiile unei etichete copil au prioritatea mai mare si anuleaza toate stilurile precedente cu care intra in con lict.

?! @dau$area co,entariilor la CSS (ste bine ca uneori sa ie adaugate comentarii in codul C##, mai ales in cazul isierelor externe. Comentariile a*uta la intelegerea codului, acandu-se ast el cunoscut, pentru mai tarziu, rolu anumitor elemente din codul C##. Comentariile nu au nici un e ect si pot i plasate in *urul regulilor, iind utile si in cazul navigatoarelor care nu suporta C##. "entru a adauga comentarii in regulile de stil avem la dispozitie doua modalitati!

,n cazul in care comentariul se intinde pe un singur rand este su icienta olosirea perechii de caractere >//> urmata de comentariu. ,n cazul in care comentariul contine mai multe linie, trebuie plasat intre >/A> care deschide zona de comentariu si >A/> care indica s arsitul comentariului.

,n cazul olosirii comentariilor cu >//> se pot adauga oricate slash-uri, minimul iind de doua. ,ata un exemplu in care puteti vedea cum pot i adaugate comentariile! 4M Comentariu, pe mai multe linii M4 .nume9clasa 6 proprietate5!valoare51 proprietate?!valoare?1 ... 8 44 Comentariu pe o singura linie :div5 6 proprietate5!valoare51 proprietate?!valoare?1 ... 8

Con-i$urarea -onturilor -legerea potrivita a onturilor si olosirea acestora in cadrul paginilor web este importanta, poate atrage critici si comentarii din partea vizitatorilor, mai ales daca ormatarea clasica prin scris normal, aldin sau cursiv nu este olosita corespunzator. C## include acilitati de control asupra aspectului onturilor, prin posibilitatea de a stabili amilia de onturi, atributele ingrosat si inclinat, dimensiunea literelor precum si spatiul dintre linii. (xista cinci amilii de onturi de baza!

seri- D au un ornament $seri & plasat la terminatia literei, care ii o era o distinctie speciala. #unt olosite pentru tiparire, chiar daca textele sunt mai mari sau mai mici. .u sunt indicate pentru a isarea textelor pe ecran. sans seri- D sunt onturi care nu olosesc seri e, iind indicate pentru continut text general. ,onospace D onturile monospatiate pot avea seri e, ele se deosebesc prin aptul ca iecare litera ocupa aceeasi cantitate de spatiu. #unt cele mai indicate pentru textele care trebuie citite cu exactitate, ca de exemplu liniile de program. cursive D imita scrisul de mana, intr-o maniera stilizata. #unt indicate in scopuri decorative, ne iind recomandate pentru scrierea unor texte mai lungi. -antasy D nu se incadreaza in nici una dintre categoriile de mai sus, iind onturi care au un caracter predominant ornamental $reprezentand ilustratii sau pictograme&.

! Stabilirea -ontului +ontul olosit pentru a isarea unui text poate i stabilit prin proprietatea ' ont'. "entru de inirea ontului in cadrul unei reguli, trebuie speci icata, dupa selectorul din cadrul oii de stil, proprietatea -ont&-a,ily urmata de numele ontului sau a onturilor $despartite prin virgula&. (ste bine ca numele onturilor sa ie incadrate intre ghilimele simple sau duble, mai ales daca numele acestora contine spatii. +orma generala iind urmatoarea!

selector { -ont&-a,ily:"nu,e_-ont ": "nu,e_-ont.": !!!: nu,e_$eneric }

- 0upa ultima virgula se pot olosi urmatoarele nume generice de onturi! 'seri ', 'sans-seri ', 'cursive', 'monospace' sau ' antas%'. ,ncluderea unei asemenea valori este optionala, insa recomandata. ,ata un exemplu practic! h5 6 ont- amil%!'-rial', 'Helvetica', sans-seri 8 Cand este speci icata o lista de onturi, navigatorul incearca sa oloseasca primul ont din lista, daca nu este gasit parcurge lista pana in momentul in care intalneste un ont instalat. 0aca nu exista onturi echivalente, textul va i a isat cu ontul prestabilit de browser. 0aca este speci icat un nume generic, textul va i a isat cu un ont apartinand aceluiasi stil, in cazul in care onturile speci icate in lista nu sunt disponibile. (xista posibilitatea olosirii unei palete largi de onturi in crearea paginilor web, nu doar a celor din lista limitata a onturilor compatibile cu navigatoarele. #olutia consta in inglobarea ontului in cadrul paginii si trimiterea lui in mod automat in calculatorul vizitatorului, adica, descarcarea si olosirea lui automata. "entru a ingloba un ont intr-o pagina si a-l descarca, se oloseste intructiunea 4-ont&-ace. -ceasta trebuie sa includa proprietatea -ont&-a,ily, urmata de numele ontului si apoi trebuie indicata locatia pe server de unde poate i descarcat ontul respectiv. Codul C## este urmatorul!

4-ont&-ace { -ont&-a,ily:nu,e_-ont src: url#locatie_-ont%; }

.u poate i ales orice ont pentru a i descarcat, acesta trebuie sa respecte un anume ormat. Totusi, problema este ca nu exista un ormat valabil pentru toate navigatoarele, de exemplu ,nternet (xplorer oloseste onturi in ormat 'eo ' $obtinute cu a*utorul unui program numit @(+T&, iar Mozilla oloseste un ormat 'ot '. .! Stabilirea di,ensiunii -ontului Cu a*utorul C## se poate stabili dimensiunea ontului olosind valori absolute $exprimate in di erite unitati de masura! pixeli, centimetri&, procentuale, sau chiar relative. "entru a de ini dimensiunea ontului in cadrul unei reguli trebuie speci icata proprietatea -ont&si8e urmata de o valoare a dimensiunii care poate lua una din urmatoarele tipuri de valori!

& unitate de ,asura - exprimata in pixeli, puncte, inci sau centimetri & expresie absoluta - xx-small, x-small, small, medium, large, x-large si xx-large - expresiile s,aller sau lar$er, ca raport cu elementul parinte & procent - un numar exprimat in procente $cu N&, care indica marimea textului in raport cu dimensiunea elementului parinte

,ata orma generala a codului C## pentru stabilirea dimensiunii ontului! selector { -ont&si8e:valoare } (ste bine ca pentru oile de stil care ormateaza iesirea la imprimanta sa se oloseasca ca unitati de masura punctele, cm sau mm. "ixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru stabilirea dimensiunii ontului. "ixelii nu reprezinta o masura oarte sigura, dar, de obicei, pentru a isarea pe ecran, constituie o masura mai sigura decat dimensiunea in puncte. ,ata un exemplu practic exprimat in pixeli! h5 6 ont-size!57px1 8 7! (ext inclinat -tributul ' ont-st%le' permite scrierea textelor inclinate in doua moduri! 'cursiv' si 'oblic'. .otiunile pot i con undate, insa cursivul se re era la versiunea unui ont a carui caractere au o inclinare spre dreapta, iar oblicul este un ont inclinat ortat spre dreapta. "entru a crea caractere cursive in cadrul unei reguli trebuie precizata proprietatea -ont&style, ast el!

selector { -ont&style:valoare }

)nde 'valoare' poate i unul din urmatoarele cuvinte! nor,al, italic sau obliBue ,ata un exemplu! h5 6 ont-st%le!italic1 8 Galoarea nor,al se poate olosi pentru a sterge ormatarea cu caractere inclinate atunci cand aceasta este mostenita. 9! Crosi,ea -ontului ,ngrosarea este una dintre metodele utilizate des pentru scoaterea in evidenta a unui text. C## con era mai multa lexibilitate in utilizarea textului ingrosat decat elementul HTML 2b3, prin posibilitatea introducerii unei valori proprietatii -ont&Dei$+t, dupa cum urmeaza!

bold D scrie ontul olosind caractere ingrosate

bolder - mareste grosimea ontului relativ la grosimea curenta li$+ter D micsoreaza grosimea ontului ata de grosimea curenta - o valoare cuprinsa intre EE si FEE $multiplu de 5LL& D reprezinta valoarea ingrosarii, bazata pe versiunile alternative disponibile ale ontului nor,al D elimina ormatarea cu caractere aldine $ingrosate&

,n cazul olosiri valorii cuprinse intre 5LL si OLL, KLL reprezinta valoarea corespunzatoare textului normal, iar PLL valoarea ingrosarii pentru stilul aldin. Ma*oritatea onturilor nu dispun de noua ponderi, ast el ca daca este speci icata o valoare care nu este disponibila, va i olosita o alta pondere. +orma generala pentru stabilirea grosimii ontului este urmatoarea! selector { -ont&Dei$+t:valoare } ,ata un exemplu practic! h5 6 ont- weight!bold1 8 ;! )aGuscule ,ici Ma*usculele mici sunt olosite de obicei in cadrul titlurilor, ele iind obtinute prin convertirea literelor mici in ma*uscule cu o dimensiune mai mica decat ma*usculelor normale. -st el se obtin cuvinte in care toate literele sunt scrise cu ma*uscule insa prima litera este mai inalta decat celelalte. #tabilirea unei reguli pentru ma*uscule mici se realizeaza prin utilizarea proprietatii -ont&variant cu valoarea s,all&caps. "rin olosirea valorii nor,al, vor i anulate celelalte valori mostenite ale proprietatii -ont&variant. +orma generala este urmatoarea!

selector { -ont&variant:valoare }

,ata cum ormatam un text dintr-o eticheta 'h5' cu valoarea 'small-caps'! h5 6 ont-variant!small-caps1 8 <! 0alori ,ultiple pentru -ont 0eseori este util sa ie precizate toate elementele ontului intr-o singura de initie. "entru a se realiza acest lucru este olosita proprietatea ' ont' urmata de valorile pentru celelalte proprietati, separate prin spatiu. #intaxa generala este urmatoarea!

selector { -ont:val_-ont&-a,ily val_-ont&style val_-ont&variant val_-ont&Dei$+t val_-ont&si8e val_+ei$+t }

0aca o anumita valoare din lista este omisa, navigatorul va olosi valoarea prestabilita. ,ata si un exemplu practic de olosire a mai multor valori in aceeasi de initie! h5 6 ont!'-rial',sans-seri italic small-caps bold 5Kpt1 8 Con-i$urarea textului Textele alcatuiesc o buna parte din paginile web. Metodele de a isare a textelor prin controlul nu numai a ontului, dimensiunii si culorilor, ci si prin alte elemente, pot imbunatati aspectul pagini si pot atrage atentia asupra anumitor elemente din text.

! Spatiul intre litere #patierea se re era la cantitatea de spatiu dintre literele unui cuvant. #e poate aduaga sau reduce spatiul dintre litere olosind proprietatea letter&spacin$, urmata de o valoare exprimata intr-o anumita unitate de masura, ce poate lua si valori negative. #intaxa generala este urmatoarea!

selector { letter&spacin$:valoare }

0aca valoarea proprietatii este nor,al sau E atunci spatierea va i ixata la valorile implicite $ ara modi icari suplimentare&. 0aca se utilizeaza o valoare exprimata in e, atunci dimensiunea rezultata va i calculata in raport cu cea a elementului parinte. (xemplu! h5 6 letter-spacing!5,7em1 8 - "uteti olosi si pixeli $px& .! Spatiul dintre cuvinte C## da posibilitatea modi icarii spatiului intre cuvinte atat prin marire, cat si prin micsorare. #patiul dintre cuvinte poate i modi icat olosind proprietatea Dord&spacin$, urmata de o valoare exprimata intr-o anumita unitate, iind de obicei stabilita in pixeli. "entru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa ie! nor,al. #intaxa generala este urmatoarea!

selector { Dord&spacin$:valoare }

O valoare pozitiva semni ica un plus de spatiu adaugat la valoarea implicita, iar o valoare negativa reduce acest spatiu. 0aca valoarea este egala cu L atunci spatiul dintre cuvinte este ixat la valoarea prestabilita, neproducand de apt nici un e ect, iind similar cu valoarea normal. ,ata un exemplu in care marim spatiul intre cuvintele din eticheta 'h?' cu Q pixeli! h? 6 word-spacing!Qpx1 8 7! Spatiul intre linii ,naltimea randurilor se re era la spatiul dintre liniile paragra ului. Modi icarea spatiului intre linii poate avea ca e ect o mai buna si usoara citire a textului in cazul in care aceasta este mai mare $creaza o regiune cu spatiu intre liniile de text&. -lteori, daca inaltimea este mai mica $ olosita la randurile de titlu&, poate con eri un aspect mai stilat. "entru a modi iica inaltimea randurilor se oloseste proprietatea line&+ei$+t, urmata de o valoare care poate i exprimata in trei moduri!

- un nu,ar care inseamna multiplicarea dimensiunii ontului cu numarul respectiv pentru a obtine valoarea spatierii1 - o valoare de tip absolut, exprimata in pixeli, puncte sau orice alta unitate de masura olosita in C##, care indi erent de dimensiunea stabilita a ontului, inaltimea liniei va avea o valoare exacta1 - un procent, care stabileste inaltimea liniei ca iind egala cu un anumit procent din dimensiunea ontului olosit pentru scrierea textului.

#intaxa generala pentru modi icarea spatiului intre linii este! selector { line&+ei$+t:valoare }

,ata un exemplu in care marim inaltimea liniei cu 7LN din dimensiunea ontului! h5 6 line-height!57LN1 8

,naltimea liniei poate de asemenea i de inita si in cadrul proprietatii ' ont-size', prin introducerea caracterului '4' urmat de valoarea pentru inaltimea randului, imediat dupa dimensiunea ontului. (xemplu! + { -ont&si8e: .px/.?px; } 9! )ari,ea #tipul% literelor (xista cazuri in care se doreste a isarea textului cu un anume tip de litere. +olosind C##, se poate speci ica explicit ca textul sa apara cu ma*uscule initiale, ma*uscule, minuscule, combinat sau asa cum a ost el scris. Cu a*utorul proprietatii text&trans-or, se poate controla marimea literelor din text, indi erent de modul cum a ost el scris initial. "entru a schimba tipul literelor dintr-un text, proprietatea text&trans-or, va i urmata de o valoare care poate i!

capitali8e D pentru ca primul caracter din iecare cuvant sa ie scris cu ma*uscula1 uppercase D pentru ca toate caracterele sa ie scrise cu ma*uscule1 loDercase - pentru ca toate caracterele sa ie scrise cu litere mici1 none D pentru ca textul sa ie a isat asa cum este.

#intaxa generala este! selector { text&trans-or,:valoare } ,ata un exemplu in care toate literele vor i a isate cu ma*uscule! h5 6 text-trans orm!uppercase1 8 "roprietatea 'text-trans orm' este utila atunci cand textele sunt create in mod dinamic $de exemplu, in cazul in care ele provin dintr-o baza de date sau orm HTML&. ;! @linierea textului )n text poate i aliniat de la marginea din stanga, din dreapta, centrat sau la ambele margini $stangadreapta&. "roprietatea text&ali$n o era posibilitatea controlului asupra alinierii textului. 0e inirea alinierii se ace speci icand dupa proprietatea text&ali$n una din valorile! le-t, ri$+t, centersau Gusti-y. +orma generala este!

selector { text&ali$n:valoare }

"roprietatea poate i aplicata numai elementelor la nivel de bloc $0,G, )L, Hx, p&, valoarea sa implicita iind in ma*oritatea cazurilor stabilita la valoarea 'le t'. ,ata un exemplu in care textul din eticheta 'h?' este aliniat 'stanga-dreapta'! h? 6 text-align!*usti %1 8 - ,n cazul in care alinierea textului este 'stanga-dreapta', spatierea cuvintelor si a literelor se schimba pentru a se obtine linii de aceeasi lungime.

<! @linierea pe verticala a textului Cu a*utorul proprietatii vertical&ali$n se poate preciza pozitia unor elemente $in linie& in raport cu textul din *urul lor. -sta inseamna ca proprietatea poate i olosita doar cu etichete in linie care nu determina un salt la linie noua, de obicei utilizandu-se cu eticheta 'span'. #intaxa pentru utilizarea proprietatii vertical&ali$n este!

selector { vertical&ali$n:valoare }

"entru de inirea alinierii pe verticala a textului se oloseste una din urmatoarele optiuni! super D pentru scrierea textului in stil exponent, deasupra liniei de baza1 sub - pentru scrierea textului in stil indice, sub linia de baza1

baseline D pentru scrierea textului pe linia de baza1 - una din valorile! 'top', 'middle', 'bottom', 'text-top', 'text-bottom' D pentru a alinia textul relativ la alinierea parintelui acestuia1 - valoare procentuala D care ridica sau coboara linia de baza a elementului proportional cu dimensiunea ontului elementului parinte.

,ata un exemplu in care textul din eticheta 2span3 va aparea ca exponent ata de textul din stanga-dreapta lui! span 6 vertical-align!super1 8 >! 1or,area para$ra-elor Cu a*utorul proprietatii text&indent se poate stabili ce spatiu suplimentar este inserat la inceputul primei linii de text dintr-un paragra . "entru aceasta, proprietatea text&indent este urmata de o valoare exprimata intr-o unitate de masura $pixeli sau em& sau in procente $proportional cu latimea paragra ului&. #intaxa generala este!

selector { text&indent:valoare }

Galorile pozitive determina o indentare tipica $spre dreapta&, in timp ce valorile negative determina o indentare inspre argine, iind necesar sau marirea umplerii $padding& sau marirea marginilor. ,ata un exemplu de cod C## in care va i determinat un spatiu de ?L pixeli la inceputul paragra ului din eticheta 2p3! p 6 text-indent!?Lpx1 8 0aca se utilizeaza o valoare exprimata in unitati 'em', atunci rezultatul va i relativ la dimensiunea ontului elementului asupra caruia se aplica. "entru eliminarea decalarii se utilizeaza valoarea L. ?! @plicarea ele,entelor decorative C## permite ornarea textului prin scoaterea lui in evidenta in patru moduri! subliniere, supraliniere, taierea textului cu o linie sau crearea de texte care clipesc. -plicarea de elemente ornamentale unui text se realizeaza prin proprietatea text&decoration, urmata de una din valorile!

underline D pentru a sublinia textul overline D pentru a trasa o linie deasupra textului line&t+rou$+ D pentru a taia textul cu o linie

blin3 D pentru a ace textul sa apara si dispara intermitent

+orma generala este ! selector { text&decoration:valoare } "entru a elimina decoratiile se oloseste valoarea 'none'. "rin olosirea acestei valori se elimina si sublinierile linR-urilor, chiar daca navigatorul are prestabilit sa le arate subliniat. ,ata un exemplu de cod in urma caruia linR-urile nu vor mai i a isate subliniat! a!linR 6 text-decoration!none1 8

(lementul decorativ 'blinR' a prezentat probleme, iind de curand eliminat de unele navigatoarelor. F! Spatiile albe ,ntreruperile de linie si spatiile albe dintr-un document HTML sunt tratate ca un singur spatiu sau sunt ignorate, daca nu este utilizata eticheta 2pre3. C## permite a isarea acestor spatii, precum si a intreruperilor textului, utilizand proprietatea D+ite&space, urmata de valoarea 'pre'. +orma generala este!

selector { D+ite&space:valoare }

,n locul cuvantului 'valoare' poate i adaugat! 'pre', 'nowrap' sau 'normal' )tilizarea valorii 'noDrap' impiedica trecerea la linia urmatoare. Galoarea 'normal' permite navigatorului sa decida asupra modului de tratare a spatiilor. 0e obicei, acestea vor i trans ormate intr-un singur spatiu. ,ata un exemplu in urma caruia spatiile albe si trecerea la linia noua vor i a isate asa cum au ost scrise! p 6 white-space!pre1 8 #pre deosebire de eticheta 2pre3 care schimba ontul cu unul monospatiat, valoarea 'pre' a proprietatii D+ite&space nu are nici un e ect asupra ontului elementului la care se aplica. Con-i$urari pentru culori si -undal 0aca HTML permitea con igurarea unor culori si elemente gra ice de undal doar pentru anumite elemente, C## permite de inirea culorii si a undalului pentru orice element din pagina web. ! Con-i$urarea -undalului #e poate schimba undalul $bacRground& intregii pagini, sau pentru un anumit element din pagina, ie el de tip 0,G, paragra , imagine, tabel sau ormular. a& Culoarea -undalului "entru a schimba culoarea undalului se utilizeaza proprietatea bac3$round&color, urmata de o valoare care reprezinta numele culorii sau valoarea /SH, exprimata in cod hexa. #intaxa generala este!

selector {bac3$round&color:valoare }

0aca se oloseste valoarea 'transparent' navigatorul va a isa culoarea prestabilita sau cea a elementului parinte. "entru schimbarea undalului intregii pagini se aplica aceasta proprietate selectorului 'bod%'. ,ata un exemplu in care culoarea de undal a paginii este schimbata in albastru! bod% 6 bacRground-color!:LLLL 1 8 b& I,a$inea de -undal "uteti utiliza pentru undal si o imagine, pentru aceasta se oloseste proprietatea bac3$round&i,a$e, urmata de adresa )/L a locatiei imaginii. #intaxa generala este!

selector { bac3$round&i,a$e:url#Hadresa_IJ*H%; }

)nde 'adresa9)/L' este calea si numele imaginii care va i olosita 0aca in locul adresei )/L se oloseste valoarea 'none', navigatorul nu va olosi nici o imagine. ,ata un exemplu in care pentru undalul paginii este olosita o imagine! bod% 6 bacRground-image!url$Tcale4imagine.gi T&1 8 c& Jepetarea i,a$inii de -undal "e langa posibilitatea a isarii unui element gra ic ca undal, C## o era si un mod de repetare a acestuia. "entru a repeta imaginea de undal se oloseste proprietatea bac3$round&repeat, urmata de o valoare care poate avea una din urmatoarele optiuni!

repeat D pentru a repeta imaginea pe toata supra ata elementului respectiv1 repeat&x D pentru a repeta imaginea numai pe orizontala1 repeat&y D pentru a repeta imaginea numai pe verticala1 no&repeat D pentru a a isa imaginea o singura data, ara repetare.

+orma generala este! selector { bac3$round&repeat:valoare } ,ata un exemplu de cod in care imaginea olosita pentru undalul paginii se va repeta pe verticala pe toata inaltimea documentului! bod% 6 bacRground-repeat!repeat-%1 8 d& Controlul i,a$inii de -undal C## poate de ini modul de tratare a undalului la derularea paginii, pentru aceasta se oloseste proprietatea bac3$round&attac+,ent cu optiunea '-ixed', pentru a lipi imaginea de undal de ereastra navigatorului sau optiunea 'scroll', pentru a permite derularea imaginii de undal alaturi de elementul corespunzator atunci cand vizitatorul deruleaza pagina. #intaxa generala este!

selector { bac3$round&attac+,ent:valoare }

,ata un exemplu practic aplicat imaginii olosita pentru undalul paginii! bod% 6 bacRground-attachment!scroll1 8 e& /o8itia i,a$inii de -undal "entru a pozitiona imaginii de undal in unctie de coltul din stanga-sus al elementului se utilizeaza proprietatea bac3$round&position urmata de doua valori $coordonate x si %& separate prin spatiu, TxT pentru pozitia orizontala si T%T pentru cea verticala. +orma generala a acestei proprietati este!

selector { bac3$round&position:valoare }

Coordonatele x si % pot i exprimate ca valori absolute sau ca procente. #e pot olosi si cuvintele cheie! 'le-t', 'center' sau 'ri$+t' pentru coordonata x1 respectiv 'top', 'center' sau 'botto,' pentru coordonata %. ,ata un exemplu in care imaginea de undal a paginii este pozitionata la 5L pixeli $x si %& relativ la coltul din stanga-sus! bod% 6 bacRground-position!5Lpx 5Lpx1 8 & Stabilirea si,ultana a proprietatilor -undalului Toate proprietatile undalului pot i con igurate cu a*utorul proprietatii bac3$round. #e poate stabili simultan printr-o lista de valori proprietatile undalului, enumerate in orice ordine si separate prin spatiu. Cand se utilizeaza proprietatea bac3$round, nu este necesar sa ie speci icate toate proprietatile, cele nespeci icate iind stabilite la valoare lor implicita. #intaxa generala este!

selector {bac3$round:val_b$&color val_b$&i,$ val_b$&repet val_b$&attac+ val_b$&position }

Galoarea implicita a proprietatii bac3$round&color este 'transparent'. Galoarea implicita a proprietatii bac3$round&i,a$e este 'none'. Galoarea implicita a proprietatii bac3$round&attac+,ent este 'scroll'. Galoarea implicita a proprietatii bac3$round&position este 'top le t'. ,ata si un exemplu in care sunt aplicate mai multe proprietati pentru bacRground, in aceeasi de initie! div 6 bacRground!:eQeQ e url$Timagine.*pgT& 7LN repeat 8 - 0,G-ul va avea culoarea de ndal ':eQeQ e', cu o imagine pozitionata la *umatatea distantei <, B si care se repeta. .! Stabilirea culorii din pri,&plan "roprietatea color poate schimba culoare oricarui element, ie el text, linie orizontala sau element de tip ormular. #intaxa generala pentru utilizarea acestei proprietati este!

selector { color:valoare }

Galoarea culorii poate i! nu,ele culorii - una din cele 5U culori prede inite $red, green, blue, white, silver, ...& valoare in +exa - sub orma :rrggbb

valoare JCK - sub orma rgb$r, g, b&, unde r, g, b pot i reprezentate prin numere intregi cuprinse intre L si ?77 sau procente de rosu, verde si albastru cu valori intre LN si 5LLN.

,ata un exemplu de cod C## in care culoarea textului din eticheta 'hI' este de inita verde! hI 6 color!green1 8 Controale pentru c+enare si a-isarea ele,entelor ,ndi erent daca o eticheta este de sine statatoare sau imbricata in alte etichete, aceasta poate i tratata ca un element distinct pe ecran si poate i controlata prin intermediul C##. Orice element creat intr-o oaie de stil este prezentat in propriul lui cadru. .otiunea de element se re era la componentele unui document HTML, con igurate prin intermediul etichetelor HTML. Caseta $cadrul elementului& dispune de numeroase proprietati, intre care se numara! marginile, chenarul, completarea $umplerea, cunoscuta ca 'padding'&, latimea si inaltimea, care pot i modi icate cu a*utorul C##. (lementele HTML au patru laturi $sus, dreapta, *os si stanga& la care se pot aplica proprietatile C## speci ice, restul proprietatilor C## $ ont, text, culoare, undal& se aplica in continutului casetei. Continutul poate include texte, liste, ormulare sau imagini. ! *ati,ea si inalti,ea unui ele,ent Latimea si inaltimea elementelor pot i speci icate cu a*utorul proprietatilor Didt+ si +ei$+t. ,n mod prestabilit acestea sunt determinate automat de catre navigator, iind egale cu necesarul a isarii intregului continut. "entru de inirea latimii si inaltimii se olosesc urmatoarele tipuri de valori!

- o valoare de tip nu,eric, de obicei in pixeli1 - un procent, care stabileste o valoare proportionala in unctie de cea a elementului parinte1 - valoarea auto, care oloseste latimea si inaltimea calculata de navigator, si care reprezinta cantitatea de spatiu maxim pe care o poate ocupa elementul pentru a isarea intregului continut.

#intaxa generala pentru con igurarea latimii si inaltimii este! selector { Didt+:valoare; +ei$+t:valoare } ,ata un exemplu in care elementul cu id='un9id' va avea latimea de ILL pixeli si inaltimea de 7LL pixeli! :un9id 6 width!ILLpx1 height!7LLpx1 8 .! )ar$inile unui ele,ent "roprietatea ,ar$in permite stabilirea distantei dintre un element si alte elemente alaturate, prin speci icarea unei valor pentru marginea din iecare latura $sus, dreapta, *os, stanga&. 0aca speci icati cele K valori in aceeasi de initie, acestea reprezinta marginile elementului in urmatoarea ordine! sus, dreapta, *os, stanga. 0aca speci icati doar o valoare, aceasta va i aplicata tuturor marginilor. ,n cazu in care speci icati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile marginilor opuse. #intaxa generala pentru con igurarea marginilor unui selector este!

selector { ,ar$in:valoare/valori; }

Tipul de valoare olosit poate avea urmatoarele optiuni! - o valoare de tip lun$i,e #nu,erica% D care poate i si negativa1 - o valoare procentuala #procent% D creaza o margine proportionala cu latimea elementului parinte1

- valoarea auto D lasa controlul marginilor la decizia navigatorului.

,ata un exemplu in care etichetele 0,G vor avea distanta pentru marginea de sus 5L pixeli, dreapta 7 pixeli, *os Q pixeli si in stanga 57 pixeli! div 6 margin!5Lpx 7px Qpx 57px1 8 (xista posibilitatea de a stabili valoarea marginii doar pentru o singura latura, ara a tine cont de celelalte margini. "entru aceasta sunt olosite proprietatile ,ar$in&top, ,ar$in&botto,, ,ar$in&le-t si ,ar$in& ri$+t cu aceleasi valori ca si in cazul proprietatii ,ar$in, dupa cum puteti vedea mai *os.

selector { ,ar$in&top:valoare; } selector { ,ar$in&botto,:valoare; } selector { ,ar$in&le-t:valoare; } selector { ,ar$in&ri$+t:valoare; }

7! C+enarul unui ele,ent "roprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele patru laturi ale casetei. -ceasta oloseste I valori distincte, pentru a con igura latimea $grosimea&, stilul si culoarea liniei bordurii. #intaxa generala pentru de inirea chenarului este!

selector { border:val_$rosi,e val_stil val_culoare; }

)nde

- prima valoare $val9grosime& reprezinta grosimea chenarului si poate i una din urmatoarele tipuri!
o

- o valoare de tip lungime $valoarea L determina anularea a isarii chenarului&1 - un cuvant cheie $t+in: ,ediu,: t+ic3& care caracterizeaza o dimensiune relativa.

- a doua valoare $val9stil& reprezinta numele stilului atribuit chenarului $valoarea 'none' anuleaza a isarea chenarului&1 - ultima valoare $val9culoare& reprezinta culoarea, exprimata in cod hexa sau valoare /SH.

,ata un exemplu in care div-urile vor avea o bordura groasa de 5 pixel, solid si culoare albastra! div 6 border!5px solid blue1 8 - "ot i olosite si proprietati separate pentru iecare! 'border-width', 'border-st%le' si 'border-color'1 prezentate in continuare. )n atribut care poate i olosit in con igurarea chenarului este border&Didt+, acesta urnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din *urul unei casete. #intaxa generala este!

selector { border&Didt+:valoare; }

0aca speci icati toate cele patru valori, ele sunt aplicate in ordinea! sus, dreapta, *os, stanga. 0aca speci icati doar o valoare, ea va i aplicata tuturor marginilor. 0aca olositi doua sau trei valori, valorile care lipsesc sunt copiate din valorile marginilor opuse lor in caseta.

-spectul bordurii poate i stabilit prin atributul border&style1 stilul este aplicat celor patru margini si este de init ast el! selector { border&style:valoare; } "entru speci icarea valorii, pot i olosite urmatoarele tipuri!

)ltimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu sunt acceptate de catre navigator, in locul lor se va olosi valoarea cu linie plina. )n alt atribut care poate i utilizat in con igurarea chenarului este border&color, acesta stabileste culoarea pentru toate cele patru laturi ale chenarului si oloseste pentru valoarea ei un singur cuvant cheie exprimat in cod hexa, valoare /SH sau numele culorii. #intaxa generala este! selector { border&color:valoare; } "uteti stabili culoarea iecarei margini si separat, olosind proprietatile! border&top&color, border&ri$+t&color, border&botto,&color si border&le-t&color

+iecare latura a chenarului poate avea valori con igurate in mod separat $prin care se stabilesc stilul si culoarea iecarei borduri din *urul elementului& dupa cum este prezentat mai *os! selector { border&top:$rosi,e stil culoare; } selector { border&botto,:$rosi,e stil culoare; } selector { border&le-t:$rosi,e stil culoare; } selector { border&ri$+t:$rosi,e stil culoare; } 9! @dau$area spatiului in interior: in Gurul ele,entului "roprietatea paddin$ adauga o cantitate de spatiu suplimentar in *urul continutului elementului, in interiorul chenarului, intre bordura si continut. +orma generala pentru utilizarea acestei proprietati este!

selector { paddin$: valoare/valori; }

Galoarea pentru completarea spatiului poate i una din urmatoarele! - o valoare de tip lun$i,e

- o valoare procentuala D creaza umplerea in raport cu latimea elementului parinte.

Cand speci icati toate cele patru valori, ele sunt aplicate in ordinea! sus, dreapta, *os, stanga. 0aca speci icati doar o valoare, aceasta va i aplicata tuturor celor patru directii. 0aca speci icati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile laturilor opuse. ,ata un exemplu in care etichetele 0,G vor avea distanta padding! sus K pixeli, dreapta ? pixeli, *os I pixeli si in stanga ? pixeli! div 6 padding!Kpx ?px Ipx ?px1 8 +iecare latura a chenarului poate avea proprietatea paddin$ con igurata separat!

selector { paddin$&top:valoare; } selector { paddin$&botto,:valoare; } selector { paddin$&le-t:valoare; } selector { padin$&ri$+t:valoare; }

;! 2le,ente -loat C## o era posibilitatea de a 'in asura' anumite elemente in *urul altora. -cest lucru se ace prin intermediul proprietatii -loat, care determina o mutare ortata a elementului in directia data de valoarea mentionata, lasand loc liber in spatiul opus directiei, care va i ocupat de urmatorul element din codul HTML. #intaxa generala pentru utilizarea acestei proprietati este!

selector { -loat:valoare; }

)nde 'vaoare' poate i' le-t, ri$+t si none Galoarea 'none' permite elementului sa ie plasat acolo unde este posibil, iar celelalte valori orteaza plasarea elementului in stanga sau in dreapta ecranului, textul din exteriorul etichetei HTML respective va i plasat in partea opusa, in *urul elementului. ,ata un exemplu in care elementul cu id='un9id' va i ortat sa ie pozitionat in dreapta celorlaltor elemente! :un9id 6 loat!right1 8 <! @nularea plasarii unui ele,ent in spatiul eliberat de "-loat" -semanator cu actiunea etichetei HTML 2br3, care trece pe un nou rand elementele ce o preced, este si proprietatea clear. Cu a*utorul acesteia se poate anula ocuparea unui spatiu care a ost lasat liber de un element care utilizeaza proprietatea ' loat'. #intaxa generala pentru utilizarea proprietati clear!

selector { clear:valoare; }

)nde 'valoare' speci ica latura in *urul careia este interzisa in asurarea textului si poate lua valoarea! le-t, ri$+t sau bot+. #e poate olosi si valoarea 'none', ceea ce are ca e ect anularea altor atribute ale proprietatii clear. 0e exemplu, daca aveti un 0,G pozitionat ortat in dreapta, un paragra ul care urmeaza dupa el va i a isat in stanga 0,G-ului respectiv. "entru a anula acest lucru, ca paragra ul sa ie a isat sub 0,G, se oloseste proprietatea 'clear', precum in exemplul urmator! :un9div 6 loat!right1 8 p 6 clear!both1 8

>! @-isarea si ascunderea ele,entelor "roprietatea display poate stabili daca un element va i de tip blocR, incluzand linii noi deasupra si dedesubtul sau, daca este inclus in linie, daca este tratat sub orma de lista sau daca elementul este a isat sau nu. #intaxa generala pentru aceasta proprietate este!

selector { display:valoare; }

)nde 'valoare' poate i una din urmatoarele optiuni! list&ite, D plaseaza in prima linie a textului un indicator pentru articole de tip lista, dar si un salt deasupra si dedesubtul articolului1 bloc3 D de ineste eticheta ca iind de tip bloc si plaseaza un salt la linie noua deasupra si dedesubtul ei1

inline D de ineste eticheta ca o eticheta in linie si elimina caracterele de salt la linie noua1 none D determina ascunderea elementului si nea isarea lui de catre navigator1 codul acestuia este incarcat insa continutul sau nu e a isat in pagina.

,ata un exemplu in care elementele 2li3 sunt asezate in linie, iar un element cu id='un9id' va i ascuns in pagina! li 6 displa%!inline1 8 :un9id 6 displa%!none1 8 "roprietatea display nu trebuie con undata cu visibility. #pre deosebire de visibility care nu a iseaza elementul dar lasa liber spatiu pentru element, sintaxa display: none elimina complet elementul din pagina. Controale de po8itionare "ozitionarea elementelor olosind C## este mai precisa decat prin intermediul obiectelor gra ice HTML sau a tabelelor, a isarea acandu-se mult mai rapid. "rin intermediul C## este permisa pozitionarea exacta sau relativa a elementelor intr-o ereastra sau in raport cu alte elemente. +ereastra navigatorului este supra ata in care sunt a isate toate elementele. (a poate i redimensionata sau pozitionata pe ecran, sau poate i divizata in alte erestre prin intermediul cadrelor. Toatele elementele amplasate in ereastra sunt pozitionate relativ la coltul din stanga-sus. ! Stabilirea ,odului de po8itionare "rin utilizarea proprietatii position se poate speci ica pozitia elementului in pagina web. )n element poate avea una din urmatoarele valori de pozitionare! static, relative, absolut si -ixed. Tipul de pozitie indica navigatorului cum sa trateze amplasarea unui element intr-o ereastra. a% /o8itionarea statica Galoarea initiala, prestabilita, a pozitionarii elementelor in ereastra este 'static'. Cand nu este speci icata o pozitionare 'relativa', 'absoluta' sau ' ixa'1 elementele sunt dispuse unul dupa altul in interiorul documentului. #intaxa pentru speci icarea pozitionarii static este!

selector { position:static }

- )n element static nu poate i repozitionat in mod explicit. b% /o8itionarea relativa )n element cu pozitionare 'relativa' este amplasat la locul sau in cadrul erestrei sau a elementului parinte, in sensul ca el apare dupa toate elementele dinaintea sa, respectiv inaintea tuturor elementelor amplasate dupa el. #intaxa pentru speci icarea pozitionarii relative este! selector { position:relative } - (lementele pozitionate relativ pot i mutate din locatia lor olosind proprietatile 'top' si 'le t' sau 'bottom' si 'right'. c% /o8itionarea absoluta "ozitionarea absoluta are ca e ect crearea unui element nea ectat de restul documentului, plasarea lui in ereastra iind acuta intr-o locatie precisa, de inita prin intermediul coordonatelor x si y, indi erent de pozitiile altor elemente. #intaxa pentru speci icarea pozitionarii absolute este! selector { position:absolute } - Originea $punctul de coordonate L,L& este coltul din stanga-sus al erestrei sau al obiectului in care este inclus elementul pozitionat absolut. d% /o8itionarea -ixa "ozitionarea ixa a unui element este aproximativ la el cu cea absoluta, cu di erenta ca la derularea paginii elementul ixat ramane pe pozitia lui initiala, ara a se derula. #intaxa pentru speci icarea pozitionarii -ixed este! selector { position:-ixed } .! /o8itionarea in raport cu latura de sus: respectiv stan$a 0upa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si laturile de sus si din stanga ale elementului sau parinte, olosind proprietatile top si le-t +orma generala este!

selector { top:valoare; le-t:valoare; }

- )nde 'valoare' poate i! - o valoare de tip numeric, care de ineste distanta dintre laturile erestrei sau a elementului parinte si laturile elementului1 - o valoare procentuala, care semni ica deplasarea ata de laturile erestrei sau a elementului parinte1

- valoarea auto, care permite navigatorului sa calculeze el insusi valoarea.

"ot i utilizate proprietatile top si le-t sau botto, si ri$+t, de asemenea pot lua si valori negative. ,n cazul in care este vorba despre elemente imbricate, acestea vor i deplasate solidar cu elementul parinte daca acesta are position:relative. ,ata un exemplu in care o eticheta 2h53 este pozitionata la o distanta de 5L pixeli ata de marginile sus si stanga ale unui 0,G in interiu caruia se a la!

2st%le t%pe='text4css'3 div 6 position!relative1 8 h5 6 top!5Lpx1 le t!5Lpx1 8 24st%le3 2div3 2h53Text...24h53 24div3 7! /o8itionarea in raport cu latura de Gos: respectiv dreapta ,n unele cazuri este necesara pozitionarea in raport cu laturile de *os, respectiv dreapta. ,n acest caz originea va i coltul din dreapta-*os al erestrei sau al elementului parinte. 0e inirea marginilor ata de latura de *os, respectiv din dreapta se ace cu a*utorul proprietatilor botto, si ri$+t1 ele pot lua aceleasi valori ca si 'le t' si 'top', de asemenea pot i combinate cu acestea. +orma generala este!

selector { botto,:valoare; ri$+t:valoare; }

,n cazul in care pentru acelasi element sunt stabilite atat marginile 'top 4 le t' cat si 'bottom 4 right', rezultatul a isat depinde de navigator, dar in mod prestabilit se olosesc pozitiile top si le-t. 9! /o8itionarea in spatiul 75 (lementele pot primi o a treia dimensiune, si anume asezarea lor in stiva, unele in raport cu altele. -mplasarea se ace in mod automat, incepand cu valoarea L si continuand prin incrementare cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte. "entru pozitionarea elementelor in stiva unele peste altele se oloseste proprietatea 8&index. Galoarea acestei proprietati iind relatia tridimensionala a elementului in raport cu alte elemente din ereastra. #intaxa generala pentru proprietatea 8&index este!

selector { 8&index:valoare; }

)nde 'valoare' este un numar intreg, pozitiv, L sau negativ. ,n cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare apare deasupra elementului cu numar mai mic. )tilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui sau cu atatea niveluri cu cate indica indexul 8. ;! Includerea unui ele,ent absolut intr&un ele,ent relativ )n element poate i pozitionat exact in cadrul unei erestre, sau el poate i inclus intr-un element cu pozitionare relativa. ,n cazul includerii unui element pozitionat absolut intr-un element pozitionat relativ, elementul absolut este pozitionat olosind ca origine coltul din stanga-sus al elementului relativ. ,ata un exemplu de cod HTML in care o eticheta 2div3 $cu class='absolut'& este inclusa $imbricata& in alta eticheta 2div3 $cu class='relativ'&! 2div class=;relativ;3 ... 2div class=;absolut;3 ... 24div3 ... 24div3

"entru a ace o pozitionare absoluta a elementului inclus $care are class='absolut'& in elementul parinte $care are class='relativ'&, caruia ii de inim o pozitionare relativa1 scriem in oaia de stil urmatorul cod! .relativ 6position!relative1 top!ILpx1 le t!7Lpx1 8 .absolut 6position!absolute1 top!57px1 le t!Lpx1 8 <! Includerea unui ele,ent relativ intr&un ele,ent absolut Cand un element pozitionat absolut este inclus intr-un element pozitionat relativ, primul oloseste ca origine coltul din stanga-sus al parintelui. ,n cazul in care un element pozitionat relativ este plasat in interiorul unui element pozitionat absolut, acesta se va deplasa o data cu elementul absolut. ,ata un exemplu de cod HTML in care o eticheta 2div3 $cu class='relativ'& este inclusa $imbricata& in alta eticheta 2div3 $cu class='absolut'&! 2div class=;absolut;3 ... 2div class=;relativ;3 ... 24div3 ... 24div3 "entru a ace o pozitionare relativa a elementului inclus $care are class='relativ'& in elementul parinte $care are class='absolut'&, caruia ii de inim o pozitionare absoluta1 adaugam in oaia de stil urmatorul cod! .absolut 6position!absolute1 top!?Lpx1 le t!?7px1 8 .relativ 6position!relative1 top!5Lpx1 le t!7px1 8 Con-i$urari pentru vi8ibilitate si ,ouse C## o era posibilitatea de a a isa sau ascunde unele elemente sau parti ale unor elemente. ! Stabilirea vi8ibilitatii unui ele,ent "roprietatea visibility poate controla aptul ca un element sa ie vizibil sau nu. Chiar daca elementul este invizibil, el va ocupa un spatiu liber in pagina, acolo unde ar i trebuit sa ie a isat. #intaxa pentru olosirea acestei proprietati este urmatoarea!

selector { visibility:valoare }

)nde 'valoare' poate i! +idden D ascunde elementul de la a isarea pe ecran1 visible D a iseaza elementul1

in+erit D vizibilitatea elementului este mostenita de la elementul parinte.

,ata un exemplu in urma caruia textul din interiorul etichetei 2h53 va i invizibil! h5 6 visibilit%!hidden1 8

"entru a ascunde complet a isarea unui element in pagina, se poate utiliza ormula display:none;

.! Stabilirea supra-etei vi8ibile a unui ele,ent 0e inirea supra etei vizibile a unui element stabileste portiunea din elementul respectiv care este vizibila in ereastra navigatorului. /estul continutului acelui element nu dispare, ci este invizibil pentru vizitator. "entru a de ini orma regiunii vizibile se oloseste proprietatea clip cu valoarea rect $de inita prin patru valori separate prin spatii si incadrate de paranteze rotunde& +orma generala este!

selector {clip:rect#val val. val7 val9%; }

- Galorile construesc un patrulater, de inesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, *os si stanga ale regiunii vizibile. ,ata un exemplu de cod C## in care supra ata vizibila a unui element cu id='viz' va i cea incadrata de valorile atributului rect! :viz 6 clip! rect$?7 ILL 5?7 5LL&1 8 0aca se oloseste valoarea 'auto', navigatorul calculeaza dimensiunea regiunii vizibile la 5LLN. /egiunile de vizibilitate pot avea doar orma dreptunghiulara. 7! 5e-inirea po8itiei depasirii )neori elementele nu sunt in totalitate continute in casetele lor, caseta ne iind su icient de mare, ast el ca o parte a continutului nu este a isata sau depaseste marginea stabilita. "roprietatea over-loD permite tratarea continutului in exces, controland ast el modul de a isare sau nu al acesuia. +orma generala a proprietatii over-loD este!

selector { over-loD:valoare; }

- )nde 'valoare' stabileste unde va i plasata depasirea, olosind una din valorile! visible D extinde caseta elementului ast el incat sa incapa tot continutul sau, ignorand delimitarea supra etei vizibile. (ste optiunea prestabilita. +idden D ascunde continutul care nu incape in caseta elementului, si impiedica aparitia barei de derulare.

scroll D adauga intotdeauna bare de derulare elementului, pentru ca sa se poata accesa tot continutul elementului. auto D barele de derulare apar doar atunci cand este necesar.

,ata un exemplu in care toate elementele cu class='extradim' vor avea bare de scroll! .extradim 6 over low!scroll1 8 "entru de inirea proprietatii 'over low' doar pentru una din directii! orizontala sau verticala1 adica bara de derulare sa ie disponibila sau nu doar pentru una din aceste directii, se poate olosi o alta varianta a acestei proprietati, si anume!

over-loD&x:valoare - pentru orizontala over-loD&y:valoare - pentru verticala

- )nde 'valoare' poate i una din valorile prezentate mai sus.

9! @spectul indicatorului de ,ouse ,n mod normal, aspectul indicatorului de mouse este determinat de browser. .avigatorul modi ica indicatorul de mouse in unctie de continutul deasupra caruia se a la acesta. )neori este dorita anularea sau completarea pre erintelor navigatorului si con igurarea unor aspecte personalizate. "roprietatea cursor a*uta la stabilirea aspectului unui indicator de mouse. #intaxa este urmatoarea!

selector { cursor:valoare; }

Inde "valoare" poate avea ur,atoarele nu,e pentru indicatoarele de ,ouse:

& 5aca se -oloseste valorea "auto": navi$atorul decide asupra tipului de indicator -olosit! /seudo&clase /seudo&clasele permit adaugarea de stiluri C## doar la anumite elemente ale aceluiasi selector, id sau clasa. 0e exemplu, cand de initi un stil pentru un anumit tag HTML sau pentru o clasa, continutul din toate aceleasi tag-uri sau aceeasi clasa vor avea acel stil, iar daca doriti sa de initi un stil di erit pentru primul $sau ultimul& din acele tag-uri ori pentru primul continut de init de aceeasi clasa, puteti realiza asta olosind pseudo-clasele. 0e asemenea, acestea pot modi ica stilul gra ic al elementelor cand mouse-ul actioneaza asupra lor. Pentru a functiona in Internet xplorer !" este necesar declararea #$D%C&'P >, care se adauga la inceputul documentului HTML. #intaxa pentru utilizarea pseudo-clasei este urmatoarea! ele,ent:pseudo&clasa { proprietate:valoare; } - unde 'element' este un selector, id sau clasa, iar 'pseudo-clasa' este una din expresiile urmatoare!

active - -dauga un stil unui element cand acesta este activat $actionat prin clic( pe el& -irst&c+ild - -dauga un stil unui element care este primul din acel tip de elemente -ocus - +olosit pentru input-urile de ormulare, le adauga un stil cand acestea sunt active $dupa clic( si cursorul de text in ele& +over - -dauga un stil unui element cand mouse-ul se a la deasupra lui lan$#cuvant% - -dauga un stil unui element care are atributul lan)*+cuvant+ $nu e suportat de #a ari si ,( mai mic de Q&

last&c+ild - -dauga un stil unui element care este ultimul din acel tip de elemente lin3 - -dauga un stil unui linR nevizitat visited - -dauga un stil unui linR vizitat

Ca sa intelegeti mai bine cum unctioneaza si ce ac pseudo-clasele, studiati exemplele care sunt prezentate in continuare. ! /seudo&clase cu selector #electoarele ac re erire la tag-urile HTML pe care le denumesc $de ex.! p pentru 2p3, li pentru 2li3, div pentru 2div3, etc.&. ,n exemplul urmator este olosit ' irst-child' pentru paragra ! 2J0OCTB"( html ")HL,C '-44@IC440T0 <HTML 5.L Transitional44(.' 'http!44www.wI.org4T/4xhtml540T04xhtml5-transitional.dtd'3 2html3 2head3 2title3"seudo-clase - (x. 524title3 2st%le t%pe='text4css'3 p! irst-child 6 color!blue1 8 24st%le3 24head3 2bod%3 2p3)n text din primul paragra 24p3 2p3Continut din al doilea paragra 24p3 2p3Textul din al treilea paragra 24p3 24bod%3 24html3 - /ezultatul va i urmatorul, primul paragra va avea textul albastru. )n text din primul paragra Continut din al doilea paragra Textul din al treilea paragra

,ata si un exemplu cu 'hover' pentru 2li3 2J0OCTB"( html ")HL,C '-44@IC440T0 <HTML 5.L Transitional44(.' 'http!44www.wI.org4T/4xhtml540T04xhtml5-transitional.dtd'3 2html3 2head3 2title3"seudo-clase - (x. ?24title3 2st%le t%pe='text4css'3 li!hover 6 bacRground-color!:QQ eQQ1

8 24st%le3 24head3 2bod%3 2ul3 2li3Text list 5 ...24li3 2li3Text list ? ...24li3 2li3Text list I ...24li3 24ul3 24bod%3 24html3 - Cand pozitionati mouse-ul deasupra iecarui L,, acesta va avea bacRground verde, testati mai *os

Text list 5 ... Text list ? ... Text list I ...

.! /seudo&clase si clase Trebuie stiut ca pseudo-clasele nu sunt acelasi lucru ca si clasele, acestea iind cele care ac re erire la valoarea atributului 'class' si in C## se adauga dupa un caracter punct $!&. ,ata un exemplu in care sunt olosite pseudo-clasele 'lang$cuvant&' $pt, I incepand cu versiunea -& sl 'lastchild' la o clasa '.testT 2J0OCTB"( html ")HL,C '-44@IC440T0 <HTML 5.L Transitional44(.' 'http!44www.wI.org4T/4xhtml540T04xhtml5-transitional.dtd'3 2html3 2head3 2title3"seudo-clase - (x. I24title3 2st%le t%pe='text4css'3 .test!last-child 6 bacRground-color!:QQ eQQ1 8 .test!lang$da& 6 color!blue1 8 24st%le3 24head3 2bod%3 2ul3 2li class='test'3Text in list cu class 5 ...24li3 2li class='test' lang='da'3Text in list cu class ? ...24li3 2li class='test'3Text in list cu class I ...24li3 24ul3 24bod%3 24html3

- Observati ca stilul de init pentru '.test!last-child' va i aplicat doar ultimului element care are clasa 'test', iar 'lang$da&' se aplica numai elementului care pe langa class*+test+ are si lan)*+da+. - /ezultatul este acesta!

Text in list cu class 5 ... Text in list cu class ? ... Text in list cu class I ...

,ata un alt exemplu in care sunt combinate o clasa $test&, un selector $tag 2i3& si ' irst-child'! 2J0OCTB"( html ")HL,C '-44@IC440T0 <HTML 5.L Transitional44(.' 'http!44www.wI.org4T/4xhtml540T04xhtml5-transitional.dtd'3 2html3 2head3 2title3"seudo-clase - (x. K24title3 2st%le t%pe='text4css'3 .test i! irst-child 6 ont-weight!bold 8 24st%le3 24head3 2bod%3 2p class='test'32i3"aragra 24i3 cu mai multe tag-uri ,! 2i3text oblic24i3, alt test 2i3oblic24i324p3 2p class='test'3-lt paragra ! 2i3sir inclinat si bold24i3, alt sir 2i3italic24i324p3 24bod%3 24html3 - #tilul C## va i aplicat primelor tag-uri 2i3 din iecare clasa '.test', dupa cu puteti vedea mai *os Paragraf cu mai multe tag-uri ,! text oblic, alt test oblic -lt paragra ! sir inclinat si bold, alt sir italic - 0aca doriti ca stilul sa ie aplicat tuturor etichetelor 2i3 din prima clasa, scrieti! !clasa:-irst&c+ild i - 0aca vreti sa ie aplicat numai primului 2i3 din prima clasa, scrieti! !clasa:-irst&c+ild i:-irst&c+ild 7! /seudo&clase cu id&uri si ele,ente de -or,ular ,n C##, id-urile ac re erire la valoarea atributului ,0 si se scriu dupa caracterul 6. ,ata un exemplu in care este olosita pseudo-clasa 'hover' impreuna cu un ,0, iar ' ocus' impreuna cu o clasa $focus nu functionea.a pe versiuni de I mai mici de -& 2J0OCTB"( html ")HL,C '-44@IC440T0 <HTML 5.L Transitional44(.' 'http!44www.wI.org4T/4xhtml540T04xhtml5-transitional.dtd'3 2html3 2head3 2title3"seudo-clase - (x. 724title3 2st%le t%pe='text4css'3 :unid!hover 6 bacRground-color!:dada e1

8 .test! ocus 6 bacRground-color!:eded e1 8 24st%le3 24head3 2bod%3 2 orm action='' method='post'3 2input t%pe='text' class='test' 432br 43 2textarea cols='?L' rows='7' class='test'324textarea32br 43 2input t%pe='button' value='Huton' id='unid' 43 24 orm3 24bod%3 24html3 - #tilul C## de init in acest exemplu ace ca atunci cand mouse-ul se a la deasupra butonului $care are id='unid'& acesta sa isi schimbe culoarea de undal, iar cand se da clicR pe zonele de text din ormular $care au class='test'&, la el se modi ica culoarea bacRground. - /ezultatul este urmatorul ormular.

/seudo&ele,ente /seudo&ele,entele permit adaugarea de stiluri C## anumitor parti din continutul unui element HTML. 0e exemplu, cand de initi un stil pentru un anumit tag HTML $sau pentru o clasa&, tot continutul incadrat de acel tag va avea acelasi stil, iar daca vreti sa adaugati un stil C## di erit primei litere sau primlui rand dintrun paragra , se olosesc pseudo-elemente. #intaxa pentru utilizarea pseudo-elementelor este urmatoarea! obiect_css:pseudo&ele,ent { proprietate:valoare; } - unde 'obiect9css' este un selector, id sau clasa, iar 'pseudo-element' este una din expresiile urmatoare!

a-ter - -dauga continut dupa un element HTML $nu e suportat de versiuni I mai mici de -& be-ore - -dauga continut inaintea unui element HTML $nu e suportat de versiuni I mai mici de -& -irst&letter - -dauga un stil css primului caracter dintr-un text -irst&line - -dauga un stil primei linii dintr-un text

Ca sa intelegeti mai bine cum unctioneaza si ce ac pseudo-elementele, iata cateva exemple cu iecare in parte.

! a-ter "entru a adauga un anumit continut $text, imagine, sunet .wav& prin C##, se oloseste proprietatea content si valoarea ce reprezinta continutul respectiv! text se adauga intre ghilimele, iar imagine sau sunet .wav se adauga olosind ca valoare url#adresa_-isier% ,n urmatorul exemplu va i adaugat un continut text dupa iecare element 2hK3. 2J0OCTB"( html ")HL,C '-44@IC440T0 <HTML 5.L Transitional44(.' 'http!44www.wI.org4T/4xhtml540T04xhtml5-transitional.dtd'3 2html3 2head3 2title3"seudo-elemente - (x. 524title3 2st%le t%pe='text4css'3 hK!a ter 6 content!'Mar"lo'1 color!blue1 8 24st%le3 24head3 2bod%3 2hK3Continutul din primul tag HK ... 24hK3 2hK3)n alt text din alt element HK24hK3 24bod%3 24html3 - /ezultatul va i cel de *os. - Observati cum este adaugat cuvantul 'Mar"lo', imediat dupa ultimul caracter al iecarui element 2hK3, ca si cum ar ace parte din textul initial, dar putand avea stil propriu. Continutul din primul tag H4 ... MarPlo Un alt text din alt element H4MarPlo - ,n loc de selector puteti olosi si ,0 sau clasa. .! be-ore Ke-ore este similar cu 'a ter', continutul se adauga la el, dar la inceputul elementului. "entru o mai mare di ersitate, puteti combina pseudo-clasele cu pseudo-elemente olosind sintaxa! obiect_css:pseudo&clasa:pseudo&ele,ent { proprietate:valoare; } - Pseudo-clasele sunt explicate in lectia anterioara, Ca sa vedeti e ectul, iata un exemplu aplicat cu 'be ore' acelorasi tag-uri HK din exemplul precedent. 2J0OCTB"( html ")HL,C '-44@IC440T0 <HTML 5.L Transitional44(.' 'http!44www.wI.org4T/4xhtml540T04xhtml5-transitional.dtd'3 2html3 2head3 2title3"seudo-elemente - (x. ?24title3 2st%le t%pe='text4css'3 hK! irst-child!be ore 6 content!'Mar"lo- '1

color!blue1 8 24st%le3 24head3 2bod%3 2hK3Continutul din primul tag HK ... 24hK3 2hK3)n alt text din alt element HK24hK3 24bod%3 24html3 - 0e data aceasta continutul 'Mar"lo- ' este adaugat imediat in ata si doar primului element 2hK3 $preci.at prin /first-c0ild/&, dupa cum puteti vedea mai *os! MarPlo- Continutul din primul tag H4 ... Un alt text din alt element H4 - 0aca vreti sa adaugati in loc de continut text o imagine, de exemplu .gi , scrieti codul C## ast el! +9:-irst&c+ild:be-ore { content:url#i,a$ine!$i-%; } 7! -irst&letter 1irst&letter aplica un stil C## doar primului caracter dintr-un text. ,n urmatorul exemplu este aplicat un stil C## primului caracter din continutul iecarui element de init printro clasa 'test'. 2J0OCTB"( html ")HL,C '-44@IC440T0 <HTML 5.L Transitional44(.' 'http!44www.wI.org4T/4xhtml540T04xhtml5-transitional.dtd'3 2html3 2head3 2title3"seudo-elemente - (x. I24title3 2st%le t%pe='text4css'3 .test! irst-letter 6 ont-size!?7px1 color!red1 8 24st%le3 24head3 2bod%3 2p class='test'3Textul din paragra ...24p3 2div class='test'3-lt continut int-un tag 0,G, dar cu aceeasi clasa.24div3 24bod%3 24html3 - 0upa cum puteti vedea in rezultatul de mai *os, prima litera din continutul iecarui tag ce are class='test' este de culoare rosie si marime ?7px. Textul din paragra ... -lt continut int-un tag 0,G, dar cu aceeasi clasa.

9! -irst&line 1irst&line aplica un stil C## doar primei linii din continutul elementului HTML. #tudiati exemplul urmator! 2J0OCTB"( html ")HL,C '-44@IC440T0 <HTML 5.L Transitional44(.' 'http!44www.wI.org4T/4xhtml540T04xhtml5-transitional.dtd'3 2html3 2head3 2title3"seudo-elemente - (x. K24title3 2st%le t%pe='text4css'3 .test! irst-line 6 ont-weight!bold1 color!blue1 8 24st%le3 24head3 2bod%3 2p class='test'3"aragra cu mai multe linii2br 43 - doua linie ...2br 43 -lta linie din acelasi paragra .24p3 2div class='test'3Continut pe doua linii intr-un tag 0,G2br 43 - doua linie din 0,G.24div3 24bod%3 24html3 - /ezultatul este urmatorul, com orm codului C##, prima linie din iecare element cu class='test' are textul albastru si ingrosat. /ara$ra- cu ,ai ,ulte linii - doua linie ... -lta linie din acelasi paragra . Continut pe doua linii intr&un ta$ 5I0 - doua linie din 0,G.