Poate va mai amintiti saracia de elemente de formatare din prima versiune a limbajului HTML, când autorii aveau un mic control asupra aspectului documentelor HTML, majoritatea documentelor re zumându-se la niste prezentari seci de informatii. Frustrati de aceasta saracie, ne-am îndreptat spre extensiile HTML lansate de Netscape în produsul ce a devenit cel mai popular browser la un moment dat, Netscape Navigator. Cu câta bucurie am inserat noile taguri de la Netscape, de exemplu
, în docu mentele noastre. Noile taguri ne-au permis sa cream documente care sa impresioneze cititorii, nu numai prin informatiile expuse (daca impresionau) ci si prin aspectul imaginii imprimate pe retina cititorului. Extensiile Netscape au devenit curând un standard de facto în lumea Web-ului, ceea ce a facut ca majoritatea acestor extensii sa fie incluse în ultima versiune a limbajului HTML, HTML 3.2, propusa de consortiul W3C.Cu toate ca extensiile introduse de Netscape, si mai apoi si de Microsoft, au reprezentat un progres în publicarea informa tiilor pe Web, aceste extensii au creat si câteva neajunsuri. Cel mai mare dezavantaj este amestecul de informatii de afisare a continu tu lui si informatiile propriu-zise dintr-un do cu ment HTML. Daca ne uitam la sursa ma jo ritatii paginilor HTML care ne iau ochii, cu greu putem identifica dintr-o privire care sunt informatiile adevarate pe care le contine pagina. Probabil ca în cele mai picante pa gini, raportul dintre octetii care reprezinta conti nu tul util si octetii care contin atributelele tagurilor de formatare este semnificativ în favoarea informatiilor de formatare.
Pare logic ca într-un document HTML informatiile de formatare sa fie separate de in formatia utila si sa beneficiati de aceleasi (sau chiar extinse) posibilitati de formatare. Cum va suna urmatoarea idee? Pe situl dvs. a veti un singur fisier de formatare pe ca re-l includ toate paginile HTML, oferind astfel o imagine unitara asupra sitului. Daca va decideti ca elementele header de tip H1 sa nu mai fie de culoare verde, ci de culoare rosie, modificati un singur fisier si schimba rea se reflecta în toate paginile. Altfel, e cam incomod sa verificati zeci sau sute de fisiere si sa faceti modificarile (chiar daca aveti un script care ar face astfel de modificari, rularea lui pe sute de fisiere ar consuma mai multe resurse decât editarea manuala a unei singure linii dintr-un singur fisier).
Consortiul W3C dezvolta si recomanda mai multe specificatii care descriu modalita te a în care informatiile sunt afisate, tiparite sau, de ce nu, reprezentate sonor. În aceste specificatii sunt prezentate asa numitele „Style Sheets", prin care autorii pot crea look-and-feel-ul dorit, pastrând indepen den ta de platforma a documentelor HTML. Ceea ce este foarte important, utilizarea style sheet-urilor ofera creatorilor HTML aproape aceleasi posibilitati de formatare ca si autorilor din lumea consa crata a DTP-ului, fara a fi necesara introducerea de noi taguri HTML.
Cascading Style Sheets formeaza o parte a acestor specificatii si descriu modalitatea prin care se pot atasa documentelor HTML informatii de afisare referitoare la fonturi, culori, pozitionari în cadrul paginilor s.a.m.d. Dezvoltarea a început în 1994 la CERN, iar în decembrie anul trecut, a fost lansata specificatia Cascading Style Sheets 1 ca o recomandare a consortiului W3C, recomandare ce va conduce la raspândirea larga a specificatiei.
CSS 1 prezinta un mecanism simplu prin care autorii sau cititorii controleaza stilul (fontul, culoarea, spatierea) documentelor HTML. Atributul de „cascading" înseamna ca, atât autorul, cât si cititorul îsi pot alege anumite stiluri preferate care se suprapun ca într-o cascada.
Exista deja navigatoare si editoare HTML care suporta partial specificatia CSS, iar în acest an se asteapta ca specificatia sa fie adoptata rapid. Printre navigatoare se numara Internet Explorer 3.0, Netscape Navigator 4.0, Emacs-w3, Arena si Amaya. În categoria editoarelor care suporta CSS intra Amaya, HotDog, HomeSite 2.5, HotMetal, HoTaMale, QuickSite 2.0, JoyHTML, Webmaker si Personal Views.
Crearea de stiluri CSS 1 se realizeaza prin definirea unor re guli si presupune cunoasterea elementelor de baza din limbajul HTML si din terminologia DTP. Asa cum paginile HTML sunt simple fisiere text, si regulile CSS 1 sunt reprezentate prin fisiere text.
Regulile de definire a stilurilor au urmatoarea forma:
{ proprietate: valoare }
Selectorul face legatura între documentul HTML si stil si poate fi orice element HTML. Regula specifica faptul ca proprietatii desemnate a selectorului i se atribuie o anumita valoare. Exemplu:
H1 { color: blue }
adica, elementelor header de tip H1 li se modifica culoarea în albastru.
Exista mai multe moduri de conectare a documentelor HTML cu stilurile CSS 1, fiecare mod prezentând avantaje si dezavantaje.
Primul mod consta în inserarea în antetul documentului a unei referinte spre un fisier care contine regulile:
O alta modalitate o reprezinta definirea regulilor în antetul docu mentului:
Al treilea mod consta în importarea unui fisier cu reguli si combinarea cu alte reguli specificate dupa declaratia de import:
Ultima modalitate consta în definirea de reguli specifice unui anumit element din cadrul documentului:
Un paragraf afisat cu verde.
De la prima modalitate pâna la ultima, scade generalitatea utilizarii acelorasi stiluri si creste specificul anumitor elemente HTML, de aceea este de preferat utilizarea de stiluri generale pentru toate documentele si folosirea cu retinere a stilurilor specifice anumitor elemente din cadrul paginilor HTML.
Regulile se pot grupa dupa mai multi selectori:
H1, H2, H3 { font-family: helvetica }
sau dupa mai multe proprietati:
H1 { font: bold 12pt/14pt helvetica } .
CSS 1 specifica proprietatea de mostenire: un element utilizeaza stilurile elementului în care este continut, daca aceste stiluri nu sunt modificate de reguli specifice. Elementul cel mai de sus în ierarhie este tagul BODY.
Pentru a mari gradul de control asupra elementelor, în specificatia HTML au fost introduse doua noi atribute: CLASS si ID. Cu atributul CLASS puteti împarti un anumit element în mai multe clase în functie de stiluri, de exemplu:
H1.red { color: red }
H1.blue { color: blue }
iar în cadrul documentului utilizati ceva de genul:
Header albastru
Atributul ID va permite sa declarati stiluri particulare pentru un anumit element si trebuie sa aiba valori unice în cadrul aceluiasi document. Utilizarea atributului ID nu este încurajata.
O alta facilitate este posibilitatea folosirii selectorilor contextuali de genul:
H1 EM { color: red }
regula care va fi aplicata elementelor de tip EM aflate în cadrul unui element de tip H1.
Creatorilor de documente HTML le mai este pusa la dispozitie posibilitatea utilizarii de pseudoclase si pseudoelemente. Acestea nu exista în sursa HTML dar apar în anumite conditii. Asa sunt pseudo clasele pentru ancore (A:link, A:visited si A:active) si pseudo elementele asociate efectelor tipografice (prima linie sau prima litera dintr-un paragraf).
Utilizând CSS, mai multe stiluri pot influenta simultan un docu ment. Aceasta situatie apare din doua motive: modularitatea obti nu ta prin combinarea mai multor seturi partiale de stiluri pentru a preveni redundanta (într-un document se importa mai multe fisiere cu stiluri) si balanta autor-cititor (fiecare specifica anumite stiluri preferate). În aceste conditii, pot aparea conflicte între reguli, conflicte rezolvate de algoritmul prezentat în specificatia CSS 1.
Specificatia CSS 1 mai descrie modul de pozitionare în pagina a elementelor, pozitionarea relativa fata de alte elemente si fata de marginile zonei de afisare si prezinta toate proprietatile selecto rilor (font, culoare, spatierea textului, pozitionare) dar prezentarea lor ar lua prea mult spatiu.
Cascading Style Sheets ofera un real ajutor în publicarea documentelor HTML dar ramâne, în fond, o modalitate de îmbogatire a aspectului unei prezentari si nu un scop în sine. Din acest motiv, sa ne îngrijim ca documentele sa prezinte interes chiar si dupa eliminarea stilurilor.
Radu Greab este student la Universitatea „Petru Maior" din Tg.Mures si poate fi contactat la .