Tutorial CSS pentru incepatori
December 21st, 2007CSS - Cascading Style Sheets ( Foi de Stil in Cascada ) aduce un control sporit tag-urilor HTML oferind o imbunatatire a prezentarii paginilor web, a designului.
CSS este un set de reguli cu urmatoare sintaxa:
selector {proprietate: valoare}
unde selector este in mod normal un tag HTML pe care doresti sa-l definesti iar proprietate este atributul ce doresti sa-l modifici. O proprietate impreuna cu valoarea sa reprezinta o declaratie. Exemplu:
img { border: 0px; }
Exista o ordine de prioritati a executiei stilurilor, functie de plasarea acestora intr-un site.
1. Stil inline - declaratiile sint chiar in interiorul elementelor/tag-ului HTML din pagina web. Ele sint adaugate cu ajutorul atributului style. Acest mod de aplicare a regulilor CSS are prioritatea cea mai mare.
<p style="font-size: 12px; color: #00AA00;">tot ce este scris in acest tag paragraf va avea caracterele de 12px si culoarea verde</p>
2. Stil intern documentului - regulile CSS sint plasate in interiorul tagului <head>…</head> si o singura regula se poate aplica la mai multe taguri deodata. Introducerea regulilor se face cu ajutorul tag-ului <style type="text/css">…</style> la care s-a adaugat atributul type care anunta browserul prin valoarea sa ( text/css ) ca sint definite foi de stil. Pentru a pastra compatibilitatea cu versiuni vechi de browser care nu cunosc sa interpreteze foile de stil, regulile vor fi puse si intre elementele <!– si –> de comentariu HTML.
<head>
<style type="text/css">
<!–
p {
font-size: 10px;
color: #00FF00;
}
–>
</style>
</head>
Daca intre elementele <body>…</body> folosesti de mai multe ori tag-ul <p> atunci asupra textului din fiecare paragraf ( <p> ) se vor aplica regulile declarate in <head>
3. Stil extern - regulile CSS vor fi definite intr-un fisier extern cu extensia .css Pentru a exista o legatura intre pagina web si acest fisier css, adica pentru ca declaratiile foii de stil sa se aplice tag-urilor HTML din acel document trebuie ca in interiorul tagului <head>…</head> sa se puna elementul <link> care trebuie sa contina obligatoriu 3 atribute:
<head>
<link type="text/css" rel="stylesheet" href="http://www.siteultau.ro/stil.css">
</head>
4. Valoarea default a browserului - este proprietatea de nivel cel mai scazut si se refera la faptul ca fiecare browser are setate anumite valori pentru unele elemente ( in browser poti de exemplu sa alegi tipul fontului, dimensiunea si culoarea ). Daca pagina web care o deschideti, nu contine reguli de stil sub niciuna din cele 3 forme prezentate mai sus iar tagurile nu au atribute care sa specifice anumite valori atunci browserul tau va afisa pagina cu setarile sale implicite ( default ).