Embedded Files
Le regole CSS prevedono una varietà di selettori che consentono di selezionare gli elementi HTML a cui applicare le regole di stile.
Selettori
I principali selettori contemplati da CSS sono:
Selettore di tipo (Type Selector): questo selettore seleziona tutti gli elementi di un determinato tipo. Ad esempio, il selettore p selezionerà tutti i paragrafi HTML.
Esempio:
p {
color: blue;
}
Selettore di classe (Class Selector): questo selettore seleziona elementi con un attributo class specifico. È preceduto da un punto (.) seguito dal nome della classe. Per avere effetto gli elementi HTML devono fare riferimento alla classe.
Esempio:
Regola CSS:
.highlight {
background-color: yellow;
}
Elemento HTML:
<p class="highlight">Questo è un paragrafo con classe "highlight".</p>
Selettore di ID (ID Selector): questo selettore seleziona un elemento con un attributo id specifico. È preceduto da un cancelletto (#) seguito dall'ID. Per avere effetto gli elementi HTML devono fare riferimento all'ID.
Esempio:
Regola CSS:
#highlight-paragraph {
background-color: #ffffcc;
color: #FF0000;
}
Elemento HTML:
<p id="highlight-paragraph">Questo è un paragrafo con uno stile specifico grazie al selettore di ID.</p>
Selettore universale (Universal Selector): questo selettore seleziona tutti gli elementi HTML. È rappresentato da un asterisco (*). Si applica a tutti gli elementi HTML per i quali quelle regole hanno senso.
Esempio:
* {
color: blue;
}
Gerarchia
E' possibile che più selettori selezionino lo stesso elemento HTML. In questo caso si applicherà uno solo di tali selettori nel rispetto della seguente gerarchia:
Selettore di ID (priorità massima)
Selettore di Classe
Selettore di Tipo
Selettore universale (priorità minima)
Selettori combinati
Le regole CSS consentono di utilizzare più selettori contemporaneamente per applicare stili a più elementi o a un insieme specifico di elementi.
E' possibile combinare più selettori in vari modi. Alcune possibilità sono elencate di seguito.
Selettori Multipli separati da virgola: è possibile applicare stili a più elementi contemporaneamente separando i selettori con virgole.
Esempio:
h1, h2, h3 {
color: #333;
font-family: Arial, sans-serif;
}
Selettori Discendenti: è possibile definire uno stile per tutti gli elementi discendenti all'interno di un elemento specifico.
Esempio:
.mia-classe p {
list-style-type: square;
}
la regola di stile verrà applicata agli elementi p che sono discendenti di un elemento (ad esempio un div) di classe mia-classe.
Sito: 7ecnologie
Sezione: 18. HTML & CSS
Capitolo: 06. Selettori CSS
Indice dei capitoli: 00. Risorse - 01. Ambiente di sviluppo - 02. HTML: introduzione - 03. Struttura di un documento HTML - 04. Tag HTML - 05. CSS: introduzione - 06. Selettori CSS - 07. Regole CSS - 08. Regole CSS speciali - 09. Esempi - 10. Tutorial - 98. Esercizi
Page updated
Google Sites
Report abuse