CSS/Selettori: differenze tra le versioni

Contenuto cancellato Contenuto aggiunto
Ramac (discussione | contributi)
Ramac (discussione | contributi)
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. &Egrave;È possibile inoltre stabilire sottoclassi, la cui sintassi è
<source lang=css>
elemento.classe.sottoclasse { dichiarazioni }
Riga 45:
</source>
Il loro uso è legato soprattuto ai tag <code>&lt;a&gt;</code>; gli stati definibili per i link sono:
*<code> '''link</code> ''' indica lo stato di un collegamento non ancora visitato
*<code> '''visited</code> ''' indica lo stato di un collegamento già visitato
*<code> '''hover</code> ''' indica lo stato di un collegamento quanto vi passa sopra il mouse. Una volta che il mouse esce dal link, viene ripreso lo stile definito da <code>link</code> o da <code>visited</code>
*<code> '''active</code> ''' indica lo stato di un collegamento quando l'utente fa clic su di esso
Un altro stato definibile è <code>'''focus</code>''', utilizzato soprattuto per i campi dei form, che identifica lo stato di un elemento che ha ottenuto il focus da parte dell'utente. Una ulteriore pseudo-classe è associata alla lingua dell'utente. Ad esempio:
<source lang=css>
elemento:lang(it) //definizione per utenti italiani
elemento:lang(en) //definizione per utenti anglosassoni
</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 }