Limbajul CSS

(Cascading Style Sheets = foi de stiluri)

Cuprins
Avantajele folosirii "Foilor de stil De ce nvm? Prezentarea general a foilor de stiluri n cascad Modelul de formatare al unui element. Sintaxa unei definiii CSS Modelul de afiare al unui element Stiluri la nivel de linie (inline) Foaia de stiluri intern Foaie de stiluri extern Aplicaie Sfrit prezentare #

Avantajele folosirii "Foilor de stil"

Aplicarea foilor de stil unui document HTML de ctre creatorii de pagini Web are numeroase avantaje eseniale pentru creatorii de pagini Web: folosirea lor reduce considerabil efortul depus atunci cnd se dorete modificarea aspectului i aranjrii elementelor din paginile dumneavoastr; n loc s parcurgei fiecare document n parte i s facei modificri asupra fiecrui element, nu mai este necesar s operai modificri dect asupra foii de stiluri, care controleaz aceste elemente; modificrile se vor reflecta asupra oricrui segment de text care a fost formatat cu stilul respectiv; ofer control crescut asupra aspectului i plasrii textului n pagin; reduc "ncurctura" produs de multitudinea de deschideri i nchideri ale etichetelor care descriu elementele individuale ale textului; procesul de modificare a diferitelor elemente din pagina se simplific ntruct modificarea ulterioar a unui stil se reflect automat n toate zonele n care a fost folosit; pot fi create i aplicate nu doar pentru controlul aspectului fonturilor, ci i a multor altor elemente de formatare ale paginii.

De ce nvm?

Tehnica foilor de stiluri n cascad permite creatorilor documentelor Web s aib un control mai bun asupra aspectului documentului, realiznd i separarea dintre coninutul documentului i modul de afiare a acestuia.
#

Prezentarea general a foilor de stiluri n cascad

Foile de stil n cascad sunt grupuri de proprieti ce definesc modul de afiare a elementelor introduse prin etichetele HTML. Posibilitatea utilizrii mai multor definiii de stil pentru acelai element, navigatorul interpretndu-le ntr-o ordine bine stabilit, explic termenul cascad prezent n denumire. n acest moment au fost aprobate dou standarde privind foile de stiluri i anume:
#

Prezentarea general a foilor de stiluri n cascad

CSS1 (Cascading Style Sheets level 1): permite specificarea unor definiii de format pentru fonturi, culori, fundaluri, alinierea elementelor n document. CSS2 (Cascading Style Sheets level 2): extinde CSS1 cu faciliti de motenire a foilor de stiluri, poziionarea absolut i relativ a elementelor documentului, integrarea mai multor tipuri de medii etc. SFAT Este de preferat s utilizm doar acele definiii de stiluri care au suport n toate navigatoarele actuale.
#

Modelul de formatare al unui element. Sintaxa unei definiii CSS

Elementele care pot fi introduse ntr-o pagin Web sunt afiate de navigator sub forma unei forme dreptunghiulare (caset de afiare), coninutul efectiv fiind nconjurat de mai multe zone opionale: margini (margin area), borduri (border area) i zone de protecie (padding area). Existena acestor zone, precum i caracteristicile lor pot fi controlate cu ajutorul definiiilor de stil. Un element HTML poate fi: Element la nivel de bloc Element inline
#

Modelul de formatare al unui element. Sintaxa unei definiii CSS

Element la nivel de bloc afiarea unui astfel de element presupune deschiderea unei noi casete de afiare, care se extinde de obicei pe mai multe linii i care este aliniat n raport cu celelalte elemente bloc vecine. De exemplu, elementul paragraf inserat prin utilizarea etichetei <p> este un element bloc. Elementele bloc pot conine alte elemente bloc sau elemente inline, poziionarea acestora realizndu-se relativ la caseta care le conine.
#

Modelul de formatare al unui element. Sintaxa unei definiii CSS

Element inline element care ocup de obicei o

zon restrns, de multe ori n cadrul unei linii de text din document i nu posed caracteristicile elementelor bloc. De exemplu, etichetele <b>, <u>, <sub> introduc elemente inline n cadrul unui document Web. Elementele inline sunt afiate tot prin utilizarea unei casete de afiare, doar c aceasta este poziionat n raport cu elementele vecine de pe linia pe care se afl.
#

Modelul de afiare al unui element

padding right padding left marginea superioar (margin top)

padding top

CONINUTUL ELEMENTULUI

padding bottom marginea inferioar (margin bottom) marginea stng (margin left) chenar (border) marginea dreapt (margin right)

Modelul de formatare al unui element. Sintaxa unei definiii CSS

