Tutorial CSS – Introducere in CSS

De ce folosim CSS

Cu ajutorul CSS-ului putem crea pagini web simple dar si complexe folosind efecte diverse. Cu CSS putem stabili culoarea, marimea si fontul textului, deasemenea putem crea un layout (un suoport pentru elementele HTML) personalizat adaugand margine culoare sau imagine de fond si multe altele. In concluzie CSS te poate scapa de multe batai de cap, ajutandute in a mentine codul html cat mai simplu si mai ordonat.

Introducere – Ce este CSS – Generalitati

Cascading Style Sheets pe numele lui mic CSS se foloseste pentru a personaliza tagurile HTML..
In principiu HTML a fost conceput pentru a marca elementele unei pagini:

<html>
<head>
<title>……</title>
</head>
<body>
<h1>……</h1>
<p>……..</p>
</body>
</html>

Odata cu introducerea HTML 3.2 au fost introduse si atributele de personalizare a tag-urilor precum „font”, „color” etc. A fost atunci cand limbajul de programare HTML a devenit greoi. Fiecare pagina a websitului trebuia luata separat si modificate proprietatile elementelor principale.

Aceasta problema a fost rezolvata in versiunea 4.0 a HTML-ului. Toate atributele de personalizare au fost scoase si salvate intr-un fisier extern cu extensia „.css”.

In felul acesta modificand un singur fisier putem schimba forma in care sunt afisate toate paginile unui website. Putem schimba culoarea textului, fontul, marimea, putem personaliza div-uri, formulare si multe altele.

Si cam atat despre ce face si ce este CSS-ul. In capitolul urmator vom trece la lucruri mai practice si vom invata cum anume sa facem tot ce am spus ca se poate face folosind CSS.

Sintaxa CSS – Sau cum formulam codul

Sa luam un exemplu practic pe care il vom studia putin.

h1 { color: green }

Ce inseamna mai exact? Ca „Titlul de marimea 1 are culoarea verde”. Atat de simplu.

Sa mai aruncam o privire:

body { color: black }

In traducere libera: „Culoarea de fond a continutului este negru”

Incearca si tu:

p { text-align: right;color: green}

Exact la ce te gandeai si tu. Inseamna „Cai verzi pe peretele din dreapta”.

Lasand gluma la o parte am putea sa spunem ca sintaxa CSS este urmatoarea

tag { atribut: valuare }

sau

element { proprietate: valuare}

Oricare dintre cele doua expresii este adevarata.

Observatii Si reguli de scriere a codului CSS

In cazul in care valoarea elementului se compune din doua cuvinte le vom pune intre ghilimele

p { font-family: „times new roman”}

Daca vom scrie mai mult decat o proprietate le vom separa una de cealalta prin punct si virgula (;).

p { text-align: right;color: green; }

Recomandare:

Va recomand sa scrieti toate aceste propietati una sub alta pentru o mai buna citire ulterioara a codului. Deasemenea va recomand sa puneti punct si virgula dupa toate proprietatile elementului chiar daca este ultima dintr-un sir sau daca elementul are o singura proprietate. Luand in calcul acestea codul CSS ar deveni urmatorul

p {
text-align:right;
color:green;
font-family:”times new roman”;
}

O alta regula CSS spune ca mai multe elemente cu aceleasi proprietati se pot grupa dupa cum urmeaza

h1, h2, h3, p {

font-family:arial;
color:green;

}

Comentarii CSS

Comentariile in CSS au aceasi functie ca si comentariile HTML, de a specifica ce am facut intr-o anumita expresie, sau daca lipseste ceva sau orice altceva iti trece prin cap.

/*Un comentariu se marcheaza asa*/
p {
text-align:right;
color:green;
/*Un comentariu se marcheaza asa*/
font-family:”times new roman”;
}

CSS – Class si Id

Pentru a stabili in CSS o clasa de elemente cu aceleasi proprietati vom folosii atributul class sau id.

CSS – Atributul class

Clasele de elemnte in CSS pot fi stabilite pentru un singur tag HTML sau pentru orice alt tag care are la atributul class valoarea stabilita anterior. Desi suna putin cam complicat este chiar simplu. Sa ne uitam la urmatorul exemplu care stabileste o clasa in CSS.

p.center {text-align:center}
p.right {text-align:right}

Cu aceasta bucata de cod CSS am stabilit doua clase de paragrafuri, unul centrat si altul aliniat la dreapta. Acum le vom aplica in HTML.

<p>Paragraf centrat.</p>
<p>Paragraf aliniat la dreapta.</p>

In cazul in care vrem sa folosim aceasi clasa pentru mai multe elemente vom elimina tagul <p> din numele clasei.
Sa zicem ca vrem sa centram mai multe elemente. De exemplu un div, un titlu, un paragraf si o imagine. Putem folosi aceasi clasa.

.center {text-align:center}

Ar trebuii mentionat ca numele clasei „.center„, este un nume generic si nu are nimic de-a face cu actiunea asupra unui tag. Se putea numi la fel de bine si „.clatitecugem„.

.clatitecugem {text-align:center}

<div>
<h1>Un titlu centrat</h1>
<p >Clatitele cu gem sunt foarte bune, ele se fac de cate ori are chef nevasta-mea. Ma duc sa o intreb daca vrea (Tot acest paragraf va fi centrat in mijlocul div-ului).</p>
</div>

Cu toate acestea, va sfatuiesc sa folositi nume descriptive si intuitive. Sunt mult mai simple si servesc mai bine la intelegerea ulterioara a codului CSS

Nota:
Inceperea numelui cu un numar NU este recomandata. Clasele denumite gen: „.165464” sau „.6ceva” sunt interpretate doar de IE

CSS – Id

Id-ul se foloseste la fel ca si class. De fapt singura diferenta intre class si id este sintaxa de definire. Vom folosi un diez (#) in loc de punct pentru a defini id-ul in CSS

#center {
text-align:center;
color:blue
font-family:”sans serif”
}

CSS – Extern intern sau inline

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

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

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>

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

(Material preluat de pe http://www.tutorialehtml.com)

Lasă un răspuns

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s