5.1 Ce sunt stilurile ?
Stilurile pun la dispozitia creatorilor de site-uri web noi posibilitati de personalizare a paginilor HTML. Un stil reprezinta un mod de formatare exacta a unui bloc de text ( 939e44j spre exemplu anumite caracteristici pentru font, marime, culoare, aranjare in pagina, distantare fata de margini etc).
Exista doua modalitati de a defini un stil:
sintaxa CSS (Cascading Style Sheets);
sintaxa Javascript.
Terminologia CSS - Cascading Style Sheets - desemneaza 'foi in stilul cascada'. De ce 'foi in stilul cascada', vom vedea mai exact in continuare. Practic, tehnologia CSS faciliteaza oricarui proiectant de pagini web posibilitatea de a crea un stil pentru fiecare tag HTML intrebuintat la un moment dat, putand ulterior sa aplice implicit acest stil in toate paginile site-ului pentru elementul de pagina respectiv (adica pentru tag-ul HTML stilizat).
Standardul CSS permite informatiilor cu privire la stil sa fie specificate si referite in mai multe feluri. Stilurile pot fi specificate in interiorul fiecarui tag HTML in parte, in cadrul sectiunii HEAD a documentelor HTML sau intr-un fisier extern cu extensia '.CSS'. In interiorul aceluiasi document HTML pot fi referite mai multe fisiere CSS externe.
5.2 Stiluri dedicate
Aceste stiluri se aplica blocurilor de text pentru care sunt definite si apelate pe loc. De exemplu:
<H3 style= 'text-align:right; color:#429EF7;'>
In acest exemplu, stilul va determina toate titlurile H3 din paginile HTML care fac apel la acest stil sa apara in browser in culoarea specificata si aliniate la dreapta. Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente-tag (de ex. 'H2', 'H3', 'P' si 'DIV'), atunci fie se utilizeaza o lista cu aceste elemente (separate prin virgula) in sectiunea <style></style> din header-ul documentului (delimitat de marcajele <HEAD></HEAD>), asociindu-i-se elementele de stil comune, fie se va utiliza stilul in mod explicit in cadrul fiecarui tag, ca mai sus. Exemplu cu lista de stiluri in HEAD-ere:
<style>
H2, H3, P
</style>
Explicitarea a fost facuta, asadar, in momentul utilizarii acestora.
5.3 Clase de stiluri
Clasele de stiluri permit definirea unui stil general (aplicabil in mai multe locuri in cadrul aceleiasi pagini sau in pagini diferite) in vederea inserarii lui oriunde este necesar printr intermediul unei simple referiri. Sa presupunem ca dorim sa definim o clasa de stiluri 'clasa-mea' (pe care dorim sa o aplicam anumitor portiuni de text pentru a le face de apara de culoare verde si a aliniate la stanga). Vom utiliza in acest sens blocul <style></style>, aflat la randul sau in interiorul blocului <head></head> (reprezentand head-erul documentului HTML). Vom realiza ceea ce ne-am propus in felul urmator:
<style>
all.clasa-mea
</style>
Cuvantul standard 'all' aflat in fata clasei de stiluri 'clasa-mea' indica faptul ca aceasta clasa este aplicabila tuturor blocurilor de text, atunci cand este necesar. Practic clasa de stiluri 'clasa-mea' poate fi asociata tuturor tagurilor HTML care opereaza cu text (ca de exemplu: H2, H6, P, DIV, etc) utilizand in interiorul fiecarui tag vizat o referire explicita la aceasta clasa: <TAG class=clasa-mea>.
Asadar, daca dorim sa aplicam aceasta clasa de stiluri unui titlu de ordinul 3 (specificat in codul HTML prin tagul H3), atunci scriem:
<H3 class=clasa-mea>Acesta este un header de marime 3,aliniat la stanga si de culoare verde </H3>
Dupa cum s-a vazut, pentru apelarea unei clase de stiluri in vederea aplicarii sale elementului tag curent se foloseste atributul 'class' avand ca valoare numele clasei de stil. Impreuna cu specificatia 'all' din definirea clasei de stiluri, atributul 'class' devine un atribut universal, adica va putea fi asociat tuturor tagurilor HTML carora li se poate aplica (in acest caz celor care opereaza cu text).
In interiorul unui bloc <style></style>, comentariile sunt blocuri delimitate de /* si */ (ca si in C, C++, Java si Javascript).
Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite elemente ale documentului (spre exemplu pentru paragrafele de text desemnate prin marcajul de paragraf 'p'), atunci in constructia clasei va aparea acest element (de exemplu 'p.clasa-mea-2'). Exemplu:
<html>
<head><title>Clase de stiluri dedicate</title>
<style> p.clasa-mea-2 </style>
</head>
<body> <p>Acesta este un paragraf
normal
<br> <p class=clasa-mea-2>Acesta este un paragraf aliniat la stanga
si de culoare verde
</body>
</html>
5.4 Stiluri identificate
Absolut toate elementele tag ale unui document HTML admit un atribut universal numit 'id'. Acest atribut 'id' poate identifica prin valorile sale stilul utilizat de un tag HTML. Pentru a utiliza un stil 'identificat' procedam astfel:
In blocul <style></style> introducem definitia stilului conform sintaxei:
<style>
#rosu
</style>
In elementul (tagul) in care dorim utilizarea locala a acestui stil, folosim atributul 'id' care primeste ca valoare numele identificator al stilului definit anterior. Exemplu:
<p id='rosu'>Acesta este un paragraf de text de culoare rosie</p>
Daca dorim ca un stil 'identificat' sa fie aplicabil numai pentru anumite elemente ale documentului (de exemplu 'H3'), atunci in constructia (definitia) identificatorului de stil va aparea acest element (aici 'H3'), ca in exemplul urmator:
<html>
<head>
<title>Pagina cu stil identificat</title>
<style>
H3#rosu
</style>
</head>
<body>
<H3 id=rosu>Acesta este un header de marime 3, centrat si de culoare
rosie</H3>
</body>
</html>
5.4 Stiluri definite in fisiere externe
Stilurile definite in interiorul unui bloc <style></style> pot fi transferate intr-un fisier extern existand astfel posibilitatea asocierii lor mai multor fisiere HTML. Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel:
Se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia '.css'. Continutul acestui fisier coincide cu continutul unui bloc <style></style>, fara ca acesti delimitatori sa fie inclusi.
In fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 1, se include in blocul <head></head> o eticheta <link>, avand trei atribute:
atributul 'rel' cu valoarea 'stylesheet';
atributul 'type' cu valoarea 'text/css';
atributul 'href' avand ca valoare adresa URL a fisierului creat la punctul anterior.
Stilurile definite din fisierul CSS extern se activeaza ca si cum ar fi stiluri definite in fisierul HTML curent intr-un bloc <style></style>.
Iata un fisier HTML cu un CSS extern:
<html>
<head>
<meta http-equiv='Content-Language' content='en-us'>
<meta http-equiv='Content-Type' content='text/html;
charset=windows-1252'>
<LINK REL= 'stylesheet' TYPE= 'text/css' HREF=
'stil.css'>
<title>Pagina de text stilizat</title>
</head>
<body>.
In cazul in care, dintr-un fisier HTML se face o referire la un fisier CSS care insa lipseste, atunci fisierul HTML va fi afisat in browser fara elementele de stilizare, exact asa cum ar arata daca stilizarile nu ar fi existat.
|
