Tutorial CSS - Sintaxa CSS

Tutoriale CSS si HTML, tutoriale editare si instalare site-uri in CSS si HTML!
Avatar utilizator
DarkArms
Membru
Mesaje: 3107
Localitate: Reșița, România
Nick server: cleks
Contact:

Tutorial CSS - Sintaxa CSS

Mesaj de DarkArms » Sâm Apr 16, 2016 11:44 am

Sintaxa CSS - Sau cum formulam codul

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

Cod: Selectaţi tot

h1 { color: green }
Ce inseamna mai exact? Ca "Titlul de marimea 1 are culoarea verde". Atat de simplu.

Sa mai aruncam o privire:

Cod: Selectaţi tot

body { color: black; }
In traducere libera: "Culoarea de fond a continutului este negru"

Incearca si tu:

Cod: Selectaţi tot

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

Cod: Selectaţi tot

tag { atribut: value; }
sau

Cod: Selectaţi tot

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

Cod: Selectaţi tot

p { font-family: "times new roman";}
Daca vom scrie mai mult decat o proprietate le vom separa una de cealalta prin punct si virgula (;).

Cod: Selectaţi tot

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

Cod: Selectaţi tot

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

Cod: Selectaţi tot

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.

Cod: Selectaţi tot

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

Înapoi la “Tutoriale CSS si HTML”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator