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 >> |