Tutorial CSS - Extern, intern sau inline

Tutoriale CSS si HTML, tutoriale editare si instalare site-uri in CSS si HTML!
Avatar utilizator
DarkArms
Membru
Mesaje: 3107
Localitate: Reșița, România
Nick server: cleks
Contact:

Tutorial CSS - Extern, intern sau inline

Mesaj de DarkArms » Sâm Apr 16, 2016 11:57 am

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

Cod: Selectaţi tot

<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

Cod: Selectaţi tot

body { 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.

Cod: Selectaţi tot

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

Cod: Selectaţi tot

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

Cod: Selectaţi tot

style="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:

Cod: Selectaţi tot

style="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:

Formatare CSS inline (in interiorul tag-ului HTML)
Formatere CSS interna (in sectiunea head a documentului)
FormatareCSS externa (fisier .css extern)
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.

Cod: Selectaţi tot

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

Înapoi la “Tutoriale CSS si HTML”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator