Meniu principal:
CSS
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)
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>. <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 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.
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 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.
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)ConcluzieFormatarea 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><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>
Home Page | HTML | CSS | Tag-uri | Formulare HTML | Tutoriale Video | Download | Contact | Harta site
Submeniu:
