Home
Css
Guida ai fogli di stile
Le pseudo-classi e gli pseudo-elementi
Css
Guida ai fogli di stile
Le pseudo-classi e gli pseudo-elementi | Le pseudo-classi e gli pseudo-elementi |
|
|
| Scritto da Vincenzo | |
|
Pseudo-classi Le pseudo-classi servono a specificare le caratteristiche di un determinato elemento quando esso si trova in un determinato stato, esse non possono mai essere dichiarate da sole ma devono far riferimento ad un selettore. a:link{color:red; text-decoration:none;}Nell’esempio precedente, la pseudo-classe che segue il selettore ‘a’ serve a specificare lo stato del collegamento ipertestuale, (in questo caso è nella condizione normale) e quindi i collegamenti non ancora visitati saranno di colore rosso e non avranno alcuna sottolineatura, questa sintassi si applica solo per i tag <a> che contengono l’attributo “href”. I link inoltre, possono avere anche altre condizioni: a:visited /*i collegamenti già visitati*/Con queste poche regole abbiamo la possibilità di dare più interattività alla pagina: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">La pseudo-classe può anche essere associata a selettori di tipo classe per fare in modo che solo alcuni collegamenti rispettino determinate regole, nell’esempio successivo solo i collegamenti di classe “rosso” assumeranno determinate caratteristiche: a.rosso:link{color:red;font-weight:bold}oppure a:link.rosso{color:red;font-weight:bold}Le sintassi sono entrambi funzionanti, ma dato che la seconda sintassi è nata dalla specifica CSS2 non risulta compatibile con i browser più datati. Le dichiarazioni vanno richiamate in questo modo: <a class=”rosso” href=”pagina.html”>Collegamento rosso</a>Un’altra pseudo-classe molto interessante è :frist-child che purtroppo però non è supportata da tutti i browser (riescono ad interpretarla ad esempio Mozilla, Netscape 6 e 7 e Explorer 5 Mac). Essa formatta l’elemento che è primo discendente diretto di un altro elemento: p:first-child {color:yellow;}Assegna il colore giallo solo al primo elemento figlio di un altro elemento: <div>Pseudo-elementi Sono supportati solo dai browser di nuova generazione e servono per variare le caratteristiche di tutte quelle parti del documento che non sono rappresentate da nessun tag in particolare. :before Con questo pseudo-elemento abbiamo la possibilità di inserire nel documento un contenuto che non è presente nello stesso, tale contenuto verrà inserito prima dell’elemento definito nel selettore, se ad esempio vogliamo inserire una determinata stringa prima di ogni paragrafo la sintassi è la seguente: p:before{content:”Ciao”}:after E complementare a :before la differenza sta nel fatto che invece di inserire il contenuto prima dell’elemento definito dal selettore lo inserisce dopo. :frist-line Imposta la prima riga di un elemento che contiene una stringa di testo, se vogliamo ad esempio che la prima riga di ogni paragrafo sia di colore “green” ci basterà scrivere: p:frist-line{color:green;}:frist-letter Simile al precedente, solo che la formattazzione verrà applicata solo alla prima lettera e non a tutta la riga. |
| < Prec. | Pros. > |
|---|
Articoli correlati
- Introduzione ai fogli di stile (CSS)
- La compatibilità
- Inserimento dei fogli di stile (css) in un documento
- Elementi principali dei css
- I selettori (prima parte)
- Le proprietà del testo css (seconda parte)
- I selettori (seconda parte)
- Le proprietà del testo css (prima parte)
- Le unità di misura css
- La definizione dei colori css
- Le proprietà dello sfondo
- Il box model
- Effetto zoom su le immagini con i css
- Ereditarietà
- Il concetto di Cascade
- Le dimensioni (altezza e larghezza)
- I margini
- Il padding
- Effetto sfumatura sulle immagini con i css e javascript








