Tutorial CSS - Sintaxa CSS

  »   CSS  »   Tutorial CSS - Sintaxa CSS
Sintaxa CSS - Sau cum formulam codul

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

cssh1 { color: green }

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

Sa mai aruncam o privire:

cssbody { color: black; }

In traducere libera: "Culoarea de fond a continutului este negru"

Incearca si tu:

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

csstag { atribut: value; }

sau

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

cssp { font-family: "times new roman";}

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

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

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

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

css/* Un comentariu se marcheaza asa */
p {
	text-align:right;
	color:green; 	/* Ex: Aici s-a definic culoarea verde pentru elementul; "p" */
	/*font-family:"times new roman";*/  
	/* mai sus am comentat codul pentru a nu fi interpretat de catre browser */
}

In capitolul urmator vom aborda clase si id-urui ale CSS-ului in html.