Cunostinte de Baza
Cand browserul incepe sa afiseze fisierul HTML il aranjeaza dupa cum este in fisierul CSS definit.
Tipuri de CSS
CSS-ul este de 3 feluri:
- Extern
- Intern
- Inline
CSS Extern
Un stil extern este ideal atunci cand doresti sa aplici acelasi design mai multor pagini. Cu acest tip de CSS ai posibilitatea sa schimbi look-ul unui website modificand doar un fisier. Toate fisierele HTML trebuie sa aiba in head tag-ul <link> care include stylesheet-ul.
<head> <link rel="stylesheet" type="text/css" href="fisieruldestil.css"> </head>
Acest tip de fisier poate fii creat in orice editor de text, cu conditia sa aiba extensia css si sa nu contina niciun tag HTML.
Exemplu fisier CSS extern:
hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}
! Nu adauga spatiu intre valoare si unitatea de masura: margin-left:20 px; margin-left:20px;
CSS Intern
CSS-ul intern trebuie sa fie folosit doar atunci cand vreti sa folositi stilurile respective pe o singura pagina. Acest css intern se defineste in sectiunea de head a fisierului html intre tag-urile <style>:
<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
CSS Inline
CSS-ul inline este lipsit de o multime de avantaje fata de css-ul extern si chiar si de cel intern. Folositi-l cu grija si unde este posibil sa folosesti extern, fa-o!
Pentru a aplica tag-uri css inline te ajuti de tag-ul style folosit intr-un element HTML relevant.
<p style="color:sienna;margin-left:20px">Paragraf CSS Inline.</p>
Stiluri Multiple
Daca ai mai definit un element in 2 stiluri diferite browserul va prealua valoarea mai specifica. Sa presupunem ca avem un css extern cu acest selector h2:
h2 { color:red; text-align:left; font-size:8pt; }
Si css-ul intern are aceste proprietati pentru acelasi tag, h2:
h2 { text-align:right; font-size:20pt; }
Daca in fisierul HTML cu css-ul intern ai un link si catre css-ul extern tag-ul h2 va lua aceste valori:
color:red; text-align:right; font-size:20pt;