diff options
author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/it/conflicting/learn/css/building_blocks/selectors/index.html | |
parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
download | translated-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/index.html')
-rw-r--r-- | files/it/conflicting/learn/css/building_blocks/selectors/index.html | 152 |
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> -<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" } ) }} |