Notiuni de baza

-----------------------CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.). Beneficiile sintaxei CSS sunt formatarea este introdusa intr!un singur loc pentru tot documentul editarea rapida a etichetelor datorita introducerii intr!un singur loc a etichetelor se obtine o micsorare a codului paginii, implicit incarcarea mai rapida a acesteia Sintaxa CSS este structurata pe trei ni"ele ni"elul # fiind proprietatile etichetelor din documentul $%&', tip inline ni"elul ( este informatia introdusa in blocul $)*+, tip embedded ni"elul , este repre-entat de comen-ile aflate in pagini separate, tip externe Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de ni"elul # iar cea mai mica importanta o are cea de ni"elul ,. .olosirea unui fisier extern sau ni"el , care sa contina comen-i CSS este foarte practic deoarece poate fi utili-at in mai multe situatii (mai multe fisiere $%&' pot folosi acelasi fisier extern CSS) eliminand timpul necesar introducerii codului corespun-ator in fiecare pagina si totodata editarea lor intr!un singur loc pentru mai multe fisiere. )xtensia acestor fisiere este .css. 'egatura paginilor $%&' cu fisierele extene CSS se face prin introducerea urmatoarei linii /link rel01stylesheet1 type01text2css1 href01fisier3css.css14 *tributele indica urmatoarele rel ! fisierul este tip styleshhet type ! tip text ce contine comen-i CSS href ! fisierul sau adresa fisierului CSS. Comen-ile de ni"el ( sau embedded sunt cele ga-duite oriunde intre perechea de etichete /head4 si /2head4 conform sintaxei /style type01text2css14 /5!! ... comen-i CSS ... !!4 /2style4 6nde style !specifica unde incepe si unde se termina blocul CSS iar type este folosit pentru a ascunde de browserele "echi, care nu cunosc sintaxa CSS, continutul blocului style. Comen-ile CSS de ni"el # sau inline sunt cele mai folosite, ele suprascriind orice alte comen-i CSS. Sunt amplasate in interiorul etichetelor $%&' aflate in -ona B7+8 si au sintaxa /eticheta style01codul CSS dorit14 ...textul sau obiectul asupra caruia este aplicat codul CSS... /2eticheta4 )ste permisa folosirea comentariilor in CSS ca si in $%&'

29 *cesta este un comentariu in CSS 92

Elementele id si class
id si class sunt comen-i care dau unei formatari CSS un nume. Se folosesc atunci cand dorim sa aplicam un style de formatare unei anume -one. :entru compatibilitate cu "ersiunile anterioare de browsere numele asociate -onelor nu "or contine caracterul 3. )lementul id se aplica unui style de format o singura data sau la o singura eticheta $%&', plasandu!se un nume acelui style. *cest element necesita existenta come-ilor CSS in -ona $)*+ sau intr!un fisier extern. )xemplu folosirea elementului id

