Introducere în CSS

Introducere în CSS

CSS este un acronim provenind din Cascading Style Sheets, care înseamnã "foi de stil în cascadă". În documentele W3C, CSS nu e definit ca un nou limbaj, ci ca un mecanism care permite formatarea documentului HTML. CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagină web utilizând numai CSS, care a fost proiectat astfel încât să conlucreze cu HTML-ul. Tagurile HTML au fost iniţial repartizate pentru a defini conţinutul unui document. Pentru a afişa "Acesta este un antet", "Acesta este un paragraf" sau "Acesta este un tabel", trebuiau utilizate taguri ca <h1>,<p>,<table> etc. Modul de aranjare al documentului era sarcina browser-ului, fară a fi folosite taguri de structură.
Pe masură ce Netscape şi IE continuau să adauge noi taguri HTML şi atribute (ca tagul <font> şi atributul color) sintaxei HTML originale, devenea din ce în ce mai greu să creezi site-uri web în care conţinutul documentelor HTML să fie separat clar de aranjamentul documentului. Stilurile definesc cum să fie afişate elementele HTML 4.0, aşa cum face tagul font sau atributul color în HTML 3.2. Stilurile sunt salvate în mod natural în fişiere diferite de cele cu extensia html. Foile de stil externe vă încuviințează să schimbaţi apariţia şi aranjarea tuturor paginilor în site-ul dvs. web, doar prin editarea unui solitar document CSS. Dacă aţi încercat vreodată să schimbaţi fontul sau colorație tuturor anteturilor din paginile web pe care le-aţi creat, veţi întelege cum CSS vă poate scuti de multă muncă inutilă. Proiectanţii CSS-ului au urmărit îndeosebi separarea între conţinutul paginii (textul adresat vizitatorului şi imaginile din pagină) şi codul-sursă. Folosind CSS, se ajunge la un control mai fin asupra paginii web, la scăderea mărimii în octeti a paginii web, atunci când codul CSS e conţinut într-un fişier extern. Modificând fişierul CSS extern, modificăm simultan toate paginile web în care acesta e inclus. Se pot crea efecte mai sofisticate decât cele produse de codul HTML: suprapunerea unei imagini peste altă imagine, a unui text peste alt text, impresia de relief, efectul hover, afişarea unor fonturi mai mari decât h1 etc.
CSS este extrem de util în Web design, pentru că le îngăduie developerilor să controleze stilul şi chenarul mai multor pagini web în acelaşi timp. Ca web developer puteţi defini un stil pentru fiecare element HTML şi să-l aplicaţi câtor pagini web doriti. Pentru a face o schimbare globală, schimbaţi stilul şi toate elementele din paginile web vor fi modificate automat.
Dezavantaj lucrului cu CSS este că pagina conţinând cod CSS poate arata diferit în navigatoare diferite, căci nu toate browserele interpretează codul CSS la fel.
Adăugând cod JavaScript, se obtin rezultate şi mai sofisticate, chiar de animatie. CSS + JavaScript = DHTML (Dynamic HTML). Aceste efecte spectaculoase justifică titulatura de "artişti CSS" sau "artizani CSS" acordată unor creatori de pagini web.
Foile de stil dau probabilitatea specificării informaţiei despre stil în mai numeroase feluri. Stilurile se pot specifica într-un singur element HTML, în interiorul elementului <head> al unei pagini HTML sau într-un fişier extern CSS. Dintr-un singur document HTML se pot face referiri către mai multe foi de stil externe. Deci, un stil din interiorul unui element HTML are cea mai mare prioritate, ceea ce reprezintă că va suprascrie fiecare stil declarat în tagul <head>, într-o foaie de stil externă şi în browser.
În documentul HTML, codul CSS poate fi introdus în mai multe moduri:
1. Codul CSS e prezent în pagina web, iar efectul său se aplică asupra întregului document.

Cod:

<html>
<head>
<style>
b {color:red;}
i {color:blue;}
</style>
</head>
<body>
<p align=center><b>Introducere �n CSS</b></p>
<p><i>Această sectiune se adresează celor ce cunosc deja HTML-ul. </i></p>
</body>
</html>

Consecinţă: Orice text cuprins între <b>şi </b> va fi afişat cu roşu, oriunde s-ar afla în document. Absolut orice text afişat cu italice va fi de culoare albastră.
Se observã că introducerea codului CSS în head duce la creșterea volumului în octeti a fişierului.

Cod:

<html>
<head>
<style>
a { text-decoration: none; }
</style>
</head>
<body>
<a href="Intro.htm">Introducere</a>
<a href="A.htm">Partea I</a>
<a href="B.htm">Partea a II-a</a>
</body>
</html>

