Foi de stiluri (CSS)

8/8/2019 Foi de stiluri(CSS)

1/12

Foi de stiluri (CSS)

24.11.10


2/12

Ce este un stil? Unstil reprezi nt o colec ie de atribu te ale textului i ale modului de ar anjare adocumentului care pot f i a plicate n mod selectiv unui document sau doar unei p r i din acesta. Aceste atribu te pot f i tipu l de font, m rimea i gr osimea acestuia,mar ginile, par agr af ele i orice altceva ce poate influen a as pectul textului n pagin .

Stilurile a plicate unui document HTML au multe avantaje pentru creatorii de pagini Web:

Ofer control crescut asupra aspectului i plas rii textului n pagin Reduc "nv lm eala" produs de multitudinea de deschideri i nchideri ale

etichetelor care descriu elementele individuale ale textului Procesul de modificare a diferitelor elemente din pagin se simplific


3/12

T ipuri de foi de stiluri S tilurile HTML pot fi aplicate ntr-o pagin Web n trei moduri:

ncapsulate (embedded ): stilurile sunt incluse n documentul asupr a c ruia se a plic , i anume nsec iunea a documentului. Prin includerea lor n antetul documentului, stiluri le r mninvizibi le pentru vizi tatorul paginii.

Legate(linked ): stiluri le sunt def inite n f i iere separ ate de documentul HTML. Documentul face a pel la foaia de stiluri prin inter mediul etichetei . Folosirea acestui tip de stiluri face posibil utilizarea aceleia i foi de stil pentru documente dif erite. De asemenea, este posibila plicarea mai multor foi de stiluri pentru acela i document.

I n-line: stiluri le sunt incluse ca atribu te n cadrul etichetelor HTML din document. Aceastanseamn c ele vor af ecta doar elementul asupr a c ruia sunt a plicate. Este o modalitate mai pu in utilizat deoarece contr azice principiu l gener al al stiluri lor , acela de a sim plif ica i de aface mai lizibi l codul documentului HTML.

Stiluri ncapsulateC rearea unui astfel de stil se realizeaz folosind eticheta .Eticheta este o etichet container , deci este o bligatorie preze n aetichetei de nchidere . ntre cele dou etichete se intr oduc def ini iile de stil. Eticheta de stil este plasat n antetul documentului adic n sec iunea .


4/12

Exem plul 1n exem plul de mai jos este preze ntat o def ini ie de stil care realizeaz af i area tutur or titlurilor de nive l 1(adic a textelor cupri nse ntre etichetele ) cu car actere bold i de culoare ver de. n plus, textele

incluse ntre etichetele
vor f i af i ate cu fonturi arial, de m rime 2 i culoare violet.De asemenea, este creat un stil "nor mal" care poate f i a plicat asupr a oric rui text. Prin inter mediul s u, textuleste af i at cu car actere mai mari i de culoare or anj.stiluri1
Stiluri

Te xtul din ac est pa r a gr af este for ma ta t cu ajutorul stilurilor
Acest a este un text ne for ma ta tTitluAcest a este stilul no r ma l


5/12

S tiluri legate foi de stiluri externe

Stiluri le incluse n pagin se a plic elementelor preze nte n res pectivu l document HTML,reducnd dimensiunea codului i efor tul de a def ini f iecare element n par te. Aceast idee se poate extinde la nivelul mai multor documente care pot benef icia, toate, de acelea i stiluri, reunite ntr-ofoaie de stiluri exter n .

O foaie de stiluri este un f i ier text care con ine regulile de stil def inite n aceea i manier folositla stiluri le incluse n pagin . Odat creat o foaie de stiluri, ea trebuie salvat cu extensia .css .Foile de stiluri pot f i stocate ntr-un folder separ at sau n acela i folder n care sunt plasate i documentele HTML.

A pelul foilor de stiluri se poate realiza n dou moduri: folosind eticheta

folosind f unc ia @importCel mai folosit mod de a pelare a unei foi de stiluri este cu ajutorul etichetei confor m

ur m toarei sintaxe:


6/12

