CSS - Cascading Style Sheets

Pagina principala   Curs Laborator Proiect

  CSS in fisier extern >>

Cascading Style Sheets (CSS) este un limbaj de formatare pentru web ce ofera o modalitate simpla si eficienta de a defini stilul, designul unui site web. Cu ajutorul CSS autorul unui site web poate modifica stilul tuturor paginilor modificand doar continutul unui singur fisier.
De exemplu daca se doreste ca linia orizontala sa arate la fel, de fiecare data cand se insereaza, s-ar putea folosi sintaxa:
<HR WIDTH="75%" SIZE=5 ALIGN=center>
Asta inseamna ca daca o asemenea linie orizontala este inserata de mai multe ori in mai multe pagini ale site-ului, o modificare ulterioara trebuie facuta in toate paginile. De exemplu daca se doreste ca latimea liniei sa fie de numai 50% din latimea ferestrei, trebuie modificate toate fisierele in care apare tag-ul HR.
Utilizand CSS se poate face modificarea o singura data in fisierul in care s-a definit stilul pentru tagul HR, si in toate paginile HTML se va vedea noul stil pentru acel tag, pentru ca stilul este "citit" din fisierul respectiv. Astfel modificand un singur fisier se poate aplica noul stil pe intregul site.

Exista trei moduri de a utiliza CSS:
1. in cadrul paginilor web (intern);
2. in cadrul unui tag;
3. sa fie importate dintr-un fisier (extern).

1. Definirea CSS in cadrul paginii web este utila in cazul site-urilor mici, si in special cand se doreste o formatare suplimentara de design, care nu este posibila cu HTML, insa cu CSS fiind foarte simplu. Definirea CSS in acest caz se face utilizand tag-ul STYLE. Acesta trebuie introdus in antetul documentului, deci intre tagurile <HEAD> si </HEAD> astfel:

<head>
<title>
<style type="text/css">
codul CSS pentru definitii

</style>
</head>

Intre tag-ul de deschidere si inchidere se introduc definitiile de stil (proprietatile) care pot fi:

In exemplul de mai jos este definit stilul pentru tag-urile P si A, si un stil care poate fi atribuit oricarui tag:

P {font-family: Arial ; color: #ffffff;
    font-size: 11pt}
A {font-size: 10pt;font-weight: bold; color: #0000ff; text-decoration: none}
A:link {text-decoration: none}
.red {font-family: Arial; color: #ff0000;
    font-weight:italic; font-size: 12pt}

Observati ca proprietatile definite pentru un tag sunt departite prin semnul ";"
Daca in sursa HTML (dupa tag-ul BODY) se va introduce urmatorul cod:

<p>test primul paragraf</p>
<p class="red">test al doilea paragraf</p>
<p>Link catre <a href="http://www..yahoo.com" target="_blank">Yahoo</a></p>

atunci primul paragraf va fi scris cu caracterisiticile definite pentru tag-ul P, iar al doilea cu cele definite sub denumirea red.

2. Cateodata se doreste folosirea unui alt stil pentru un tag, decat cel declarat intre tag-urile STYLE. Sau se doreste modificarea stilului implicit al unui tag fara a mai defini separat stilul in antetul documentului. Acest lucru se poate face definind stilul chiar in cadrul tag-ului. De exemplu daca al treilea paragraf se doreste sa fie scris cu o alta culoare de cat cel implicit (#ffffff), se poate scrie:

<p>test primul paragraf</p>
<p class="red">test al doilea paragraf</p>
<p style="color: #00CC00">Link catre <a href="http://www..yahoo.com" target="_blank">Yahoo</a></p>

ultimul rand avand efect scrierea textului cu culoarea verde (codul 00CC00).

  CSS in fisier extern >>