CAP. 14. INTRODUCERE ÎN CSS
14.1. Ce înseamnă CSS?
CSS (Cascading
Style Sheets) sau foi de stil în cascadă,
reprezintă un mecanism simplu de a adăuga elemente de stil (tipuri de
caractere, culori, aliniere, spaţiere etc.) unui document web.
Tag-urile HTML au avut iniţial rolul de defini
conţinutul unui document, de a face distincţia între titlul unui
paragraf (definit prin tag-urile <Hn>),
conţinutul paragrafului (definit prin tag-ul <P>), tabele (definite
prin tag-ul <TABLE>) etc. Aspectul şi modul de afişare al unui site cădeau în
sarcina browserului, fără a fi folosite niciun fel de tag-uri de
formatare.
Dar cum cele două principale browsere –
Internet Explorer şi Netscape Navigator – au continuat să adauge noi
tag-uri şi atribute limbajului HTML original, a devenit tot mai dificil
să creezi un site în care conţinutul documentului HTML să fie
clar separat de modul său de prezentare.
Pentru a rezolva această problemă,
consorţiul W3C, responsabil de standardizarea specificaţiilor HTML, a
creat stilurile şi le-a adăugat specificaţiilor HTML 4.0.
În prezent, marea majoritate a browserelor
suportă CSS.
14.2. Prioritate în cascadă
CSS specifică o schemă a
priorităţilor pentru a determina care regulă de stil are
prioritate atunci când există mai multe reguli aplicate aceluiaşi
element. Este vorba de aşa-numita prioritate
în cascadă, prioritatea fiind calculată conform anumitor
reguli, astfel încât rezultat să fie predictibil.
Informaţiile de stil pot fi prezentate sub
diferite forme, astfel putem deosebi:
-
stiluri inline, definite în interiorul unui element HTML
-
foi de stil interne, definite în interiorul elementului <HEAD>
-
foi de stil externe, definite într-un fişier cu extensia .css
Prioritatea cea mai mare o are stilul inline,
după care, din punctul de vedere al priorităţii, urmează
stilul definit în interiorul elementului <HEAD> şi, în cele din
urmă, stilul din foia externă. Prin urmare, o definire a stilului
inline va prevala în faţa stilului intern care, la rândul său, va
prevala în faţa stilului extern.
14.3. Folosirea stilurilor
Sintaxa CSS este alcatuită din trei
părţi: un selector, o proprietate şi o valoare, în
următorul format:
selector { proprietate:
valoare}
Selectorul este reprezentat de elementul (tag-ul)
cărui doriţi să-i aplicaţi un anumit stil, proprietatea
este atributul pe care doriţi să-l schimbaţi şi fiecare
proprietate poate lua o anumită valoare. Propritatea şi valoarea sunt
separate de două puncte (:) şi sunt încadrate de acolade {}. De exemplu:
body {color: blue}
Dacă doriţi să modificaţi mai
multe proprietăţi aceluiaşi element, trebuie să
separaţi fiecare proprietate cu punct şi virgulă (;). Exemplul
de mai jos arată cum să definiţi un paragraf aliniat pe centrul
paginii iar textului i se aplică culoarea roşie:
p {text-align: center; color:
red}
Pentru a evidenţia mai bine
proprietăţile definitie de stil, puteţi scrie fiecare
proprietate pe câte un rând, ca în exemplul următor:
p {
text-align: center;
color: red
}
De asemenea, ca şi în HTML, pentru a putea
introduce şi explicaţii ce pot fi utile ulterior, în CSS pot fi
inserate comentarii ce vor fi ignorate de către browser. Comentariile
încep cu (/*) şi se încheie cu (*/), ca în exemplul următor:
/* Acesta este un comentariu
*/
14.4. Cum se inserează o foaie de stil
Când un browser citeşte o foaie de stil, va
aplica documentului formatările specificate în foia respectivă. În
funcţie de forma în care sunt prezentate informaţiile de stil,
inserarea acestora într-un document web se poate efectua în trei moduri:
a) astfel, pentru inserarea unei foi de stil
externe, ideală când stilul se va aplica mai multor pagini, trebuie
folosit tag-ul <LINK> în fiecare pagină ce urmează să
folosească stilul respectiv. Atributele obligatorii pentru tag-ul <LINK>
sunt REL cu valoarea “stylesheet”, TYPE cu valoarea “text/css” şi
HREF
care are ca valoare adresa URL a fişierului care conţine foaia de
stil.
Acest tag se amplasează în secţiunea HEAD
a paginii web cu următoarea sintaxă:
<HEAD>
<LINK
REL="stylesheet" TYPE="text/css" HREF="nume_fişier.css">
</HEAD>
În aceste condiţii, browserul va citi foia de
stil din fişierul nume_fişier.css
şi va formata documentul în mod corespunzător.
O foaie de stil poate fi scrisă în orice editor
de text. Fişierul nu trebuie sa conţină vreun tag HTML şi
trebuie salvat cu extensia .css.
b) o foaie de stil internă ar trebui
folosită atunci când există un singur document cu un stil propriu.
Foaia de stil internă se defineşte în secţiunea HEAD folosind
tagul <STYLE> astfel:
<HEAD>
<STYLE
TYPE="text/css">
h1
{color: blue}
p
{margin-left: 20px}
body
{background-image: url("fundal.gif")}
</STYLE>
</HEAD>
Browserul va citi acum stilurile, aşa cum au
fost definite, şi va formata documentul în conformitate cu acestea.
Notă: În mod normal un
browser ignoră tag-urile necunoscute. Acest lucru înseamnă că
browserele mai vechi, care nu suportă stiluri, vor ignora tag-ul
<STYLE>, dar vor afişa conţinutul acestuia, cuprins între
tag-ul de început şi cel de încheiere, sub formă de text. Pentru a
preîntâmpina acest neajuns, este recomandabil să includeţi
conţinutul în interiorul unui comentariu, ca în exemplul de mai jos:
<HEAD>
<STYLE
TYPE="text/css">
<!--
h1
{color: blue}
p
{margin-left: 20px}
body
{background-image: url("fundal.gif")}
-->
</STYLE>
</HEAD>
c) în final, dacă doriţi să
folosiţi un stil inline, va trebui să folosiţi atributul style în interiorul tag-ului
respectiv. Este o metodă folosită mai ales atunci când un stil
urmează să fie aplicat unei singure apariţii a unui element.
Atributul style poate
conţine orice caracteristică CSS. Exemplul următor arată
cum se poate schimba culoarea şi stilul fontului folosit într-un paragraf,
fără a mai apela la tag-urile <FONT> cu atributul color şi <B>:
<p style="color:red;
font-weight:bold"> Acesta este un paragraf
în care textul va fi de culoare roşie şi scris cu caractere
îngroşate</p>
Nu voi insista asupra foilor de stil, o prezentare
amănunţită a acestora urmând să facă subiectul unui
viitor ghid.