Exist trei modaliti de a ataa definiii de stil elementelor unui document Web: definiii de stil inline: definiiile de stil sunt ataate fiecrui element HTML n parte, prin utilizarea atributului STYLE=definiie CSS; este afectat numai elementul respectiv; definiii de stil nglobate n documentul HTML: definiiile de stil sunt incluse n cadrul documentului utiliznd marcajul STYLE. Definiia este valabil n toat poriunea de document ce urmeaz etichetei STYLE; Definiii de stil externe: definiiile CSS sunt scrise ntr-un fiier separat, avnd extensia .css, fiierul fiind asociat unuia sau mai multor documente HTML folosind eticheta LINK. Definiiile externe sunt valabile pentru ntreg documentul asociat. #

Stiluri la nivel de linie (inline)

Acest tip de stil se folosete pentru a aplica un stil unic pentru o singur apariie a unui element. Pentru a folosi stiluri la nivel de linie, se folosete atributul style n eticheta unde vrem s aplicm formatarea. Exemplu <html><head></head><body> <p style=font-size:20pt;color:#7FFF00;background:#191970; font-style:italic;width=3cm;height:4cm;text-align:justify;> <br><b> Tarile dezvoltate se preocupa mai ales ca sa arate elevilor tot ce se nvata, ce li se preda, iar ceea ce nu li se poate arata, nu li se preda si-i lasa pe altii sa se amageasca cu cstigul efemer si nesemnificativ pentru tara, al unui titlu olimpic. Titluri olimpice aduc sportivii. Tara este n cstig doar cu elevi care au reusit sa acumuleze acele cunostinte capabile sa formeze din ei specialisti (care sa creeze ceva bun, sefi priceputi, care creeaza conditii ce duc la competitivitate si eficienta, buni meseriasi, care dau lucruri precise si de arta). </b></p></body></html>

Atenie!
La editarea stilurilor nu se las spaii ntre valoarea proprietii i unitatea de msur. De exemplu, margin-left: 20 px nu va funciona; corect este: margin-left:20px

Foaia de stiluri intern

Acest tip de stil se folosete pentru un singur document. Pentru a defini un stil intern, se folosete eticheta <style>, imbricat n seciunea head. 1. Toate elementele de un anumit tip au acelai stil. <html><head><style> p {font-size:20pt;color:red;background:yellow;fontstyle:italic;width:20cm;height:1cm;} </style></head> <body><p>Oricate paragrafe ar contine documentul, toate vor avea acelasi stil.</p> </body></html> #

Foaia de stiluri intern

2. Stilul este aplicat unui element, care este identificat prin intermediul atributului id al acestuia. <html><head><style> #p1 {font-size:20pt;color:red;background:yellow;fontstyle:italic;width:20cm;height:1cm;} </style></head> <body><p id=p1>Formm un stil cu numele p1. Elementul care va avea acest stil va trebui s conin atributul id care s aib valoarea p1. </p> <p>Un paragraf obinuit.</p> </body></html> #

Foaia de stiluri intern

3. Stilul este aplicat unui element sau mai multor elemente, care sunt identificate prin intermediul atributului class. <html><head><style> .still {font-size:20pt;color:red;background:yellow;fontstyle:italic;width:20cm;height:1cm;} </style></head> <body><p class=still>Stilul este aplicat unui element sau mai multor elemente, care sunt identificate prin intermediul atributului class. </p> <p>Un paragraf obinuit.</p> </body></html> #

Foaie de stiluri extern

Acest mod de inserare este recomandat cnd stilul respectiv se aplic pentru mai multe pagini. Cu o foaie extern se poate schimba un ntreg site. Fiecare pagin web se leag de foaia de stiluri (css). Pentru aceasta, se folosete eticheta <link>, imbricat n seciunea head. Aceasta are urmtoarele atribute: rel definete tipul de fiier css; type indic browser-ului n ce limbaj este scris codul; href se specific locaia fiierului (dac fiierul css nu se gsete n aceiai locaie cu cel html, se scrie adresa complet a sa). #

Foaie de stiluri extern

Exemplu. Relund exemplul anterior, formm un fiier text cu numele unstil.css, care va conine definiia stilului: .still {font-size:20pt;color:red;background:yellow;fontstyle:italic;width:20cm;height:1cm;} n aceste condiii, fiierul HTML devine: <html><head> <link rel=stylesheet type=text/css href=unstil.css> </head> <body><p class=still>Stilul este aplicat unui element sau mai multor elemente, care sunt identificate prin intermediul atributului class. </p> <p>Un paragraf obinuit.</p> </body></html>

Aplicaie
Realizai programul TV de astzi pentru postul preferat. Folosii liste i tabele. Pentru formatarea textului, folosii foi de stiluri.