CSS/Selettori: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
m fix |
|||
Riga 8:
== Elementi HTML ==
È il caso più semplice di selettore, che definisce la visualizzazione di tutti gli '''elementi HTML con un determinato nome'''. Ad esempio:
<source lang=css>p { dichiarazioni }</source>
definisce lo stile per tutti gli elementi <code>p</code> (i paragrafi) della pagina.
== ID e CLASSI ==
Un '''id''' è un selettore CSS che può essere assegnato ad un solo elemento nella pagina, identificato univocamente dall'attributo <code>id</code>. Una classe è un insieme di proprietà che può essere invece assegnato a uno o più elementi HMTL tramite l'attributo <code>class</code>. La sintassi è:
<source lang=css>
#nome_id { dichiarazioni }
Riga 28:
h1.evidenziato { dichiarazioni }
</source>
imposta uno stile diverso a seconda che la classe evidenziato sia attributa a elementi H1 e elementi P.
<source lang=css>
elemento.classe.sottoclasse { dichiarazioni }
Riga 45:
</source>
Il loro uso è legato soprattuto ai tag <code><a></code>; gli stati definibili per i link sono:
*
*
*
*
Un altro stato definibile è
<source lang=css>
</source>
È interessante la possibilità di definire uno '''stile dipendente da una pseudoclasse''' di un altro elemento. Ad esempio:
<source lang=css>
a#menu:hover div#menudiv {
position: absolute;
width: 300px;
}
</source>
Questo codice imposta uno stile per gli elementi <code>div</code> con id menudiv quando il mouse si trova sopra al link del menu.
== Gli pseudo-elementi ==
Gli '''pseudo-elementi''' identificano elementi specifici ma che non sono identificati da tag o attributi. La sintassi è:
Line 67 ⟶ 76:
== Altri tipi di selettori ==
Basandosi sulla '''gerarchia degli elementi HTML''' nella pagina è possibile definire alcuni stili particolari. In questi casi è però meglio che la pagina sia strutturata secondo gli standard [[w:XHTML|XHTML]].
*'''elementi figli''': è possibile definire uno stile per tutti gli elementi contenuti in un altro. La sintassi è:
<source lang=css>
elemento_genitore elemento_figlio { dichiarazioni }
Line 77 ⟶ 86:
</source>
:identifica tutti gli elementi <code>b</code> contenuto anche non direttamente in un elemento <code>h1</code>
*'''elementi fratelli''': il primo elemento allo stesso livello di un altro che abbia quindi lo stesso legame di parentela. La sintassi è
<source lang=css>
elemento1 + elemento2 { dichiarazioni }
|