CSS Sintassi
Un CSS regola-set è composto da un selettore e un blocco di dichiarazione:
I punti di selettore per l'elemento HTML che si desidera per lo stile.
Il blocco di dichiarazione contiene una o più dichiarazioni separate da un punto e virgola.
Ogni dichiarazione include un nome di proprietà CSS e un valore, separati da due punti.
Una dichiarazione CSS si conclude sempre con un punto e virgola, e blocchi di dichiarazione sono circondati da parentesi graffe.
Nell'esempio che segue tutti i <p> elementi saranno allineato al centro, con un colore di testo rosso:
CSS selettori
Selettori CSS sono utilizzati per "find" (o selezionare) elementi HTML in base al loro nome di un elemento, id, classe, attributo, e altro ancora.
Il selettore elemento
Il selettore elemento seleziona gli elementi in base al nome dell'elemento.
È possibile selezionare tutti <p> elementi di una pagina come questa (in questo caso, tutti i <p> elementi saranno allineato al centro, con un colore di testo rosso):
Il selettore di ID
Il selettore id utilizza l'attributo id di un elemento HTML per selezionare un elemento specifico.
L'id di un elemento deve essere univoco all'interno di una pagina, in modo che il selettore di id viene utilizzato per selezionare un elemento unico!
Per selezionare un elemento con un ID specifico, scrivere un carattere cancelletto (#), seguito dal id dell'elemento.
La regola di stile di seguito verrà applicato all'elemento HTML con id="para1" :
 | Nota: Un nome id non può iniziare con un numero! |
|---|
Il selettore di classe
Il selettore di classe seleziona gli elementi con un attributo di classe specifica.
Per selezionare elementi con una classe specifica, scrivere un period (.) Carattere, seguito dal nome della classe.
Nell'esempio riportato di seguito, tutti gli elementi HTML con class="center" sarà rosso e allineato al centro:
È inoltre possibile specificare che gli elementi HTML solo specifici dovrebbero essere influenzate da una classe.
Nell'esempio che segue, solo <p> elementi con class="center" sarà allineato al centro:
elementi HTML possono anche riferirsi a più di una classe.
Nell'esempio che segue, il <p> elemento sarà designato in base alla class="center" e di class="large" :
| Nota: un nome di classe non può iniziare con un numero! |
|---|
Raggruppamento selettori
Se si dispone di elementi con le stesse definizioni di stile, come questo:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Sarà meglio raggruppare i selettori, per ridurre al minimo il codice.
Per i selettori di gruppo, separare ogni selettore con una virgola.
Nell'esempio sottostante abbiamo raggruppato i selettori del codice di cui sopra:
CSS Commenti
I commenti vengono utilizzati per spiegare il codice, e può aiutare quando si modifica il codice sorgente in un secondo momento.
I commenti sono ignorati dai browser.
Un commento CSS inizia con /* and ends with */ . I commenti possono anche estendersi su più righe:
Esempio
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»