| PROIECTARE SITE WEB > DOCUMENTATIE - CSS - Clase de stiluri
|
Proiectare Site si Web Design - Standardul CSS
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 {text-align:left; color:green;}
</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).
Observatii:
- 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 {text-align:left; color:green;} </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>
|
Creare
si actualizare site