Stiluri CSS in HTML

Elektro_Love · Administrator Data inscrierii: 21/Iul/2010 Mesaje: 101

Cu HTML 4.0 au aparut specificatiile pentru modele de stiluri, cunoscute ca Modele de Stiluri in Cascada (Cascading Style Sheets - CSS). Acestea ajuta la afisarea grafica si incadrarea continutului in pagina.
Pana la acea data, forma, colorație si marimea textului puteau fi date cu instructiunea "font" si cu atributele sale: "face", "color", "size".
Modelele de stiluri pot fi aplicate aproape oricarei etichete HTML, întrebuințând proprietati si valori specifice codului CSS, unele din ele sunt prezentate in tabelul de jos al paginii.
Modelele de stiluri pot fi aplicate in mai numeroase moduri:

1. Intern - direct in eticheta HTML
- Pentru adaugarea unui STYLE intern la un element se foloseste atributul style urmat de proprietati si valori, folosind urmatoarea sintaxa:
<element style="proprietate:valoare; proprietate:valoare;"></element>
- Exemplu:

Citat:

<h4 style="color:#ff1111;">Exemplu h4</h4>

2. In antetul (header-ul) fisierului
- In acest caz se adauga in sectiunea HEAD a documentului HTML urmatoarea sintaxa <style type="text/css"> ... </style>. Aceasta spune browser-ului ca sunt adaugate elemente de stil CSS.
- Aceasta metoda este utila cand se doreste folosirea acelorasi stiluri pentru mai multe elemente din pagina astfel sunt scrise o singura data si nu la fiecare element.
- Proprietatile si valorile de sti CSS se introdul in acest element STYLE, dupa cum puteti vedea in exemplul urmator:

Citat:

<html>
<head>
<title>titlu</title>
<style type="text/css">

</style>
</head>
<body>

</body>
</html>

Conform acestui cod, toate textele "h2" din pagina vor avea nuanță albastra si vor fi subliniate.
- Se foloseste (optional) "" pentru browserele care nu recunosc elementul "<style>" si astfel il ignora.

3. Extern
- Aici proprietatile si valorile pentru diverse stiluri sunt specificate intr-un fisier extern special, de obicei cu extensia "css" (pe care il putem construi cu un editor de modest texte gen Notepad).
- Avantajul folosirii fisierelor externe CSS este faptul ca aceleasi coduri de stil pot fi utilizate de mai multe pagini din site, chiar tot site-ul, fiind scrise o singura data. In plus ajuta la micsorarea ca marime (in bytes) a documentului HTML care astfel se incarca mai repede.
- In fisierul extern CSS se scriu direct elementele cu proprietatile si valorile dorite, NU se mai adauga eticheta "style".
Exemplu de model pentru creare unui fisier ".css" :
Se scrie intr-o pagina noua, deschisa cu NotePad, urmatoarele, si se salveaza fisierul cu extensia ".css"

Citat:

a:link {
color:#0000ff;
text-decoration:none;
font-weight:normal;
font-size:15px;
font-family: Arial;
}

a:visited {
color:#008080;
text-decoration:none;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}

a:active {
color:#b54090;
text-decoration:underline;
}

a:hover {
color:#b54090;
text-decoration:underline;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}

p {
font-weight: normal;
font-size: 11pt;
line-height: 12pt;
text-indent: 20px;
font-family: Arial;
}

Pentru a adauga acest stil CSS intr-o pagina web, adaugati in sectiunea HEAD a documentului HTML care va folosi acel fisier cu stiluri, (intre <head> ... </head>) urmatoarea comanda:
<link href="fisier.css" rel="stylesheet" type="text/css">
- unde la "href" se scrie calea si numele fisierului css folosit.

Se poate face chiar ca un anumit stil sa poata fi aplicat numai unei singure etichete HTML, iar altul sa poata fi aplicat mai multor etichete HTML de feluri diferite. Pentru aceasta se foloseste atributul id sau class in interiorul etichetelor HTML la care vrem sa aplicam un anumit stil.
Diferenta dintre id si class este faptul ca se poate folosi acelasi atribut "class" pentru mai multe elemente HTML, pe cand acelasi "id" se foloseste numai pentru un singur element HTML.
Exemplu pentru "class"

Citat:

<html>
<head>
<title>Titlul</title>
<style type="text/css">

</style>
</head>
<body>
<h2 class="cuvant">Text ...</h2>
<h3 class="cuvant">Alt text ... </h3>
</body>
</html>

- In exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom adauga comanda class="cuvant", celelalte elemente nefiind afectate.
Important: selectorul (aici "cuvant") in STYLE trebuie sa inceapa cu punct (.)

Exemplu pentru "id"

Citat:

<html>
<head>
<title>Titlul</title>
<style type="text/css">

</style>
</head>
<body>
<h2 id="idh">Text ...</h2>
<h2>Alt text ... </h2>
</body>
</html>

In acest exemplu, stilul făcut pentru "idh" va fi întrebuințat doar pentru inițialul element "h2" care contine 'id="idh"'
Important: Pentru stilurile definite de ID, selectorul (aici "idh") trebuie sa inceapa cu #.

Incercati singuri aceste exemple pentru a vedea rezultatul.

- Pentru infuzarea unui stil css asupra unei portiuni dintr-un text, se foloseste eticheta <span> </span>, ca in exemplu urmator:

Citat:

O fraza <span class="cls"> cu orice text</span> si caractere.

Pentru mai multe informatii despre lucru cu stiluri CSS, studiati lectiile de la Curs CSS.