aboutsummaryrefslogtreecommitdiff
path: root/files/it/conflicting/learn/css/building_blocks/selectors
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/it/conflicting/learn/css/building_blocks/selectors
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/it/conflicting/learn/css/building_blocks/selectors')
-rw-r--r--files/it/conflicting/learn/css/building_blocks/selectors/index.html152
1 files changed, 0 insertions, 152 deletions
diff --git a/files/it/conflicting/learn/css/building_blocks/selectors/index.html b/files/it/conflicting/learn/css/building_blocks/selectors/index.html
deleted file mode 100644
index 5d659fa8fd..0000000000
--- a/files/it/conflicting/learn/css/building_blocks/selectors/index.html
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: I Selettori
-slug: conflicting/Learn/CSS/Building_blocks/Selectors
-tags:
- - Conoscere_i_CSS
-translation_of: Learn/CSS/Building_blocks/Selectors
-translation_of_original: Web/Guide/CSS/Getting_started/Selectors
-original_slug: Conoscere_i_CSS/I_Selettori
----
-<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>
-&lt;P class="key" id="principal"&gt;
-</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">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
-&lt;HTML&gt;
- &lt;HEAD&gt;
- &lt;TITLE&gt;Sample document&lt;/TITLE&gt;
- &lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;
- &lt;/HEAD&gt;
- &lt;BODY&gt;
- &lt;P <strong style="color: black;">id="first"</strong>&gt;
- &lt;STRONG <strong style="color: black;">class="carrot"</strong>&gt;C&lt;/STRONG&gt;ascading
- &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;tyle
- &lt;STRONG <strong style="color: black;">class="spinach"</strong>&gt;S&lt;/STRONG&gt;heets
- &lt;/P&gt;
- <strong style="color: black;">&lt;P id="second"&gt;
- &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
- &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
- &lt;STRONG&gt;S&lt;/STRONG&gt;heets
- &lt;/P&gt;</strong>
- &lt;/BODY&gt;
-&lt;/HTML&gt;
-</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" } ) }}