Exemp lul 2In acest exem plu este construit o foaie de stiluri exter n care va f i a pelat cu ajutorul etichetei . Foaia de stiluri a fost salvat sub numele stiluri1.cssB ODY{ backgr ound-color: #CCFFCC;font-family: Arial, sans-serif;color: #330066; padding: 50 px, 70 px}A:link {color: #CC9900}A:visited {color: #660000}A:hover {color: #FFCC00}A:active {color: #FF0000}H1 {color: #996633; backgr ound-color: #FFFFCC}

stiluri3Fo i de stiluri exter ne Acest exemp lu ilustre a za mo dul in ca re este inc lus a in pa gina o foa ie de stiluri exter na

Ma i multe exemp le in an exa2


7/12

S tiluri in-lineS pre deosebire de stiluri le nca psulate i de foile de stiluri exter ne, stilurile in-line fac par te chiar din corpu ldocumentului HTML. Ele se a plic prin folosirea atribu tului style n asociere cu etichetele HTML standar d.R e ine i, deci, c style poate f i attetichet n sine ct i atribu t al altor etichete.

Def ini iile de stil in-line se a plic numai asupr a elementelor incluse ntre etichetele care au asociat atribu tul style.Din acest motiv, dac dorim s repe t m n alt loc din cupri nsul documentului acelea i def ini ii de stil, ele vor trebui repe tate, nc r cnd astf el documentul HTML. Totu i, utilitatea stiluri lor in-line este aceea c f iind def inite chiar ncupri nsul documentului, def ini iile lor sunt mai puter nice dect cele din stiluri le nca psulate sau exter ne. Dac , de exem plu, am creat o foaie de stiluri pe care dorim s o a plic munui document, i dac n cadrul acestui documentavem un anumit element par ticular c ruia dorim s -i d mun alt as pect dect cel prev zut n foaia exter n , putema plica acelui element un stil in-line care se va ref eri strict lael.

Iat un exem plu de a plicare a unui stil in-line asociat etichetei

:

Textul din acest paragraf este scris cu fonturi

arial, ingrosate, de culoare rosu

O bserva i c la stiluri le in-line def ini iile de stil sunt incluse ntre a postr of uri i nu ntre acolade, ca la celelalte tipuri de stiluri .

Atunci cnd lucr a i cu documente HTML de ja existente c r or a dori i s le a plica i stiluri in-line , este recomandat sfolosi i etichetele i . Acestea v per mit s a plica i stiluri le f r a af ecta codul HTML de jaexistent sau as pectul paginii n br owsere le care nu supor t stiluri .


8/12

Exemp lul 3 ilustre a z folosire a

etichetei stiluri4

Stiluri in-line

Te xtul din ac est pa r a gr af este diviza t folosind etichet a span
Te xt s cris cu a lba stru si
fon turi a ria l
Te xt

scris cu verde si fon turi co urier mediu m


9/12

E fecte ob inute cu ajutorul stilurilor

A spectul textului Iat cteva atribu te care se

pot asocia cu diver se etichete HTML per mi nd schim bareaas pectului textului.


10/12

B are de derulare colorate

Unul dintre ef ectele des ntlnite n paginile Web este preze n a barelor de deru lare color ate. Acest ef ect se poate, de asemenea, o b ine prina plicarea stiluri lor . Pentru a def ini culoarea barelor de deru lare se folosesc cteva atribu te, pe

care le def inim mai jos.


11/12

n Exemp lul 5 s-a con struit o foa ie de stiluri exter n sa lva t su b n umele stiluri5.css.

B ODY{scr oll bar-face-color:blue;

scr oll bar-arr ow-color:yellow;scr oll bar-shadow-color:re d;scr oll bar-3dlight-color:yellow;scr oll bar-tr ack -color:cyan;}

stiluri8Ba re de derul a re co lor a tea
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a


12/12

F ormulare colorate

Exemp lul ca re ur mea z (Exemp lul 14.9) fo lose te stiluri in-line pentru a c re a fo r mula re co lor a te ca re po t da pa ginii un a spec t ma i a tr ac tiv. Am fo losit pentru set a rea c ulorilor co durile he xa ze c ima le pe ca re le pute i g si n An exa 3 .Ca i la ba rele de derul a re, culorile for mula relor tre buie a lese cu gri j pentru a n u da pa ginii un a spec t nc r ca t i lipsit de bun-gust . Pagina des cris n ac est doc ument a r a t ca n Figur a 14.7 .Exemplul 14. 9stiluri9

Fo r mula re co lor a te

Ca re su nt imp resiile ta le?

Documents

Foi de stiluri (CSS)