Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza.
Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio
Informazioni: I Selettori
I CSS hanno una terminologia propria per descrivere il linguaggio CSS. Precedentemente in questa guida, abbiamo creato una stringa nel foglio di stile come questa:
strong {color: red;}
Nella terminologia dei CSS l'intera stringa è una regola (rule). La regola inizia con strong, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola.
| La parte contenuta all'interno delle parentesi graffe è la dichiarazione (declaration).
La parola chiave Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione. Questa guida si riferirà ai selettori del tipo di |
Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS.
In aggiunta al nome dei tag possono essere utilizzati anche i valori di alcuni attributi. Questa permette di usare i selettori in modo più specifico.
Esistono due attributi che hanno uno status speciale nei CSS: class e id.
L'attributo class di un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe.
Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore.
L'attributo id di un tag serve ad assegnare un id al tag. Anche in questo caso il nome è a piacere, ma deve essere unico per un dato documento.
Nel foglio di stile il selettore id si indica anteponendo il simbolo "cancelletto" (#).
<caption style="font-weight:bold; text-align:left;">Esempi </caption> Questo tag HTML ha sia un attributo class che uno id:
<P class="key" id="principal"> L'id " In un foglio di stile questa regola rende tutti gli elementi della classe
.key {color: green;}
Questa regola rende l'unico elemento con l'id
#principal {font-weight: bolder;}
|
Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore id è più specifico di un selettore class, che però è più specifico di un selettore di tipo "tag".
| I selettori possono anche essere combinati così da essere resi più specifici.
Per esempio, il selettore Non si è limitati ai due attributi speciali, Più avanti in questa guida, la pagina sulle (Tabelle) contiene informazioni sui selettori complessi basati sulle relazioni. Per informazioni complete sui selettori, consulta "Selettori" nelle specifiche CSS. |
Se un foglio di stile contiene regole in conflitto e con lo stesso grado di specificità, avrà prevalenza la regola che viene dopo nel foglio di stile.
Se si incontrano dei problemi con delle regole in conflitto si può provare a risolverli rendendo una delle due regole più specifica. Se ciò non è possibile, si può provare a spostare la regola che si intende far prevalere in fondo al foglio di stile, per far sì che abbia la priorità.
Azione: Utilizzare i selettori "class" e "id"
Apri il file HTML e duplica il paragrafo facendo copia/incolla. Quindi aggiungi gli attributi di id e class al primo paragrafo, e solo l'id al secondo, come mostrato sotto. In alternativa si può copiare e incollare quanto sotto, sostituendo l'intero file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Sample document</TITLE>
<LINK rel="stylesheet" type="text/css" href="style1.css">
</HEAD>
<BODY>
<P id="first">
<STRONG class="carrot">C</STRONG>ascading
<STRONG class="spinach">S</STRONG>tyle
<STRONG class="spinach">S</STRONG>heets
</P>
<P id="second">
<STRONG>C</STRONG>ascading
<STRONG>S</STRONG>tyle
<STRONG>S</STRONG>heets
</P>
</BODY>
</HTML>
Ora apri il file CSS. Sostituisci l'intero contenuto con:
strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
Aggiorna il browser per vedere il risultato:
| Cascading Style Sheets |
| Cascading Style Sheets |
Prova a cambiare l'ordine delle regole nel tuo file CSS: osserva come l'ordine non ha nessun effetto in questo caso.
I selettori di classe .carrot e .spinach hanno sempre la priorità su il selettore di tag strong.
Il selettore di id #first ha sempre la priorità sui selettori di classe e di tag.
Senza modificare il file HTML, aggiungi un unica regola al file CSS che mantenga il colore delle lettere iniziali, ma renda il testo del secondo paragrafo di colore blu:
Ora modifica la regola appena aggiunta (senza cambiare nient'altro) per rendere anche il testo del primo paragrafo di colore blu:
|
Cos'altro?
Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione.
Il foglio di stile inizia ad avere un aspetto complicato. La prossima pagina descrive i modi per rendere i CSS più semplici da leggere: CSS leggibili