CSS: Fogli di stile
I selettori
- Dettagli
- Ultima modifica il Sabato, 15 Ottobre 2011 08:36
Il selettore è l'elemento di cui si vogliono definire le caratteristiche visuali, cioè a cui si vogliono applicare le regole dichiarate.
Type selector
Gli elementi cui si riferisce questo selettore sono quelli dell'HTML, tutti ridefinibili tramite i CSS.
p {color: #FFFFFF; font: 12px arial, sans-serif;}
table {width: 600px;}
Universal selector
Il selettore universale è costituito dal carattere jolly asterisco. Tramite questo selettore si applicano delle regole a tutti gli elementi del documento.
Descendant selector
Il selettore discendente serve a definire delle regole per quegli elementi che in un documento siano discendenti di un altro elemento come specificato.
/* saranno in rosso tutti gli elementi p presenti nelle tabelle */
Child selector
Selettore di un elemento figlio di un altro (questo tipo di selettore potrebbe creare problemi con qualche browser non aggiornato).
/* saranno in rosso solo gli elementi strong figli di un paragrafo */
Adjacent-sibling selector
Selettore di un elemento adiacente ad un altro (questo tipo di selettore potrebbe creare problemi con qualche browser non aggiornato).
/* saranno in rosso solo gli elementi div immediatamente vicini a un paragrafo */
Attribute selector
Selettore di un elemento in funzione dei loro attributi (uso poco diffuso).
Seguono i quattro modi d'uso di questo tipo di selettore.
Class
La classe è un attributo esistente in HTML e applicabile a tutti gli elementi, è un attributo definito dall'utente che deve necessariamente essere presente nel CSS per avere effetto. La regola viene applicata a tutti quegli elementi presenti nella pagina cui è applicato.
Esempio di applicazione in HTML:
Esempio della sua definizione nel CSS:
Varianti di sintassi:
/* applicabile solo a tutti gli elementi DIV con attributo class="testorosso" */
div.testorosso.bold {color: red; font-weight: bold;}
/* applicabile solo a tutti gli elementi DIV che contengono nel nome della classe, in qualsiasi ordine, sia testorosso che bold */
Id
Anche se simile nell'uso alla classe, l'id serve in HTML ad identificare univocamente un elemento, che sarà quindi l'unico cui la regola viene applicata.
Applicazione in HTML:
Nel CSS:
Come per le classi, l'id prevede le varianti di sintassi che sono però superflue in quanto si tratta di un attributo utilizzabile una sola volta.
Pseudo-classi
Una pseudo-classe definisce un elemento al verificarsi di una condizione. La loro dichiarazione avviene sempre unitamente ad un selettore.
/* saranno rossi solo i collegamenti non ancora visitati */
a.weblink:link {color: red;}
/* saranno rossi solo i collegamenti con l'attributo class="weblink" non ancora visitati */
a:link.weblink {color: red;}
/* identico al precedente, introdotto nei CSS2 */
Pseudo-elementi
Servono a definire regole per parti di documento HTML non identificabili con una tag (solo per browser più recenti) e vanno sempre applicati a un altro selettore.
p:first-letter {font-weight: bold; font: 16px arial, sans-serif;}
/* formattazione per la prima lettera dei paragrafi */
p.primoparagrafo:first-letter {font-weight: bold; font: 16px arial, sans-serif;}
/* formattazione per la prima lettera dei paragrafi con class="primoparagrafo" */
#primoparagrafo:first-letter {font-weight: bold; font: 16px arial, sans-serif;}
/* formattazione per la prima lettera del testo definito con id primoparagrafo */
p:before {content: "Inizio paragrafo>";}
p:before {content: "Fine paragrafo.";}
@-rules
Si tratta di una serie di direttive distinguibili per avere come primo carattere @ (at).
@import per includere al documento un CSS esterno. Può essere usato in un CSS esterno o nel corpo del documento con il tag <STYLE> ma deve essere la prima regola definita, altrimenti il CSS non sarà caricato. È possibile importare anche più fogli stile.
Esempi di sintassi diverse:
@import url("style.css");
@import "style.css";
È possibile anche associare ad un file esterno l'attributo media.
@import url(stampa.css) print, embossed;
@media per definire una serie di regole applicabili al dispositivo definito.
h1 {color: red;}
}
@media print {
h1 {color: black;}
}
@charset per definire la codifica dei caratteri. Può essere usata solo in CSS esterni e deve necessariamente essere la prima dichiarazione.
@font-face per descrivere un font usato nel documento. Usato prevalentemente per inserire un carattere non comune e quindi probabilmente non presente nel computer da cui la pagina HTML viene consultata.
font-family: ciclofont;
src: url("http://www.nomedominio.it/fonts/ciclofont.tt");
}
