Tutorial CSS - Extern, intern sau inline

  »   Introducere in CSS  »   Tutorial CSS - Extern, intern sau inline

CSS - Extern intern sau inline

In momentul de fata codul CSS se poate stoca sau pune 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 sa folositi aceasta metoda pentru o mai simpla modificare a intregului website. In acest fel se poate modicica un site intreg schimband continutul unui singur fisier .css. Singura conditie este ca toate paginile sitului sa contina in sectiunea head tag-ul <link>.

html<head>
	<link rel="stylesheet" type="text/css" href="fisier_extern.css" />
</head>

Unfisier 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

cssbody { background-image: url("img/imagine.png"); }
hr { color: #efefef;}
p { margin-left: 15px;}

Observatie: NU lasa 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 faptului ca ai o pagina care 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. Dar sa aruncam o privire la exemplul urmator.

html<head>
	<style type="text/css">
	
		body { background-image: url("img/imagine.png"); }
		hr { color: #efefef; }
		p { margin-left:15px;}
	
	</style>
</head>

Dupa cum am mentionat anterior, pentru a plasa CSS in HTML vom folosi tagul <style> impreuna cu atributul type="text/css", pe care le vom pune 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 amestega 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 exemoplu 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.

Sa mai aruncam o privire peste exemplul in discutie:

cssstyle="text-align:right; color:green; font-family:'times new roman'; margin-left:15px;"

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:

cssstyle="text-align:right; color:green; font-family:"

Restul codului CSS fiind ignorat.

Prevalenta metodelor de a insera CSS in documentele HTML

Dupa cum am spus codul CSS se poate insera in HTML dupa cum urmeaza:

  • fisier extern (.css)
  • intern - in head
  • in tagul care se vrea personalizat (inline)

Voi adauga acum si cea de-a 4-a modalitate si anume:

  • toate cele trei anterioare.

Ce se intampla insa 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/imagine.png"); }
		hr { color: #efefef;}
		p { margin-left: 15px;}
	</style>

	<link rel="stylesheet" type="text/css" href="fisier_extern.css" />

</head>