/html4 /head4 /title4)xemplu (3#/2title4 /style type01text2css14 /5!! ;albastru<color ;====..>?!!4 /2style4 /2head4 /body4 /p id01albastru14%ext albastru introdus prin id 1albastru1/2p4 %ext negru /2body4 /2html4 )lementul class se similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru -one mai mari. Ca si la id necesita existenta come-ilor CSS in -ona $)*+ sau intr!un fisier extern. )xemplu folosirea elementului class

/html4 /head4 /title4)xemplu (3(/2title4 /style type01text2css14 /5!! .rosu<color ;..====>?!!4 /2style4 /2head4 /body4 /p class01rosu14:rimul text rosu introdus prin class 1rosu1/2p4 %ext negru /p class01rosu14*l doilea text rosu introdus prin class 1rosu1/2p4 /2body4 /2html4

Stiluri pentru fonturi

*ceste elemente specifica argumentul fontului care se asocia-a unui element $%&' fiind incluse ori in -ona $)*+ ori in interiorul etichetei dorite. @n ca-ul de fata se remarca asemanarea cu eticheta font din $%&' care accepta argumentele type, style, si-e si weight. ,.# font!family font!family este de fapt o lista de fonturi din care browserul "a folosi in ordinea in care le recunoaste (primul folosit "a fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si tot asa mai departe). )ste recomandat ca ultima po-itie din lista sa fie un font generic (de exemplu serif, sans!serif sau monospace). @n situatia in care numele fontului este format din doua cu"inte se incadrea-a intre ghilimele duble pentru ca browserul sa le interprete-e impreuna. CSS2exemplu,3#.html14)xemplu CSS introdus in $)*+ aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu!l pe al treilea /html4 /head4 /title4)xemplu ,3#/2title4 /style type01text2css14 /5!! p<font!family font#,font(,arial>?!!4 /2style4 /2head4 /body4 /p4%ext scris cu cu fontul *rial/2p4 %ext negru /p4%ext scris cu cu fontul *rial/2p4 /2body4 /2html4 )xemplu acelasi exemplu dar CSS introdus in eticheta p din $%&' /html4 /head4 /title4)xemplu ,3(/2title4 /2head4 /body4 /p style01font!family font#,font(,arial>14%ext scris cu cu fontul *rial/2p4 %ext negru /p style01font!family font#,font(,arial>14%ext scris cu cu fontul *rial/2p4 /2body4 /2html4 ,.( font!si-e )ste parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau procente. *re o functionare asemanatoare cu eticheta /font4. )xemplu pixeli CSS introdus in $)*+ aplicat etichetei p, dimensiunea exprimata in

/html4 /head4 /title4)xemplu ,3,/2title4 /style type01text2css14 /5!! p<font!si-e (=px>?!!4 /2style4 /2head4 /body4 /p4%ext scris cu font de (=px/2p4 %ext negru /2body4 /2html4 :entru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt. +imensiunea exprimata prin keywords foloseste cu"inte in loc de cifre. Sapte cu"inte inlocuiesc dimensiunile de la # la A de la "eche eticheta .7B% .*C) din $%&'.

CSS keyword numar .7B% si-e xx!small # x!small ( small , medium C large D x!large E xx!large A :entru "erificare se poate folosi exemplul anterior in care se inlocuieste (=px cu unul din cu"intele de mai sus. :rocentele sunt o alta "aloare pe care o poate lua font!si-e. *ceasta modalitate poate fi "i-uali-ata diferit de browsere diferite. Ca "erificare folositi acelasi exemplu schimband (=px cu (==F. ,., font!style font!style este folosit pentru a adauga caracteristica italica fontului. :oate lua "alorile normal si italic. /style type01text2css14 /5!! p<font!style italic>?!!4 /2style4 ,.C font!weight font!weight este paramerul care stabileste grosimea caracterului putand lua "alorile numerice de la #== la G== sau B7'+, B7'+)H, '@I$%)H. /style type01text2css14 /5!! p<font!weight A==>?!!4 /2style4 ,.C Compunerea stilurilor Stilurile pre-entate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite de caracterul > (punct si "irgula).

)xemplu

folosirea unui stil compus aplicat etichetei p

/html4 /head4 /title4)xemplu ,3C/2title4 /style type01text2css14 /5!! p< font!family arial> font!si-e (=px> font!style italic> font!weight J==>? !!4 /2style4 /2head4 /body4 /p4%ext scris cu *rial, (=px, italic, J==/2p4 %ext negru /2body4 /2html4

Stiluri pentru text

C.# *liniere text!align po-itionea-a pe ori-ontala obiecte (de exemplu text sau imagini) si admite "alorile left, right si center ca si eticheta align din $%&'. @n continuare este pre-entat ca exemplu codul folosit in $)*+, aplicat etichetei p /style type01text2CSS14 /5!! p<text!align center>? !!4 /2style4 )xemplu prin intermediul lui di" aplicam stilul pecentru imaginii si textului /html4 /head4 /title4)xemplu C3#/2title4 /style type01text2css14 /5!! p<text!align center>? !!4 /2style4 /2head4 /body4 /di" class01pecentru14/img src01po-a.jpg14/2di"4 %ext neformatat /di" class01pecentru14%ext formatat/2di"4 /2body4 /2html4 "ertical!align este folosit pentru alinierea pe "erticala a obiectelor dintr! un tabel si poate lua "alorile top, middle si bottom.

@n exemplul de mai jos este creat clasa sus care "a putea fi aplicat elementelor /td4 ale tabelului /style type01text2css14 /5!! .sus<"ertical!align top>? !!4 /2style4 float este folosit pentru alinierea textului cu imaginile si poate a"ea "alorile left si right. @n functie de "aloarea aleasa imaginea "a fi aliniata in partea opusa a paginii. )xemplu cream clasa auto si o aplicam inaginii

/html4 /head4 /title4)xemplu C3(/2title4 /style type01text2css14 /5!! .auto<float left>? !!4 /2style4 /2head4 /body4 /img src01po-a.jpg1 class01auto14 %extul se alinia-a la dreapta, iar po-a la stanga datorita clasei 1auto1. /2body4 /2html4 C.( %abulare text!indent este folosit pentru alinierea textului in interior a"and "alori exprimate in inci (in), centimetri (cm) sau pixeli (px). @n exemplul de mai jos text!indent este aplicat etichetei p deplasand textul cu #= pixeli in interior /style type01text2css14 /5!! p<text!indent #=px>? !!4 /2style4 C., +ecorare text!decoration adauga sublinierea sau taierea blocului text asociat si poate a"ea "alorile underline, line!through sau none. )xemplu stilul asociat etichetei p este pre-entat in $)*+

/html4 /head4 /title4)xemplu C3,/2title4 /style type01text2css14 /5!! p<text!decoration underline>? !!4 /2style4

/2head4 /body4 %ext normal /p4%ext subliniat/2p4 /2body4 /2html4 C.C Culoare color defineste culoarea textului dintr!o -ona sau intraga pagina. )xemplu stilul asociat etichetei p este pre-entat in $)*+

