Una delle possibilità dei CSS1 è quella di definire (o ridefinire) le caratteristiche degli elementi, in modi diversi. Tre di questi, ovvero la definizione nominale, quella posizionale e quella contestuale, sono quelle di cui parliamo in questa pagina. La prima, quella nominale, è il modo con cui “un elemento che si chiama in un certo modo assume determinate caratteristiche”. La seconda, è quella per cui “un elemento assume determinate caratteristiche per il fatto di trovarsi in una certa posizione all’interno del codice della pagina”. La terza è quella caratteristica che si manifesta per gli “elementi che si vengano a trovare in determinate circostanze”. Vediamo come…
Indice
Selettori, dichiarazioni e regole (Contextual Selectors)
Come scrivere un CSS
Un CSS si compone di regole, quindi il linguaggio usato per i CSS è di tipo normativo ovvero detta il comportamento degli elementi della pagina di Markup, che può essere scritta in HTML, XHTML, ecc.
Una regola è la minima parte di cui si compone un CSS; un CSS ne può contenere un numero qualunque, anche nessuna; una regola appare in questo modo:
p
{
display: inline;
}
la regola è composta da un selettore (nell’esempio “p
“), da una coppia di parentesi graffe (“{
” e “}
“) e da una o più dichiarazioni (nell’esempio: “display: inline;
“).
Una dichiarazione è composta a sua volta da una proprietà (lo scritto a sinistra dei due punti, quindi nell’esempio “display
“) e da un valore (lo scritto alla destra dei due punti, nell’esempio “inline
“); sarà chiaro a questo punto che proprietà e valore devono essere divisi dal carattere due punti (“:
“) e che la dichiarazione deve essere terminata da un punto e virgola (“;
“).
E’ tutto.
Selettori
Selettore | Significato |
---|---|
*
|
selettore universale, ovvero tutti gli elementi (non a caso il carattere viene anche letto “all”) |
h1
|
selettore di tipo: tutte le occorrenze dell’elemento h1
|
h1, h2
|
selettore di tipo: tutte le occorrenze degli elementi h1 e h2 (notate la virgola)
|
p em
|
selettore di tipo (posizionale): tutte le occorrenze dell’elemento em dentro un elemento p
|
.special
|
selettore di classe: tutti gli elementi aventi classe special
|
.special.extra
|
selettore di classe: tutti gli elementi aventi classe special e classe extra
|
h1.special
|
selettore di classe: tutte le occorrenze dell’elemento h1 aventi classe special
|
h1.special.extra
|
selettore di classe: tutte le occorrenze dell’elemento h1 aventi classe special e classe extra
|
elemento#questo {...}
|
l’elemento elemento avente id “questo”
|
td[rowspan]
|
tutti gli elementi td aventi l’attributo rowspan assegnato
|
td[rowspan="2"]
|
tutti gli elementi td aventi l’attributo rowspan assegnato a 2
|
h1 > em
|
occorrenze di un elemento em in un h1 come figlio
|
Uso delle regole nel linguaggio di Markup (HTML, XHTML, ecc.)
*
il selettore universale non deve essere (per definizione) usato esplicitamente perché si applica a tutti gli elementi.
Un selettore di tipo viene usato nel documento di Markup in maniera naturale, poiché riguarda un TAG del linguaggio, ad esempio <h1>
, <h2>
, <p>
, <li>
, ecc.
Un selettore di tipo posizionale viene usato nel documento di Markup in maniera naturale, avendo cura di annidare gli elementi in modo che la loro posizione reciproca ricada nella regola CSS, ad esempio: p em {...}
verrà utilizzata dal codice XHTML
(...) <p>Lorem ipsum <em>dolor</em> sit amet</p> (...)
ma NON dal codice
(...) <p>Lorem ipsum</p> <em>dolor</em><p> sit amet</p> (...)
perché l’elemento em
NON si trova all’interno di un elemento p
Prettamente contestuali
a:link
a:hover
a:active
a:visited
a:focus
Prettamente posizionali
elemento:first-child
Pseudoelementi
elemento:before
elemento:after
elemento:active
elemento:visited
elemento:focus
elemento:first-line
* * *
- W3C – Recommendation – CSS2 5. Selectors
1 commento su “CSS – Cascading Style Sheet: Caratteristiche nominali, posizionali e contestuali”