Design

Welcome

In momentul de fata codul CSS se poate stoca sau pune in trei locuri si anume:

- fisier extern (.css)
- 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>.

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

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.

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

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

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:

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)
- in head
- in tagul care se vrea personalizat (inline)

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

- toate 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. Formatare CSS 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.

<head>

</head>

Products