/html4 /head4 /title4)xemplu C3C/2title4 /style type01text2css14 /5!! p<color ;====..>? !!4 /2style4 /2head4 /body4 %ext normal /p4%ext albastru/2p4 /2body4 /2html4 C.D Stiluri pentru legaturi @n $%&' culoarea legaturilor poate fi stabilita prin atributele '@BK, *'@BK si L'@BK declarate in interiorul etichetei B7+8. *celasi lucru si chiar mai mult poate fi reali-at folosind sintaxa CSS. )xemplu /html4 /head4 /title4)xemplu C3D/2title4 /style type01text2css14 /5!! a<font!family arial> font!si-e (=px>? a link <color ;====..>? a "isited <color ;==..==>? a acti"e <color ;..====>? a ho"er <color ;======>? !!4 /2style4 /2head4 /body4 %ext normal /a href01exempluC3C.html14link/2a4 catre exemplul C3C /2body4 /2html4 a defineste stilul general pentru legatura a link defineste stilul legaturii ne"i-itate a "isited defineste stilul legaturii "i-itate a acti"e defineste stilul legaturii acti"e (nu prea se foloseste) a ho"er defineste stilul cand mouse!ul este deasupra legaturii

Stiluri pentru background

Background culoare sau imagine poate fi definita pentru intreaga pagina, o celula a tabelului sau pentru text. D.# Culoare de fond background!color defineste culoarea de fond si poate fi asociat oricarei etichete $%&'. CSS2exempluD3#.html14)xemplu pentru eticheta p definim un stil pentru intreg B7+8 si un altul

/html4 /head4 /title4)xemplu D3#/2title4 /style type01text2css14 /5!! body <background!color ;....==>? p <background!color ;..====>? !!4 /2style4 /2head4 /body4 %ext normal /p4%ext cu background rosu/2p4 /2body4 /2html4 D.( @magine de fond @maginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului. background!image asocia-a o imagine ca fundal unui obiect. )xemplu definim un stil pentru eticheta p

/html4 /head4 /title4)xemplu D3(/2title4 /style type01text2css14 /5!! p <background!image url(po-a.jpg)>? !!4 /2style4 /2head4 /body4 %ext normal /p4%ext cu imagine de fond/2p4 /2body4 /2html4 D., Hepetare .unctie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond se repeta pe ori-ontala si "erticala.

Hepetarea poate fi controlata prin parametrul background!repeat care poate lua "alorile repeat!x imaginea se repeta pe ori-ontala repeat!y imaginea se repeta pe "erticala no!repeat imaginea nu se repeta )xemplu imaginea nu se repeta sub eticheta p

/html4 /head4 /title4)xemplu D3,/2title4 /style type01text2css14 /5!! p <background!image url(po-a.jpg)> background!repeat no!repeat>? !!4 /2style4 /2head4 /body4 %ext normal /p4%ext cu imagine de fond/2p4 /2body4 /2html4 D.C :o-itia @n mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background! position. Sunt acceptate doua "alori in prima po-itie poate fi top, center, bottom, percentage sau pixel in a doua po-itie poate fi right, center, left, percentage sau pixel )xemplu imaginea de fundal este asociata etichetei B7+8 fiind amplasata top si center, fara repetare /html4 /head4 /title4)xemplu D3C/2title4 /style type01text2css14 /5!! body <background!image url(po-a.jpg)> background!repeat no!repeat> background!position top center>? !!4 /2style4 /2head4 /body4 %ext normal /2body4 /2html4

