[Link]
com/ro/tutoriale-css-clsss-si-id-in-css/
Introducere - 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 num ele lui mic CSS se foloseste pentru a personaliza
tagurile HTML. In principiu HTML a fost conceput pentru a marca elementele unei
pagini:
HTML<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.
Cum formulam codul
Exemple:
h1 { color: green } efect - Titlul de marimea 1 are culoarea verde
body { color: black; } efect - Culoarea de fond a continutului este negru
p {
text-align: right; efect – textul paragrafului este aliniat la dreapta
color: green si este scris cu culoare verde
}
Sintaxa CSS este urmatoarea:
tag { atribut: value; }
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";}
Proprietatile se vor separa una de cealalta prin punct si virgula (;).
p {
text-align: right;
color: green
}
Recomandare:
Se recomanda scrierea proprietatilor una sub alta pentru o mai buna citire ulterioara a codului.
Luand in calcul aceste reguli 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 o informatie utila
pentru intelegerea codului sau o observatie.
/* Un comentariu se marcheaza asa */
Exemplu:
p {
text-align:right;
color:green; /* Ex: Aici s-a definit culoarea verde pentru elementul; "p" */
/*font-family:"times new roman";*/
/* mai sus am comentat codul pentru a nu fi interpretat de catre browser */
}
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
[Link] {text-align:center}
[Link] {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.
HTML<p class="center">Paragraf centrat.</p>
<p class="right">Paragraf aliniat la dreapta.</p>
pentru orice alt tag care are la atributul class valoarea stabilita anterior
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.
[Link] {text-align:center}
Ar trebui 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
".central".
[Link] {text-align:center}
HTML<div class="central">
<h1 class="central">Un titlu centrat</h1>
<p class="central"> Tot acest paragraf va fi centrat in mijlocul div-ului.</p>
</div>
Este de preferat utilizarea unor nume descriptive si intuitive pentru intelegerea
ulterioara a codului CSS.
Nota: Inceperea numelui cu un numar NU este recomandata. Clasele denumite
gen: ".165464" sau ".1ceva" sunt interpretate doar de browserul IntenetExplorer
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
CSS#center {
text-align:center;
color:blue;
font-family:"sans serif"
}
Diferente Id/Class
Desi atat #id cat si .class se pot folosi pentru a da stil unui element html. In
practica, se foloseste in acest scop doar atributul class. Atributul id este folosit
in general in javascript, pentru a localiza un element html si executa actiuni asupra
lui.
Pe de alta parte atributul id trebuie sa fie unic in pagina. Asta inseamna ca nu
poate exista un alt element html cu acelasi id. Prezenta mai multor elemente cu
acelasi id, poate genera errori javascript si un cod html invalid.