8/8/2019 Utilizarea Tehnicii CSS
1/15
I.3. Utilizarea tehnicii CSS10 pentru formatarea documentelor Web
De ce CSS?
Aplicarea stilurilor reprezint o extindere important a posibilitilor de stilizare, evitnd
utilizarea de fiiere grafice mari ce determin ncetinirea ncrcrii paginilor i
manipularea lor greoaie.
Folosind stilurile HTML putei fi siguri c vizitatorii paginii dumneavoastr vor vedea
pagina exact aa cum a fost ea proiectat.
I.3.1. Ce este un stil?
A stiliza nseamn a da unui obiect o form corecti expresiv. Un stil reprezint o
colecie de valori ale atributelor elementelor unui document, valori care pot fi aplicate
ntregului document sau doar unei pri din acesta. Aceste atribute pot fi: mrimea,
grosimea, tipul i culoarea fontului, marginile, paragrafele i orice altceva ce poate influena
aspectul unui element, deci a unei pagini. Gruparea lor n stiluri permite designer-ului saplice aceeai colecie la diferite pri ale unui document. Folosirea stilurilor reduce
considerabil efortul depus atunci cnd dorii s aducei modificri aspectului i aranjrii
elementelor din paginile dumneavoastr. n loc s parcurgei fiecare document n parte i s
facei modificri asupra fiecrui element, operai modificri numai asupra foii de stiluri care
stilizeaz aceste elemente.
Sintaxa general a unei declaraii de stil este:
list_selectori{proprietatea1:list_valori1;
proprietatea2:list_valori2;
proprietatean:list_valorin;
}
Selectorii sunt utilizai pentru determinarea elementelor HTML asupra crora vor fiaplicate stilurile.
Urmtorul segment de cod definete proprietile font, font-size, colori text-align pentru
nivelele de titlu H1, H2 i H3:
H1,H2,H3 {font-family:Arial,Garamond;text-align:center}11H1 {font-size:18px;color:red;background-color:gray}
H2 {font-size:16px;color:blue}
10Cascading Style Sheets n englez11 n scrierea definiiei unui stil este posibil s grupm selectorii n liste, separai prin virgul
8/8/2019 Utilizarea Tehnicii CSS
2/15
20
H3 {font-size:14px;color:blue}
I.3.2. Definiii de stil
Stilurile pot fi aplicate elementelor unui document n trei moduri:
La nivel de element12: stilurile sunt incluse ca atribute n cadrul etichetelor HTML din
document. Aceasta nseamn c ele vor afecta doar elementul asupra cruia sunt aplicate.
Este o modalitate mai puin utilizat, deoarece contrazice principiul general al stilurilor, acela
de a simplifica i de a face mai lizibil codul documentului HTML.
ncapsulate13: stilurile sunt incluse n documentul asupra cruia se aplic, i anume n
seciunea a documentului, prin utilizarea marcajului .
Legate14: stilurile sunt definite n fiiere separate de documentul HTML. Documentul
face apel la foaia de stiluri prin intermediul etichetei . Avantajul folosirii foilor de stiluri
externe este dublu. Pe de-o parte, ele se pot aplica la nivelul mai multor documente HTML,
realiznd astfel o legtur de stil ntre ele, lucru deosebit de util la construirea unui site. Pe
de alt parte, acelai document poate folosi foi de stiluri diferite, oferind vizitatorului
posibilitatea de a opta la un moment dat, pentru unul sau altul dintre ele, n func ie de
propriile preferine.
Includerea stilurilor ntr-un document HTML:
V
12inlinen englez13embedded n englez14linkedn englez
legate
H1 {color: #008000; font-weight: bold}P {font-family: Arial; color: #800080; font-size: 14px}
ncapsulate
8/8/2019 Utilizarea Tehnicii CSS
3/15
Principii generale ale proiectrii interfeelor Web 21
I.3.2.1 Definiii de stil inline
Spre deosebire de stilurile ncapsulate i de foile de stiluri externe, stilurile inline fac
parte chiar din corpul documentului HTML. Ele se aplic prin folosirea atributului style nasociere cu etichetele HTML standard.
Definiiile de stil inline se aplic numai asupra elementelor incluse ntre etichetele care
au asociat atributul style . Din acest motiv, dac dorim s repetm n alt loc din cuprinsul
documentului aceleai definiii de stil, ele vor trebui scrise din nou, ncrcnd astfel
documentul HTML. Totui, utilitatea stilurilor inline este aceea c fiind definite chiar n
cuprinsul documentului, definiiile lor sunt prioritare fa de cele din stilurile ncapsulate sau
externe.
Stil inline pentru acest paragraf
Exemplu: pagina urmtoare conine o definiie de stil pentru al II-lea titlu de nivel 315
care nu se aplici celorlalte titluri de acelai nivel.
I.3.2.2 Definiii de stil ncapsulate (interne)
Crearea unui astfel de stil se realizeaz folosind eticheta . Eticheta de
stil este plasat n antetul documentului adic n seciunea .
15 textele cuprinse ntre etichetele
8/8/2019 Utilizarea Tehnicii CSS
4/15
22
Exemplu: pagina conine o definiie de stil care realizeaz afiarea tuturor titlurilor de
nivel 1 cu caractere bold i culoare gri. Textele incluse ntre etichetele
vor fi afiatecu fontul arial, de mrime 12 i culoare violet. De asemenea, este creat un stil "stil_text"
care poate fi aplicat oricrui text. Prin intermediul su, textul este afiat cu caractere de
dimensiuni mai mari i culoare roie.
Exemplu: pagina conine o definiie de stil ncapsulat i dou de stil inline.
Atunci cnd lucrai cu documente HTML deja existente, crora dorii s le aplicai stiluri
inline, este recomandat s folosii etichetele i . Acestea v permit s aplicai
stilurile fr a afecta codul HTML deja existent sau aspectul paginii n browserele care nu
suport stiluri.
Eticheta funcioneaz asemntor cu eticheta
, marcnd un ntreg bloc de
coninut, dar fr a genera linii albe ntre paragrafe.
8/8/2019 Utilizarea Tehnicii CSS
5/15
Principii generale ale proiectrii interfeelor Web 23
Eticheta este similar cu eticheta aplicndu-se elementelor dintr-o
poriune mic a documentului, de la cteva cuvinte, la cteva linii.
I.3.2.3 Definiii de stil extern
O foaie de stiluri este un fiier text care conine reguli de stil definite n aceeai manier ca la
stilurile incluse n pagin. Odat creat o foaie de stiluri, ea trebuie salvat cu extensia .css.
Apelul foilor de stiluri se poate realiza n dou moduri:
folosind eticheta
folosind funcia @import
Metoda importului (@import) este puin mai lent, fiind posibil s dureze o secund,dou, pn se ncarc foaia de stil, timp n care coninutul este afiat fr formatarea
designer-ului.
Cel mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etichetei
conform urmtoarei sintaxe:
Exemplu: pagina urmtoare utilizeaz foaia de stiluri stil.css, prin intermediul
etichetei cu atributul rel="stylesheet". Atributul href al etichetei are ca valoarenumele16 foii de stiluri apelate. Am utilizat i proprietatea background-repeat pentru
introducerea unei imagini pe fundal i repetarea ei doar pe axa Ox.
16i adresa relativ, dac este necesar
stil.css
body{background-image:url(i4.gif);background-repeat:repeat-x;background-color:gray;}
h2{color:yellow}.semafor{color:red;Font-Family:Arial Black;background-color:yellow}
Referirea unei foi de stil externe
Pentru acest document am folosit un fisier de tip foaie de stil in interiorul caruia am definit 3 stiluri:
pentru corpul documentuluipentru titlurile de nivel 2un stil pentru punerea in evidenta a unor pasaje de text, stil numit semafor
8/8/2019 Utilizarea Tehnicii CSS
6/15
24
O regul de stil poate s-i mreasc prioritatea dac este nsoit de declaraia"!important":P {font-size:12pt!important; font-style:italic }
I.3.3. Stiluri n cascad
Cele trei tipuri de stiluri pot fi combinate n cadrul aceluiai document. Relaiile dintre
diferitele tipuri de stiluri realizeaz efectul de cascad care d numele acestei metode.
Browserul rezolv conflictul dintre definiiile de stiluri respectnd urmtoarea regul:
stilurile inline au cea mai mare prioritate, apoi cele interne i, n cele din urm, stilurile
externe, cu prioritate minim.
Dac ne referim la "care dintre cele 3 definiii de stil este mai bun", standarde WEB indic:
utilizarea foilor .css pentru definirea caracteristicilor care se aplic la formatarea prii
comune a tuturor paginilor unui document
utilizarea stilurilor ncapsulate pentru definirea caracteristicilor care se aplic la formatarea
unei anumite pagini;
utilizarea stilurilor inline pentru definirea caracteristicilor care se aplic la formatarea unuianumit element.
I.3.4. Clase de stiluri
Acestea permit definirea unui stil general (aplicabil n mai multe locuri n cadrul
aceleiai pagini sau n pagini diferite) n vederea inserrii lui oriunde este necesar prin
intermediul unei simple referiri. S presupunem c dorim s definim o clas de stiluri "ftext"
(pe care dorim s o aplicm anumitor poriuni de text pentru a le face s apar de culoare
roie, aliniate la stnga, avnd culoarea de fundal gri i mrimea fontului de 14).
all.ftext{text-align:left; color:red;}
Cuvntul standard "all" aflat n faa clasei de stiluri "ftext" indic faptul c aceast
clas este aplicabil tuturor blocurilor de text, atunci cnd este necesar. Practic clasa de
stiluri "ftext" poate fi asociat tuturor tagurilor HTML care opereaz cu text (ca de exemplu:
H2, H3, P, DIV, etc...) utiliznd n interiorul fiecrui tag vizat o referire explicit la aceast
clas:
8/8/2019 Utilizarea Tehnicii CSS
7/15
Principii generale ale proiectrii interfeelor Web 25
Dac dorim ca o clas de stiluri s fie aplicabil numai pentru anumite elemente aledocumentului (spre exemplu pentru paragrafele de text desemnate prin marcajul deparagraf "p"), atunci n construcia clasei va aprea acest element (de exemplu "p.ftext").
Dac dorim s aplicm aceast clas de stiluri unui titlu de nivel 2, atunci scriem:
Acest header este aliniat la stanga si are culoarea rosie
Dup cum s-a vzut, pentru apelarea unei clase de stiluri n vederea aplicrii sale
elementului tag curent se folosete atributul "class", avnd ca valoare numele clasei de stil.
mpreun cu specificaia "all" din definirea clasei de stiluri, atributul "class" devine un atribut
universal, adic va putea fi asociat tuturor tagurilor HTML crora li se poate aplica.
Exemplu: acest exemplu conine o definiie de clas aplicabil doar textelor
desemnate prin marcajul
.I.3.5. Stiluri identificator
Denumirea stilurilor identificator este dat de modul n care este asociat stilul respectiv
unui element, prin intermediul atributului id. Definirea unui stil identificator este similar cu a
unei clase de stiluri. Vom folosi id-uri doar pentru stilizarea elementelor dintr-o pagina care
apar doar o singura dat, altfel, folosirea claselor este recomandat.
# nume_stil { descriere }
Utilizarea stilului identificator se realizeaz incluznd n interiorul etichetei elementului
de text secvena:id = nume_stil
Exemplu: acest exemplu conine dou definiii de stil de tip identificatorcap i corp.
8/8/2019 Utilizarea Tehnicii CSS
8/15
26
I.3.6. Pseudoclase i pseudoelemente
Pseudoclaselecontroleaz comportamentul dinamic al unor elemente, cum ar fi
legturile. n CSS, o legtur poate avea 5 stri ce corespund la 5 pseudoclase:
Atribut Semnificaie
:link descrie starea normal a unei legturi:visited descrie o legtur vizitat:hover descrierea aspectul legturii cnd aceasta primete focusul:active descrie starea activ a unei legturi:focus descrie o legtur selectat
Exemplu: n aceast pagin hiperlegturile vor fi subliniate i vor avea culoarearoie. Legturile vizitate sunt scrise cursiv, cele active sunt afiate cu caractere aldine17, iar
legtura care deine focusul este reprezentat cu majuscule.
17 italice
8/8/2019 Utilizarea Tehnicii CSS
9/15
Principii generale ale proiectrii interfeelor Web 27
Exemplu: paginaurmtoareutilizeaz foaia de stiluri test.css. n documentul HTML
am inclus i o legtur, pentru a exemplifica modul n care foaia de stiluri schimb culorile
legturii.
Pseudoelementele controleaz aspectul anumitor poriuni ale unui element, cum ar fi
prima linie a unui paragraf sau prima liter a unui text. Astfel, pentru formatarea paragrafelor,
avem urmtoarele pseudoelemente:
selector:first-line {descriere} descrie aspectul primei linii a unui paragraf;selector:first-letter {descriere} descrie aspectul primei litere a unui paragraf;
unde selector poate descrie orice element de text.
Exemplu: n aceastpagin am utilizat pseudoelementul first-letter.
8/8/2019 Utilizarea Tehnicii CSS
10/15
28
I.3.7. Stiluri pentru listelist-style-type
Folosind eticheta ol din HTML putem crea liste ordonate sau numerotate. Adugnd
comenzi CSS n zona HEAD putem aduga pe lng numere i cifre, alte simboluri.
Browserul Netscape nu permite asocierea comenzilor CSS dect pentru eticheta li.
li {list-style-type: valoare;}
valoare semnificaie
disc disccircle cercsquare ptratdecimal numere ntregilower-roman numere romane, caractere mici (i, ii, iii, iv)upper-roman numere romane, caractere mari (I, II, III, IV)upper-alpha litere mari (A, B, C, D)lower-alpha litere mici (a, b, c, d)none nimic
Exemplu: pagina urmtoare conine o list ordonat care utilizeaz ca marcatori literele mari
ale alfabetului englez
8/8/2019 Utilizarea Tehnicii CSS
11/15
Principii generale ale proiectrii interfeelor Web 29
list-style-image
n afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite i
imagini prin comanda CSS list-style-image. Imaginile sunt introduse prin adresa url().
Exemplu: pagina urmtoare conine o list ordonat folosind ca marcaj imaginea i4.gif.
Exemplu: pagina urmtoare conine un meniu structurat ca o listi stilizat folosind CSS.
Pentru a crea un sistem de navigare bazat pe o list neordonat18, mai inti se creeaz lista,
plasnd fiecare legatur ntr-un element . Apoi, se ncadreaz textul cu i i se
asociaz un id corespunztor.
18 marcat cu ajutorul tagului
8/8/2019 Utilizarea Tehnicii CSS
12/15
30
I.3.8. Casete n CSS
Elementele cu care lucreaz HTML sunt afiate
de browser n interorul unei zone dreptunghiulare ca
n figur alturat, unde:
marginea19 este spaiul exterior chenarului
pn la celelalte elemente,
chenarul20 este o bordur care nconjoar
elementul,
completarea21 stabilete distana dintre coninut i chenar,
19margin n englez20bordern englez21paddingn englez
8/8/2019 Utilizarea Tehnicii CSS
13/15
Principii generale ale proiectrii interfeelor Web 31
coninutul include informaia util (text, tabele, imagini, formulare etc.) .
Exemplu: pagina urmtoare conine 3 definiii de clase utiliznd proprietile border-
width, border-style i border-colori o imagine poziionat la 50px fa de latura stngi
25px fa de latura de sus i bordat cu chenar portocaliu.
I.3.9. Poziionare n CSS
Poziionarea permite aezarea unui obiect ntr-un anume loc folosind coordonatele
sale. Totodat obiectele pot fi poziionate pe straturi diferite, unul deasupra celuilalt. O astfel
de aezare se poate face utiliznd atributul position.
Att poziionarea absolut ct i cea relativ folosesc proprietile lefti top exprimate n px
(pixeli), in (inci), pt (puncte), cm (centimetri).
Poziionarea absolut plaseaz obiectul n pagin exact n locaia data de left i top.
Astfel poate fi creat un element liber fa de celelalte din pagina. Obiectul poate fi orice, de
exemplu text sau imagine.
Exemplu: am aplicat poziionarea absolut etichetei h3.
Poziionarea relativ este poziionarea unui element n funcie de elementele
anterioare. Un element poate fi deplasat fa de altul folosind proprietile left i top.
8/8/2019 Utilizarea Tehnicii CSS
14/15
32
Exemplu: n pagina urmtoare cuvintele sunt poziionate relativ unul fa de cellalt.
Poziionarea tridimensional
Elementele sunt poziionate pe ecran pe o suprafa bidimensional dar pot fi
aezate i unul deasupra celuilalt, ntr-o stiv utiliznd un indicativ (index-z) ncepnd cu 0,urmtorul 1 i tot aa, n continuare. Elementul cu indexul cel mai mare este aezat
deasupra.
Exemplu: pagina urmtoare conine 3 imagini poziionate absolut i suprapuse.
I.3.10. Notaii i uniti de msur
Foile de stil utilizeaz dou tipuri de uniti de lungime:
relative: exprim o dimensiune n raport cu alt dimensiune ,
absolute: exprim o dimensiune fix.
Uniti de msur relative:
http://www.drogoreanu.ro/tutorials/css/exemplu8_2.htmlhttp://www.drogoreanu.ro/tutorials/css/exemplu8_2.html8/8/2019 Utilizarea Tehnicii CSS
15/15
Principii generale ale proiectrii interfeelor Web 33
Care este diferena dintre CSS i HTML?HTML-ul este utilizat pentru structurareaconinutului unei pagini, iar CSS-ul este
utilizat pentru formatarea acestuia.
em-reprezint limea literei M relativ la fontul utilizat22,
ex- reprezint nlimea literei 'X' relativ la fontul utilizat,
px-pixeli (dimensiunea este dependent de rezoluia calculatorului) .
Uniti de msur absolute:
in-inch (1in=2.54cm),
cm-centimetri,
mm-milimetri,
pt-punct tipografic(1pt=1/72 in).
Culori
Atributul culoare pentru un obiect poate fi specificat printr-un cuvnt cheie (aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white si yellow ) sauprin intermediul unei specificaii numerice RGB. Acestea sunt luate din paleta VGA
Windows. Specificarea unei culori n forma hexazecimal RGB se prefixeaz cu caracterul #
i conine ase cifre hexazecimale.
URL23este soluia aleas de World Wide Web Consortium, pentru specificarea unei resurse
(unui site sau a unei pagini) n Internet. Sintaxa general este:
:///
unde
protocol este protocolul folosit (de cele mai multe ori HTTP),
nume_DNS este numele domeniului pe care se afl resursa,
nume_local este format din calea i numele resursei de pe discul local.
22 Mrimea celorlalte caractere este ajustat n funcie de acesta23Uniform Resource Locator
Top Related