Stiluri pentru liste

E.# list!style!type .olosind eticheta ol din $%&' cream liste ordonate sau numerotate. *daugand comen-i CSS in -ona $)*+ putem adauga pe langa numere si cifre sau alte simboluri. browserul Betscape nu permite asocierea comen-ilor CSS decat pentru eticheta li. Sintaxa este /style type01text2css14 /5!! li <list!style!type "aloare>? !!4 /2style4 "aloarea poate fi "aloare disc disc disc circle cerc sMuare patrat decimal numere intregi lower!roman numere romane, caractere mici (i, ii, iii, i") upper!roman numere romane, caractere mari (@, @@, @@@, @L) upper!alpha litere mari (*, B, C, +) lower!alpha litere mici (a, b, c, d) none nimic )xemplu lista ordonata folosind marcaje cu litere mici

/html4 /head4 /title4)xemplu E3#/2title4 /style type01text2css14 /5!! li <list!style!type lower!alpha>? !!4 /2style4 /2head4 /body4 Becesar materiale /ol4 /li4caramida/2li4 /li4ciment/2li4 /li4ipsos/2li4 /2ol4 /2body4 /2html4 E.( list!style!image @n afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini prin comansa CSS list!style!image. @maginile sunt introduse prin adresa url(). )xemplu lista ordonata folosind ca marcaj imaginea punct.gif

/html4 /head4 /title4)xemplu E3(/2title4 /style type01text2css14 /5!! li <list!style!image url(punct.gif)>? !!4 /2style4 /2head4 /body4 Becesar materiale /ul4 /li4caramida/2li4 /li4ciment/2li4 /li4ipsos/2li4 /2ul4 /2body4 /2html4

Chenare si margini
.iecare element este incadrat intr!o caseta care este compusa din urmatoarele elemente marginea (margin) este spatiul exterior chenarului pana la celelalte elemente chenarul (border) este o bordura care inconjoara elementul completarea (padding) stabileste distanta dintre continut si chenar continutul include informatia utila (text, tabele, imagini, formulare, etc.) 7riginea elementului este considerat coltul din dreapta sus fata de care se "or raporta toate dimensiunile pre-entate in continuare. A.# width si height 'atimea si inaltimea unui element sunt stabilite in $%&' prin atributele width si height. *ceste atribute pot fi adaugate sau suprascrise prin comen-i CSS. )xemplu folosind comen-i CSS modificam dimensiunile originale ale imaginii

/html4 /head4 /title4)xemplu A3#/2title4 /style type01text2css14 /5!! img <width D=px> height #==px>? !!4 /2style4 /2head4 /body4 /img src01margini.gif14 /2body4 /2html4 A.( padding si margin

padding stabileste distanta dintre obiect si chenar simultan pentru toate laturile. +istantele pot fi stabilite si indi"idual folosind padding!top, padding!bottom, padding!left sau padding!right. margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru toate laturile. +istantele pot fi stabilite si indi"idual folosind margin!top, margin!bottom, margin!left sau margin!right. Lalorile pentru padding si margin pot fi exprimate in (inci), pt (puncte) sau cm (centimetri). px (pixeli), in

)xemplu folosind comen-i CSS imaginea este po-itionata la #==px fata de latura stanga si (Dpx fata de latura de sus /html4 /head4 /title4)xemplu A3(/2title4 /style type01text2css14 /5!! img <margin!left #==px> margin!top (Dpx>? !!4 /2style4 /2head4 /body4 /img src01margini.gif14 /2body4 /2html4 A., border Betscape si internet )xplorer afisea-a diferit chenarele. Comanda CSS pentru definirea chenarului este border a"and proprietatile asociate width, style si color. :entru a fi siguri ca aceste proprietati functionea-a atat in @nternet )xplorer cat si in Betscape trebuie sa declaram pentru border cel putin width si style. border!width stabileste grosimea chenarului si poate fi exprimata in px (pixeli), pt (puncte), cm (centimetri) sau in (inci). border!style stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groo"e, ridge, inset si outset. border!color stabileste culoarea chenarului si poate fi exprimata prin "aloare hexa-ecimala sau in cu"inte. )xemplu definim noua clase utili-and proprietatile border!width border!style si border!color /html4 /head4 /title4)xemplu A3,/2title4 /style type01text2css14 /5!! .clasa# <border!width (px> .clasa( <border!width ,px> .clasa, <border!width (px> .clasaC <border!width ,px>

