CSS: Fogli di stile
I selettori
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.
body {background: #000000;}
p {color: #FFFFFF; font: 12px arial, sans-serif;}
table {width: 600px;}
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.
* {background: white;}
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.
table p {color: red;}
/* saranno in rosso tutti gli elementi p presenti nelle tabelle */
/* 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).
p > strong {color: red;}
/* saranno in rosso solo gli elementi strong figli di un paragrafo */
/* 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).
p + div {color: red;}
/* saranno in rosso solo gli elementi div immediatamente vicini a un paragrafo */
/* 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.
elemento [attributo]
/* attributo semplice, per gli elementi che hanno nel codice un certo attributo */
elemento [attributo = "valore"]
/* attributo con valore, per gli elementi che hanno come valore la stringa definita */
elemento [attributo t= "valore"]
/* attributo con una stringa nel valore, per gli elementi il cui valore dichiarato contenga la stringa dichiarata nella regola */
elemento [attributo |= "valore"]
/* attributo il cui valore inizia con una stringa, per gli elementi con valore che inizia con la stringa dichiarata nella regola */
/* attributo semplice, per gli elementi che hanno nel codice un certo attributo */
elemento [attributo = "valore"]
/* attributo con valore, per gli elementi che hanno come valore la stringa definita */
elemento [attributo t= "valore"]
/* attributo con una stringa nel valore, per gli elementi il cui valore dichiarato contenga la stringa dichiarata nella regola */
elemento [attributo |= "valore"]
/* attributo il cui valore inizia con una stringa, per gli elementi con valore che inizia con la stringa dichiarata nella regola */
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:
<div class="testorosso">....</div>
Esempio della sua definizione nel CSS:
.testorosso {color: red;} /* applicabile a tutti gli elementi HTML */
Varianti di sintassi:
div.testorosso {color: red;}
/* 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 */
/* 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:
<p id="primoparagrafo">...</div>
Nel CSS:
#primoparagrafo {color: red;}
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.
a:link {color: red;}
/* 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 */
/* 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.
:first-letter per formattare solo la prima lettera dell'elemento a cui è applicato
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: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 */
:first-line per formattare solo la prima riga. La sintassi è identica a :first-letter
:before per inserire un contenuto definito nel CSS prima del tag HTML cui si riferisce
p:before {content: url(immagine.png);}
p:before {content: "Inizio paragrafo>";}
p:before {content: url(immagine.png);}
p:before {content: "Inizio paragrafo>";}
:after è identico a :before ma il contenuto viene inserito dopo l'elemento specificato.
p:before {content: url(immagine.png);}
p:before {content: "Fine paragrafo.";}
p:before {content: url(immagine.png);}
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); /* sintassi più compatibile */
@import url("style.css");
@import "style.css";
È possibile anche associare ad un file esterno l'attributo media.@import url("style.css");
@import "style.css";
@import url(schermo.css) screen;
@import url(stampa.css) print, embossed;
@import url(stampa.css) print, embossed;
@media per definire una serie di regole applicabili al dispositivo definito.
@media screen {
h1 {color: red;}
}
@media print {
h1 {color: black;}
}
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.
@charset "iso-8859-1"
@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-face {
font-family: ciclofont;
src: url("http://www.nomedominio.it/fonts/ciclofont.tt");
}
font-family: ciclofont;
src: url("http://www.nomedominio.it/fonts/ciclofont.tt");
}
Vedi anche
Tutti i loghi e i marchi registrati presenti in questo sito sono dei rispettivi proprietari. La responsabilità sui contenuti è dei rispettivi autori.
Tutto il resto è Copyleft Zingarelli.biz - la comunicazione con ogni mezzo necessario.
