From 30feb96f6084a2fb976a24ac01c1f4a054611b62 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:54 +0100 Subject: unslug it: move --- .../learn/css/building_blocks/selectors/index.html | 151 +++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 files/it/conflicting/learn/css/building_blocks/selectors/index.html (limited to 'files/it/conflicting/learn/css/building_blocks/selectors/index.html') diff --git a/files/it/conflicting/learn/css/building_blocks/selectors/index.html b/files/it/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..aece606365 --- /dev/null +++ b/files/it/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,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 +--- +

+

Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza. +

Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio +

+

Informazioni: I Selettori

+

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: +

+
strong {color: red;}
+
+

Nella terminologia dei CSS l'intera stringa è una regola (rule). La regola inizia con strong, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola. +

+ + +
Di più... +
La parte contenuta all'interno delle parentesi graffe è la dichiarazione (declaration). +

La parola chiave color è una proprietà (property), e red è un valore(value). +

Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione. +

Questa guida si riferirà ai selettori del tipo di strong come a dei selettori tag. +Le specifiche dei CSS vi si riferiscono invece come a dei selettori di tipo. +

+
+


+Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS. +

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. +

Esistono due attributi che hanno uno status speciale nei CSS: class e id. +

L'attributo class di un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe. +

Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore. +

L'attributo id 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. +

Nel foglio di stile il selettore id si indica anteponendo il simbolo "cancelletto" (#). +

+ + +
Esempi +
Questo tag HTML ha sia un attributo class che uno id: +
+<P class="key" id="principal">
+
+

L'id "principal" 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 class. +

In un foglio di stile questa regola rende tutti gli elementi della classe key verdi. +(Potrebbero anche non essere tutti elementi di tipo P.) +

+
+.key {color: green;}
+
+

Questa regola rende l'unico elemento con l'id principal in grassetto: +

+
+#principal {font-weight: bolder;}
+
+
+


+Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore id è più specifico di un selettore class, che però è più specifico di un selettore di tipo "tag". +

+ + +
Di più... +
I selettori possono anche essere combinati così da essere resi più specifici. +

Per esempio, il selettore .key seleziona tutti gli elementi che hanno l'attributo class con il valore key. Il selettore p.key seleziona solo gli elementi P che abbiano il valore key all'attributo class. +

Non si è limitati ai due attributi speciali, class e id. E' possibile specificare altri attributi utilizzando le parentesi quadre. Ad esempio, il selettore {{ mediawiki.external('type=button') }} seleziona tutti gli elementi che hanno l'attributo type con il valore button assegnato. +

Più avanti in questa guida, la pagina sulle (Tabelle) contiene informazioni sui selettori complessi basati sulle relazioni. +

Per informazioni complete sui selettori, consulta "Selettori" nelle specifiche CSS. +

+
+


+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. +

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à. +

+

Azione: Utilizzare i selettori "class" e "id"

+

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: +

+
+
<!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 id="first">
+      <STRONG class="carrot">C</STRONG>ascading
+      <STRONG class="spinach">S</STRONG>tyle
+      <STRONG class="spinach">S</STRONG>heets
+    </P>
+    <P id="second">
+      <STRONG>C</STRONG>ascading
+      <STRONG>S</STRONG>tyle
+      <STRONG>S</STRONG>heets
+    </P>
+  </BODY>
+</HTML>
+
+
+

Ora apri il file CSS. Sostituisci l'intero contenuto con: +

+
strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+
+

Aggiorna il browser per vedere il risultato: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+


+Prova a cambiare l'ordine delle regole nel tuo file CSS: osserva come l'ordine non ha nessun effetto in questo caso. +

I selettori di classe .carrot e .spinach hanno sempre la priorità su il selettore di tag strong. +

Il selettore di id #first ha sempre la priorità sui selettori di classe e di tag. +

+ + +
Esercizi +
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: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

Ora modifica la regola appena aggiunta (senza cambiare nient'altro) per rendere anche il testo del primo paragrafo di colore blu: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+
+


+

+

Cos'altro?

+

Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione. +

Il foglio di stile inizia ad avere un aspetto complicato. La prossima pagina descrive i modi per rendere i CSS più semplici da leggere: +CSS leggibili +

{{ 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" } ) }} -- cgit v1.2.3-54-g00ecf