border!style border!style border!style border!style

dotted> border!color red>? dashed> border!color blue>? solid> border!color green>? double> border!color black>?

.clasaD <border!width (px> border!style groo"e> border!color sil"er>? .clasaE <border!width ,px> border!style ridge> border!color lime>? .clasaA <border!width (px> border!style inset> border!color yellow>? .clasaJ <border!width ,px> border!style outset> border!color aMua>? .clasaG <border!width (px> border!style hidden> border!color oli"e>? !!4 /2style4 /2head4 /body4 /di" class01clasa#14border!width (px> border!style dotted> border!color red>/2di"4/br4 /di" class01clasa(14border!width ,px> border!style dashed> border!color blue>/2di"4/br4 /di" class01clasa,14border!width (px> border!style solid> border!color green>/2di"4/br4 /di" class01clasaC14border!width ,px> border!style double> border!color black>/2di"4/br4 /di" class01clasaD14border!width (px> border!style groo"e> border!color sil"er>/2di"4/br4 /di" class01clasaE14border!width ,px> border!style ridge> border!color lime>/2di"4/br4 /di" class01clasaA14border!width (px> border!style inset> border!color yellow>/2di"4/br4 /di" class01clasaJ14border!width ,px> border!style outset> border!color aMua>/2di"4/br4 /di" class01clasaG14border!width (px> border!style hidden> border!color oli"e>/2di"4 /2body4 /2html4

Pozitionare
:o-itionarea permite ase-area unui obiect intr!un anume loc folosind coordonatele. %otodata obiectele pot fi po-itionate pe straturi diferite, unul deasupra celuilalt. *tat po-itionarea absoluta (*S7'6%)) cat si cea relati"a (H)'*%@L)) folosesc proprietatile ').% si %7: exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri). J.# :o-itionare absoluta plasea-a obiectul in pagina exact in locatia data de left si top. *stfel poate fi creat un element liber fata de celelalte din pagina. 7biectul poate fi orice, de exemplu text sau imagine. CSS2exempluJ3#.html14)xemplu am aplicat po-itionarea absoluta etichetei hC

/html4 /head4 /title4)xemplu J3#/2title4 /2head4 /body4 /hC style01position absolute> left /hC style01position absolute> left /2body4

D=px> top D=px14%ext #/2hC4 #==px> top (==px14%ext (/2hC4

/2html4 J.( :o-itionare relati"a este po-itia normala pe care o ocupa un element, dupa elementele anterioare si inaintea celor urmatoare. :oate fi deplasat fata de aceasta po-itie folosind proprietatile left si top. )xemplu am folosit doua obiecte unul po-itionat absolut celalalt relati"

/html4 /head4 /title4)xemplu J3(/2title4 /style type01text2css14 /5!! .absolut <position absolute> left (==px> top #D=px>? .relati" <position relati"e> left D=px> top D=px>? !!4 /2style4 /2head4 /body4 /di" class01absolut14:o-itionare absoluta, independent de celelate obiecte din pagina/2di"4 %ext /di" class01relati"14:o-itionare relati"a, dupa 1%ext1/2di"4 /2body4 /2html4 J., :o-itionarea tridimensionala )lementele sunt po-itionate pe ecran pe o suprafata bidimensionala dar pot fi ase-ate si unul deasupra celuilalt, intr!o sti"a utili-and un indicati" (index!-) incepand cu =, urmatorul # si tot asa in continuare. )lementul cu indexul cel mai mare este ase-at deasupra. )xemplu am folosit doua obiecte unul po-itionat absolut celalalt relati"

/html4 /head4 /title4)xemplu J3,/2title4 /style type01text2css14 /5!! .element# <position absolute> left ,=px> top ,=px> -!index .element( <position absolute> left D=px> top D=px> -!index .element, <position absolute> left A=px> top A=px> -!index !!4 /2style4 /2head4 /body4 /di" class01element#14/img src01po-a.jpg14/2di"4 /di" class01element(14/img src01po-a.jpg14/2di"4 /di" class01element,14/img src01po-a.jpg14/2di"4 /2body4 /2html4

,? (? #?