Eticheta <style> anunţă browserul că urmează codul CSS, iar </style> că a luat sfârsit codul CSS. Efectul codului alăturat este că toate link-urile din acest document vor apărea nesubliniate (text-decoration:none;).

2. Codul e prezent în pagina web, iar efectul sãu se aplicã elementelor izolate.

Cod:

<html>
<head>
</head>
<body>
<a href="Intro.htm" style="color:red;">Introducere</a>
<a href="A.htm" style="color:green;">Partea I</a>
<a href="B.htm" style="color:blue;">Partea a II-a</a>
</body>
</html>

Efectul acestei secvenţe de cod este:
Cod:

Introducere
Partea�I
Partea�a�II-a

Se observă că nu mai avem, în acest caz, o etichetă <style>, ci un atribut style al etichetei <a>. Orice etichetă HTML poate beneficia de acest atribut. Pentru formatarea unor porţiuni mari de text, puteţi folosi containerele div sau span. Totuşi, această abordare nu satisface principiul separării codului CSS de textul afisat în browser.

3 Codul CSS se află într-un fişier extern, cu extensia css. Efectul său se aplică întregului document.

Cod:

<html>
<head>
<link rel=StyleSheet href="x.css" title="Setarea link-urilor" type="text/css">
</head>
<body>
<a href="Intro.htm">Introducere</a>
<a href="A.htm">Partea I</a>
<a href="B.htm">Partea a II-a</a>
</body>
</html>

Fişierul extern poate fi scris în Notepad şi salvat cu extensia css. Includerea sa în pagina web se face folosind tag-ul <link>, care trebuie să se afle între <head>şi </head> (în antetul paginii).
Fisierul x.css poate conţine următorul cod:
Cod:

body { color: blue;}
a {color: red; text-decoration: none;}

Consecinţa va fi afişarea cu fonturi albastre a întregului text, exceptând link-urile, care vor fi colorate în rosu.
Observaţie:
Într-un fişier html, pot fi incluse astfel oricâte alte fisiere cu extensia css, htm, html sau pdf.
Această metodã de includere a CSS-ului în pagina web e mai avantajoasã ca primele douã. Codul CSS introdus astfel conlucreazã cu cel scris direct în pagină.

4. Documentul CSS se poate importa în pagina web.
Cod:

<html>
<head>
<style>
@import url(http://www.cartomatica.net/fis/x.css);
</style>
</head>
<body>
</body>
</html>

Importul trebuie declarat imediat pe urmă tag-ul <style>, anterior oricărei alte linii de cod. În exemplul alăturat, s-a realizat importul în pagina curentă a fişierului x.css din directorul fis al sitului www.cartomatica.net. Desigur, fişierul importat poate avea şi o adresă relativă.

Sintaxa CSS este alcătuită din trei părţi: un selector, o caracteristică şi o valoare. Selectorul este elementul/tagul pe care vreţi să-l definiţi, caracteristica este atributul pe care doriţi să-l schimbaţi şi fiecare caracteristică poate lua o valoare. Caracteristica şi valoarea sunt separate de semnul ( Smile

şi sunt încadrate de acolade:

Cod:

body {color: black}

Dacă doriţi să specificaţi mai mult de o caracteristică, trebuie să separaţi fiecare caracteristică cu semnul (;). Exemplul de mai jos arată cum să definiţi un paragraf aliniat central, cu nuanță roşie a textului:

Cod:

p {text-align: center; color: red}

Pentru a întelege mai bine aceasta definiţie de stil, puteţi descrie o caracteristică pe fiecare rând, ca în exemplul următor:

Cod:

p {
text-align: center;
color: black;
font-family: arial
}

Atributul class

Cu acest atribut puteţi defini stiluri diferite pentru acelaşi element. Să zicem că vreţi două modele de paragrafe în documentul dvs: unul aliniat la dreapta şi unul centrat. Iată cum puteţi face asta cu stiluri:

Cod:

p.right {text-align: right}
p.center {text-align: center}

Trebuie să folosiţi atributul class în documentul dvs. HTML:

Cod:

<p class="right">
Acest paragraf va fi aliniat la dreapta.
</p>

Cod:

<p class="center">
Acest paragraf va fi aliniat pe centru.
</p>

Atributul id

Atributul id trebuie să fie unic pe pagină. Nu poate exista decât un element cu un id dat într-un document. El este marcat în documentul HTML cu id în loc de class:

Cod:

<p id="intro">
Acest paragraf va fi aliniat la dreapta.
</p>

Atributul id poate fi definit în doua moduri. Poate fi definit pentru a se potrivi tuturor elementelor cu un id specific sau să se potrivească numai unui element cu un id specific. În exemplul următor, atributul id se va aplica tuturor elementelor cu id= "intro":

Cod:

#intro {
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}