1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: I Selettori
slug: Conoscere_i_CSS/I_Selettori
tags:
- Conoscere_i_CSS
translation_of: Learn/CSS/Building_blocks/Selectors
translation_of_original: Web/Guide/CSS/Getting_started/Selectors
---
<p>
</p><p>Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza.
</p><p>Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio
</p>
<h3 id="Informazioni:_I_Selettori" name="Informazioni:_I_Selettori"> Informazioni: I Selettori </h3>
<p>I CSS hanno una terminologia propria per descrivere il linguaggio CSS.
Precedentemente in questa guida, abbiamo creato una stringa nel foglio di stile come questa:
</p>
<div style="width: 30em;"><pre>strong {color: red;}
</pre></div>
<p>Nella terminologia dei CSS l'intera stringa è una <i>regola</i> (rule). La regola inizia con <code>strong</code>, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola.
</p>
<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
<caption>Di più...
</caption><tbody><tr>
<td> La parte contenuta all'interno delle parentesi graffe è la <i>dichiarazione</i> (declaration).
<p>La parola chiave <code>color</code> è una <i>proprietà</i> (property), e <code>red</code> è un <i>valore</i>(value).
</p><p>Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione.
</p><p>Questa guida si riferirà ai selettori del tipo di <code>strong</code> come a dei selettori <i>tag</i>.
Le specifiche dei CSS vi si riferiscono invece come a dei selettori di <i>tipo</i>.
</p>
</td></tr></tbody></table>
<p><br>
Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS.
</p><p>In aggiunta al nome dei tag possono essere utilizzati anche i valori di alcuni attributi. Questa permette di usare i selettori in modo più specifico.
</p><p>Esistono due attributi che hanno uno status speciale nei CSS: <code>class</code> e <code>id</code>.
</p><p>L'attributo <code>class</code> di un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe.
</p><p>Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore.
</p><p>L'attributo <code>id</code> di un tag serve ad assegnare un id al tag. Anche in questo caso il nome è a piacere, ma deve essere unico per un dato documento.
</p><p>Nel foglio di stile il selettore id si indica anteponendo il simbolo "cancelletto" (#).
</p>
<table style="border: 1px solid #36b; background-color: #ffe; padding: 1em;">
<caption>Esempi
</caption><tbody><tr>
<td> Questo tag HTML ha sia un attributo <code>class</code> che uno <code>id</code>:
<div style="width: 30em;"><pre>
<P class="key" id="principal">
</pre></div>
<p>L'id "<code>principal</code>" deve essere unica in tutto il documento ma gli altri tag nel documento potranno appartenere alla stessa classe ed avere quindi lo stesso valore dell'attributo <code>class</code>.
</p><p>In un foglio di stile questa regola rende tutti gli elementi della classe <code>key</code> verdi.
(Potrebbero anche non essere tutti elementi di tipo <small>P</small>.)
</p>
<div style="width: 30em;"><pre>
.key {color: green;}
</pre></div>
<p>Questa regola rende l'unico elemento con l'id <code>principal</code> in grassetto:
</p>
<div style="width: 30em;"><pre>
#principal {font-weight: bolder;}
</pre></div>
</td></tr></tbody></table>
<p><br>
Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore <code>id</code> è più specifico di un selettore <code>class</code>, che però è più specifico di un selettore di tipo "tag".
</p>
<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
<caption>Di più...
</caption><tbody><tr>
<td> I selettori possono anche essere combinati così da essere resi più specifici.
<p>Per esempio, il selettore <code>.key</code> seleziona tutti gli elementi che hanno l'attributo <code>class</code> con il valore <code>key</code>. Il selettore <code>p.key</code> seleziona solo gli elementi P che abbiano il valore <code>key</code> all'attributo <code>class</code>.
</p><p>Non si è limitati ai due attributi speciali, <code>class</code> e <code>id</code>. E' possibile specificare altri attributi utilizzando le parentesi quadre. Ad esempio, il selettore <code>{{ mediawiki.external('type=button') }}</code> seleziona tutti gli elementi che hanno l'attributo <code>type</code> con il valore <code>button</code> assegnato.
</p><p>Più avanti in questa guida, la pagina sulle (<a href="it/Conoscere_i_CSS/Tabelle">Tabelle</a>) contiene informazioni sui selettori complessi basati sulle relazioni.
</p><p>Per informazioni complete sui selettori, consulta "<a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selettori</a>" nelle specifiche CSS.
</p>
</td></tr></tbody></table>
<p><br>
Se un foglio di stile contiene regole in conflitto e con lo stesso grado di specificità, avrà prevalenza la regola che viene dopo nel foglio di stile.
</p><p>Se si incontrano dei problemi con delle regole in conflitto si può provare a risolverli rendendo una delle due regole più specifica. Se ciò non è possibile, si può provare a spostare la regola che si intende far prevalere in fondo al foglio di stile, per far sì che abbia la priorità.
</p>
<h3 id="Azione:_Utilizzare_i_selettori_.22class.22_e_.22id.22" name="Azione:_Utilizzare_i_selettori_.22class.22_e_.22id.22"> Azione: Utilizzare i selettori "class" e "id" </h3>
<p>Apri il file HTML e duplica il paragrafo facendo copia/incolla.
Quindi aggiungi gli attributi di id e class al primo paragrafo, e solo l'id al secondo, come mostrato sotto. In alternativa si può copiare e incollare quanto sotto, sostituendo l'intero file:
</p>
<div style="width: 48em; color: gray;">
<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Sample document</TITLE>
<LINK rel="stylesheet" type="text/css" href="style1.css">
</HEAD>
<BODY>
<P <strong style="color: black;">id="first"</strong>>
<STRONG <strong style="color: black;">class="carrot"</strong>>C</STRONG>ascading
<STRONG <strong style="color: black;">class="spinach"</strong>>S</STRONG>tyle
<STRONG <strong style="color: black;">class="spinach"</strong>>S</STRONG>heets
</P>
<strong style="color: black;"><P id="second">
<STRONG>C</STRONG>ascading
<STRONG>S</STRONG>tyle
<STRONG>S</STRONG>heets
</P></strong>
</BODY>
</HTML>
</pre>
</div>
<p>Ora apri il file CSS. Sostituisci l'intero contenuto con:
</p>
<div style="width: 40em;"><pre>strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
</pre></div>
<p>Aggiorna il browser per vedere il risultato:
</p>
<table style="border: 2px outset #36b; padding: 1em;">
<tbody><tr>
<td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
</td></tr>
<tr>
<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
</td></tr></tbody></table>
<p><br>
Prova a cambiare l'ordine delle regole nel tuo file CSS: osserva come l'ordine non ha nessun effetto in questo caso.
</p><p>I selettori di classe <code>.carrot</code> e <code>.spinach</code> hanno sempre la priorità su il selettore di tag <code>strong</code>.
</p><p>Il selettore di id <code>#first</code> ha sempre la priorità sui selettori di classe e di tag.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
<caption>Esercizi
</caption><tbody><tr>
<td> Senza modificare il file HTML, aggiungi un unica regola al file CSS che mantenga il colore delle lettere iniziali, ma renda il testo del secondo paragrafo di colore blu:
<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
<tbody><tr>
<td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
</td></tr>
<tr>
<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
</td></tr></tbody></table>
<p>Ora modifica la regola appena aggiunta (senza cambiare nient'altro) per rendere anche il testo del primo paragrafo di colore blu:
</p>
<table style="border: 2px outset #36b; padding: 1em; background-color: white;">
<tbody><tr>
<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets
</td></tr>
<tr>
<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets
</td></tr></tbody></table>
</td></tr></tbody></table>
<p><br>
</p>
<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4>
<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.
</p><p>Il foglio di stile inizia ad avere un aspetto complicato. La prossima pagina descrive i modi per rendere i CSS più semplici da leggere:
<b><a href="it/Conoscere_i_CSS/CSS_leggibili">CSS leggibili</a></b>
</p>{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "pl": "pl/CSS/Na_pocz\u0105tek/Selektory", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}
|
