Crearea Foilor de Stil
1. Etichete HTML si stiluri CSS
CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte, prin stabilirea unui anume stil in interiorul ei, cu atributul "style". Acest lucru este util mai ales pentru a anula alte stiluri ale elementului respectiv sau de a da elemente grafice de stil doar etichetei respective.
Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:
<eticheta style="proprietate:valoare;"> text ... </eticheta>CSS permite si definirea unor reguli de stil generale intr-o pagina web. Acest set de reguli trebuie scris in sectiunea de antet (head) a documentului, in cadrul tag-ului <style>.
Sintaxa pentru definirea CSS intr-un document HTML, in interiorul etichetei <head> </head>, este urmatoarea:
<style type="text/css">
selector_1 {proprietate1:valoare1; proprietate2:valoare2; ... }
...
selector_n {proprietate1:valoare1; proprietate2:valoare2; ... }
</style>- Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai rapida a unei pagini.
Iata un exemplu practic de cod CSS:
<style type="text/css">
h1 { font-family:’Arial’; font-size:15px; font-weight:bold; color:#1111ff; }
p {font-family:’Arial’; font-size:12px; color:blue; }
</style>Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de intreg site. Astfel, trebuie creata o foaie de stil externa intr-un fisier separat, de preferat cu extensia ".css", care poate fi inclus in pagina HTML prin doua procedee: legatura sau import.
Crearea unei foi de stil externe se face scriind codul CSS intr-un fisier text cu ajutorul unui editor de texte simplu (de exemplu Notepad in Windows), sau specializat in acest sens (precum Notepad++). In fisierul extern creat se adauga reguli CSS, fara insa ca aceste reguli sa fie incadrate in etichete STYLE.
Dupa ce a fost creata foaia de stil externa, aceasta poate fi folosita de un document HTML utilizand urmatoarea sintaxa, in interiorul tag-ului <head> </head>:
<link rel="stylesheet" href="nume_fisier.css" type="text/css">- Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele folosite transmit navigatorului tipul de legatura ("rel" – legatura cu o foaie de stil, "type" - tipul codului din fisier) si locatia inspre fisierul ce contine codul CSS ("href" – calea si numele complet al fisierului, inclusiv extensia).
O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta importul acestora folosind comanda @import.
Sintaxa pentru importul unei foi de stil externe este urmatoarea:
<style type="text/css">
@import url(nume_fisier.css);
</style>Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a documentului HTML eticheta STYLE. In cadrul acestei etichete este adaugata instructiunea "@import" de mai sus, unde "nume_fisier.css" reprezinta calea si numele fisierului ce contine regulile CSS definite.
Alaturi de instructiunea "@import", in cadrul etichetei STYLE, pot fi adaugate definiti si selectori suplimentari.
Legatura la un fisier CSS extern sau importul acestuia intr-un document HTML are acelasi efect ca si cum stilurile incluse ar fi fost definire direct in eticheta STYLE din sectiunea HEAD a documentului HTML.
2. Definirea selectorilor
- Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii compatibilie cu eticheta HTML la care se refera, avand urmatoarea forma generala:
selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ... }Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul HTML vor fi modificate automat. Prin redefinirea unei etichete, proprietatile prestabilite existente nu sunt anulate, ci se adauga altele noi.
Utilizarea selectorilor de tip clasa ofera posibilitatea configurarii unor stiluri care se pot aplica doar acelor elemente care sunt etichetate cu clasa respectiva. Sintaxa generala de definire a unei clase CSS este:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }Exista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa poate fi folosita doar cu eticheta HTML respectiva. Pentru a defini o clasa care sa afecteze in mod direct un anume selector HTML, se foloseste urmatoarea sintaxa:
selector_HTML .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase e recomandat sa fie diferit de cuvintele rezervate JavaScript.
- Asemanator cu selectorii de clasa se definesc si identificatorii (id-ul). Acestia sunt folositi pentru crearea de stiluri care pot fi atribuite unei singure etichete HTML dintr-o pagina. Sintaxa generala de definire a unui identificator este:
#identificator { proprietate1:valoare1; proprietate2:valoare2; ... }Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o singura data in cadrul unei pagini web pentru identificarea tag-ului respectiv, astfel poate fi manipulat si cu ajutorul functiilor JavaScript.
Numele unui identificator e recomandat sa fie diferit de cuvintele rezervate JavaScript.
3. Crearea etichetelor HTML personalizate
Majoritatea etichetelor HTML au unele proprietati prestabilite. Acestea fie raman asa cum sunt, fie pot fi redefinite. Exista insa cazuri in care se doreste crearea unor etichete personalizate, pornind de la zero. In acest caz se folosesc etichetele <span> si <div>.
Eticheta <span> nu are proprietati mostenite. Ea reprezinta doar o locatie vida care creaza o eticheta in linie.
Pentru a configura o eticheta in linie trebuie definita o clasa sau identificator care sa poata fi aplicat apoi unei etichete <span>. Iata un exemplu cu, forma generala, in care selectori sunt precedati de eticheta <span> :
...
<span class="nume_clasa"> ... </span>
...
<span id="span1"> ... </span>
...
<span class="clasa_span"> ... </span>
...Acum iata cum pot fi definiti acestia in interiorul unei foi de stil:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
#span1 { proprietate1:valoare1; proprietate2:valoare2; ... }
span .clasa_span { proprietate1:valoare1; proprietate2:valoare2; ... }In momentul in care se doreste configurarea unui bloc separat de restul continutului unui document HTML, solutia este eticheta
<div>. Aceasta creaza o zona proprie in pagina, cu linie noua atat deasupra sa cat si dedesubtul sau.
Pentru crearea etichetelor DIV se procedeaza la fel ca si in cazul etichetelor in linie SPAN, prin definirea mai intai a unei etichete de tip clasa sau identificator, urmata apoi de aplicarea ei asupra unei etichete <div>.
Iata forma generala de aplicare a unei etichete <div> intr-o pagina HTML :
...
<div class="nume_clasa"> ... </div>
...
<div id="div1"> ... </div>
...Definirea acestor etichete <div> intr-un cod CSS se face astfel:
div { proprietate1:valoare1; proprietate2:valoare2; ... }
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }Regulile CSS pentru definirea etichetelor <span> sau <div>, pot fi plasate la fel ca si celelalte tipuri de selectoare, in sectiunea "head" a documentului in interiorul etichetei "style", sau intr-un fisier extern carev ulterior este legat sau importat in documentul HTML.
4. Definirea de reguli similare
Daca mai multi selectori folosesc aceleasi definitii css, acestia pot avea aceeasi lista de elemente, fiind scrisi separat prin virgule. Sintaxa generala pentru definirea unei liste cu mai multi selectori este urmatoarea:
selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ... }Impreuna cu selectorii pot fi de asemenea definiti identificatorii si clasele. Dezavantajul ar fi ca in momentul in care este modificata o valoare a unei proprietati incluse in definitie, valoarea respectiva se va modifica in toate etichetele reprezentate de acesti selectori.
5. Definirea etichetelor in context (imbricate)
Cand o eticheta este inconjurata de alte etichete (aflandu-se astfel una in interiorul alteia), spunem ca aceste etichete sunt imbricate. Eticheta exterioara se numeste, in acest caz, eticheta parinte, iar cea inferioara se numeste copil. Se pot crea reguli care revin numai etichetelor copil, sintaxa generala a unei astfel de reguli fiind:
selector1 selector2 ... { proprietate1:valoare1; proprietate2:valoare2; ... }- Unde "selector1" este selectorul parinte iar "selector2" este selectorul copil.
Lista de selectori imbricati poate fi mai mare de doi, ultimul selector din lista este cel care primeste toate stilurile incluse in regula si in plus le mosteneste si pe cele ale parintilor.
Ca si selectorii singuri, selectorii imbricati pot include in lista clase, identificatori sau selectori HTML.
Toate etichetele HTML, cu exceptia etichetei BODY, au cel putin o eticheta parinte care le inconjoara. De cele mai multe ori stilurile etichetelor din interior preiau stilurile etichetelor parinte (exista insa cazuri in care proprietatile nu sunt mostenite de etichetele imbricate). Acest mecanism se numeste mostenirea stilurilor.
Prin redefinirea unui selector, eticheta nu-si pierde proprietatile prestabilite, doar in cazul in care acestea sunt modificate. Astfel proprietatile mostenite pot fi anulate prin redefinirea acestora in lista de definitii a etichetei imbricate.
6. Cresterea prioritatii unei definitii
Valoarea !important adaugata unei definitii atribuie maximum de prioritate in determinarea ordinii unei executii.
Valoarea !important trebuie plasata inaintea caracterului ’;’, ca in exempul urmator:
selector { proprietate1:valoare1; proprietate2:valoare2 !important; ... }7. Determinarea ordinii executiei
Deoarece exista mai multe moduri de a aplica stilurile, pot apare situatii in care unei etichete sa-i fie aplicate mai multe stiluri. Foile de stil din doua sau mai multe surse, folosite simultan, pot cauza contradictii. De aceea exista cateva reguli care determina ordinea executiei (numita si cascada), acestea sunt:
1. Regulile CSS scrise in interiorul paginii HTML, in cadrul etichetei "style" din sectiunea "head" au o prioritate mai mare decat cele scrise intr-un fisier extern, iar regulile scrise in interiorul etichetelor au o prioritate mai mare decat cele din cadrul etichetei "style" din sectiunea "head".
2. Existenta atributului !important – confera prioritate maxima la afisare definitiei in care este utilizat.
3. Sursa regulilor – exista numeroase navigatoare care permit utilizatorului sa-si defineasca propriile foi de stil. Totusi, foile de stil ale autorului le anuleaza pe cele ale vizitatorului daca acestea din urma nu au valoarea "!important".
4. Specificitate – cu cat o regula dispune de mai multi selectori HTML, de clasa si de identificator, cu atat prioritatea ei creste. ID-urile au valoarea 100, clasele au valoarea 10, iar selectorii HTML au valoarea 1.
5. Momentul aparitiei – cu cat un stil apare mai tarziu, cu atat importanta lui este mai mare. Astfel, definitiile unei etichete copil au prioritatea mai mare si anuleaza toate stilurile precedente cu care intra in conflict.
8. Adaugarea comentariilor la CSS
Este bine ca uneori sa fie adaugate comentarii in codul CSS, mai ales in cazul fisierelor externe. Comentariile ajuta la intelegerea codului, facandu-se astfel cunoscut, pentru mai tarziu, rolu anumitor elemente din codul CSS.
Comentariile nu au nici un efect si pot fi plasate in jurul regulilor, fiind utile si in cazul navigatoarelor care nu suporta CSS.
Pentru a adauga comentarii in regulile de stil avem la dispozitie doua modalitati:
In cazul in care comentariul se intinde pe un singur rand este suficienta folosirea perechii de caractere ’//’ urmata de comentariu.
In cazul in care comentariul contine mai multe linie, trebuie plasat intre ’/*’ care deschide zona de comentariu si ’*/’ care indica sfarsitul comentariului.
In cazul folosirii comentariilor cu ’//’ se pot adauga oricate slash-uri, minimul fiind de doua.
Iata un exemplu in care puteti vedea cum pot fi adaugate comentariile:
/* Comentariu,
pe mai
multe linii */
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
// Comentariu pe o singura linie
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }