Structura CSS

Se intampla uneori ca oamenii sa foloseasca CSS-uri fara sa-i cunoasca structura. In cele ce urmeaza, va voi prezenta structura componentelor CSS. 

Un selector este acel element care arata carui element din pagina HTML ii va fi aplicat stilul. In exemplul urmator, "p" este elementul caruia i se va aplica marginea 1:

p
{
  margin: 1;
}

Selectoarele de tip clasa au avantajul ca pot fi aplicate mai multor elemente, de ex:

.colored
{
color: red;
}

Si toate elementele care vor fi de clasa ".colored" vor mosteni culoarea rosie.

Selectoarele de tip IDentificator atribuie un identificator unic fiecarui element, deci ar fi bine sa nu fie atribuite mai multor elemente. Daca un identificator va fi atribuit mai multor elemente, atunci validarea W3C Markup Validation va fi esuata. Exemplu de identificator:

#colored
{
color: red;
}

 

Exista si selectori contextuali:

p#colored span
{
color: blue;
}

Aceasta vor fi atribuite tutuor elementelor "span" din cadrul paragrafelor care are au atributul id "colored".

Proprietatile CSS indica cum vor arata stilurile in cadrul paginilor CSS. Exemple: margin, padding, background, border, color, etc. O lista completa poate fi consultata aici.

Utilizarea corecta a selectorilor este esentiala pentru un cod curat si frumos.