CSS – Extern, intern sau inline
Codul CSS se poate stoca in trei locuri si anume:
fisier extern (.css)
intern - in head
in tagul care se vrea personalizat (inline)
CSS - Fisier .css extern
In general fisierele externe de CSS sunt cele mai folosite. Este de
recomandat utilizarea acestei metode pentru o mai simpla modificare a
intregului website. In acest fel se poate modifica un site intreg schimband
continutul unui singur fisier .css. Singura conditie este ca toate paginile site-
ului sa contina in sectiunea head tag-ul <link>.
HTML
<head>
<link rel="stylesheet" type="text/css" href="fisier_extern.css" />
</head>
Un fisier CSS se poate scrie in orice editor de text, notepad, notepad++, word,
macromedia, etc dar trebuiesc salvate cu extensia ".css"
Un exemplu simplu de cod CSS ar fi urmatorul
CSS
body { background-image: url("img/[Link]"); }
hr { color: #efefef;}
p { margin-left: 15px;}
Observatie: NU trebuie lasat spatiu intre numarul specificat si unitatea de
masura. Folosind "margin-left:15 px;" in loc de "margin-left:15px;" va genera
erori in Firefox si Opera.
CSS intern
Codul CSS in head, nu ar trebuii folosit prea mult cu exceptia cazului cand o
pagina are nevoie de un stil propriu si nu il imparte cu nici o alta pagina.
Codul CSS intern este acelasi ca si la cel introdus intr-un CSS extern., cu
exceptia unor taguri speciale care il incapsuleaza.
Exemplu:
HTML
<head>
<style type="text/css">
body { background-image: url("img/[Link]"); }
hr { color: #efefef; }
p { margin-left:15px;}
</style>
</head>
Pentru a plasa CSS in HTML am folosit tagul <style> impreuna cu
atributul type="text/css", plasat in sectiunea head a documentului HTML.
CSS inline
CSS inline nu inseamna nici mai mult nici mai putin decat CSS in interiorul
tagului HTML. Folosind CSS-ul sub aceasta forma vom pierde toate avantajele
pentru care a fost creat si anume pontru a nu amesteca tagurile HTML cu
formatarea si prezentarea lor. Exista totusi si avantaje in a folosi CSS-ul in
aceasta maniera dupa cum vom vedea. Dar mai intai sa vedem cum anume se
poate introduce CSS intr-un tag HTML.
HTML
<p style="text-align:right;color:green;font-family:'times new roman';margin-
left:15px;">Acesta este un paragraf formatat cu ajutorul CSS.</p>
Observatie:
Dupa cum se observa in exemplu anterior valoarea fontului este o valoare
compusa din trei cuvinte. In acest caz in loc de ghilimele duble am folosit
ghilimele simple pentru a evita conflictul cu ghilimele duble folosite pentru a
incapsula valoarea atributului style.
Daca am folosii acelasi tip de ghilimele peste tot, browser-ul ar intrerpreta
sfarsitul valorii inainte de vreme. Iata bucata de cod CSS care va fi
interpretata de browser:
CSS
style="text-align:right; color:green; font-family:"
Restul codului CSS fiind ignorat.
Prevalenta metodelor de a insera
CSS in documentele HTML
Codul CSS se poate insera in HTML in urmatoarele moduri:
fisier extern (.css)
intern - in head
in tagul care se vrea personalizat (inline)
Desigur codul CSS se poate insera in HTML combinand doua sau chiar toate
cele trei moduri anterioare.
Atunci cand formatam un element si folosim mai multe modalitati de inserare
a CSS-ului, ordinea de reproducere in browser va fi urmatoarea:
1. Formatare CSS inline (in interiorul tag-ului HTML)
2. Formatere CSS interna (in sectiunea head a documentului)
3. FormatareCSS externa (fisier .css extern)
4. Standardul browser-ului (valori CSS atribuite standard)
Concluzie
Formatarea inline anuleaza toate celelalte expresii CSS de formatare. Iar
standardele de formatare ale browser-ului intervin doar atunci cand nu este
specificata o alta formatare CSS.
Exceptie:
In cazul in care tagul <link> este pus dupa tagul <style> codul CSS aflat in
fisierul .css extern va anula codul CSS intern.
HTML
<head>
<style type="text/css">
body { background-image: url("img/[Link]"); }
hr { color: #efefef;}
p { margin-left: 15px;}
</style>
<link rel="stylesheet" type="text/css" href="fisier_extern.css" />
</head>