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 --- .../cascade_and_inheritance/index.html | 87 ++++ .../learn/css/building_blocks/selectors/index.html | 231 +++++++++++ .../learn/css/building_blocks/selettori/index.html | 231 ----------- .../first_steps/how_css_is_structured/index.html | 157 ++++++++ .../learn/css/first_steps/how_css_works/index.html | 114 ++++++ files/it/learn/css/first_steps/index.html | 43 ++ .../styling_text/definire_stili_link/index.html | 438 --------------------- .../css/styling_text/styling_links/index.html | 438 +++++++++++++++++++++ 8 files changed, 1070 insertions(+), 669 deletions(-) create mode 100644 files/it/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/it/learn/css/building_blocks/selectors/index.html delete mode 100644 files/it/learn/css/building_blocks/selettori/index.html create mode 100644 files/it/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/it/learn/css/first_steps/how_css_works/index.html create mode 100644 files/it/learn/css/first_steps/index.html delete mode 100644 files/it/learn/css/styling_text/definire_stili_link/index.html create mode 100644 files/it/learn/css/styling_text/styling_links/index.html (limited to 'files/it/learn/css') diff --git a/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..66702c1bdd --- /dev/null +++ b/files/it/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,87 @@ +--- +title: Cascata ed ereditarietà +slug: Conoscere_i_CSS/Cascata_ed_ereditarietà +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

+

Questa pagina delinea come diversi fogli di stile interagiscano in cascata e come gli elementi ereditino lo stile dai loro elementi genitori. +

Verranno aggiunte delle informazioni al foglio di stile di esempio, modificando lo stile di molte parti del documento con una sola mossa. +

link title== Headline text ==== Informazioni: Cascata ed ereditarietà == +Lo stile finale di un elemento può essere definito in molti luoghi diversi, che possono intergire fra loro in modo complesso. +Questa complessa interazione rende i CSS molto potenti, ma può anche rendere una correzione confusa e difficile. +

Le tre sorgenti principali di informazioni sullo stile che generano la cascata sono: +

+ +

Lo stile dell'utente modifica lo stile predefinito del browser. Lo stile dell'autore del documento modifica ulteriormente lo stile. In questa guida tu sei l'autore del documento di esempio, e verrà considerato solo il foglio di stile dell'autore. +

+ +
Esempio +Quando leggi questo articolo della guida nel tuo browser Mozilla, parte dello stile che vedi proviene da quello predefinito del browser per l'HTML. Un altra parte potrebbe essere definita dalle impostazioni del browser nel menu Strumenti>Opzioni, o dal file userContent.css nel tuo profilo del browser. Un'altra parte deriva infine dal foglio di stile associato al documento dal server del wiki. +
+


+Quando apri il documento di esempio con il browser, gli elementi STRONG sono più marcati del resto del testo. Questo effetto deriva dallo stile predefinito del browser per l'HTML. +

Gli elementi STRONG sono rossi. Questo è stato definto dal tuo foglio di stile di esempio. +

Gli elementi STRONG inoltre ereditano gran parte dello stile dell'elemento P, poiché ne sono figli. Allo stesso modo l'elemento P eredita gran parte dello stile dall'elemento BODY. +

Negi stili in cascata, il foglio di stile dell'autore ha la precedenza, quindi viene il foglio dell'utente ed infine quello predefinito del browser. +

Per gli stili ereditati, lo stile proprio del nodo figlio ha la precedenza su quello ereditato dal genitore. +

Questo non è l'unico ordine di precedenze che viene applicato, ma lo riprenderemo più avanti nella guida. +

+ + +
Di più... +
I CSS forniscono un modo all'utente per prevalere sullo stile definito dall'autore del documento, utilizzando la parola chiave !important. +

Questo significa anche che l'autore del documento non può prevedere esattamente cosa vedrà l'utente. +

Per consocere tutti i dettagli circa la cascata e l'ereditarietà, guarda la sezione relativa a "Assegnare valori alle proprietà, Cascata ed ereditarietà"(EN) nelle specifiche dei CSS. +

+
+

Azione: Utilizzare l'ereditarietà

+

Modifica il tuo file CSS di esempio. +

Aggiungi la seguente linea facendo copia e incolla. +Non è molto importante dove viene incollata. In ogni caso è più logico aggiungerla all'inizio perché nel documento l'elemento P è genitore dell'elemento STRONG: +

+
p {color: blue; text-decoration: underline;}
+
+

Ora aggiorna il browser e nota i cambiamenti al docuemnto di esempio. +La sottolineatura influenza tutto il testo contenuto nel paragrafo, incluse le lettere iniziali. +L'elemento STRON ha ereditato lo stile sottolineato dall'elemento genitore P. +

Ma gli elementi STRONG continuano ad essere di colore rosso. Questo perché il colore rosso è lo stile proprio dell'elemento, che prevale sull'elemento blu dell'elemento P. +

+ + +
+ + +
Prima +
Cascading Style Sheets +
+		 + + +
Dopo +
Cascading Style Sheets +
+
+


+

+ + +
Esercizi +
Cambia il foglio di stile per fare in modo che solo le lettere rosse risultino sottolineate: + + +
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 d'esempio specifica lo stile per i tag P e STRONG modificandone lo stile per tutto il documento. La prossima pagina spiega come specificare lo stile in modo più selettivo: +I Selettori +

{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pl": "pl/CSS/Na_pocz\u0105tek/Kaskadowo\u015b\u0107_i_dziedziczenie", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a" } ) }} diff --git a/files/it/learn/css/building_blocks/selectors/index.html b/files/it/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..cf0f6662cf --- /dev/null +++ b/files/it/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,231 @@ +--- +title: selettori CSS +slug: Learn/CSS/Building_blocks/Selettori +tags: + - Attributo + - CSS + - Classe + - Impara + - Principiante + - Pseudo + - Selettori +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenze informatiche di base, istallazione di software fondamentali, conoscenze base di gestione dei file, basi di HTML (vedi Introduzione ad HTML) ed avere un'idea di base di come funzionano i CDD (vedi primi passi con i CSS).
Obbiettivo:Apprendere nel dettaglio il funzionamento dei selettori CSS.
+ +

Cos'é un selettore?

+ +

Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come soggetto del selettore.

+ +

Some code with the h1 highlighted.

+ +

Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi h1 oppure una classe come .special.

+ +

Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in Level 3 Selectors specification (specifica sui selettori di livello 3),  la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.

+ +

Liste di selettori

+ +

Nel caso in cui tu abbia  piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un h1 ed anche per la classe .special, potrei scriverlo nel seguente modo.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.

+ +
h1, .special {
+  color: blue;
+}
+ +

Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.

+ +

Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore h1 non presenta errori e la sua dichiarazione verrá eseguita correttamente.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Tuttavia se combinati, né il selettore h1 né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Tipi di selettori

+ +

I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.

+ +

Selettori di tipo, classe e ID

+ +

Questo gruppo include i selettori usati per gli elementi della pagina HTML come <h1>.

+ +
h1 { }
+ +

Include inoltre i selettori di classe:

+ +
.box { }
+ +

oppure di ID:

+ +
#unique { }
+ +

Selettori di attributo

+ +

Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:

+ +
a[title] { }
+ +

Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:

+ +
a[href="https://example.com"] { }
+ +

Pseudo-classi e pseudo-elementi

+ +

Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe :hover seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:

+ +
a:hover { }
+ +

Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, ::first-line seleziona sempre la prima riga di testo di un elemento (un elemento <p> nell'esempio seguente), come se questa fosse messa dentro un blocco  <span>  e selezionata.

+ +
p::first-line { }
+ +

Combinatori

+ +

L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <article> utilizzando il combinatore (>):

+ +
article > p { }
+ +

Prossimo passo

+ +

Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei selettori di tipo, classe e id.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Tabella riassuntiva dei selettori

+ +

La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelettoreEsempioTutorial sui CSS
Selettore di tipoh1 {  }Selettore di tipo
Selettore universale* {  }Selettore universale
Selettore di classe.box {  }Selettore di classe
Selettore di ID#unique { }Selettore di ID
Selettore di attributoa[title] {  }Selettore di attributo
Pseudo-classip:first-child { }Pseudo-classi
Pseudo-elementip::first-line { }Pseudo-elementi
Combinatore di discendenzaarticle pCombinatore di discendenza
Combinatore di figliarticle > pCombinatore di figli
Combinatore di fratelli adiacentih1 + pCombinatore di fratelli adiacenti
Combinatore di fratelli genericih1 ~ pCombinatore di fratelli generici
+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/it/learn/css/building_blocks/selettori/index.html b/files/it/learn/css/building_blocks/selettori/index.html deleted file mode 100644 index cf0f6662cf..0000000000 --- a/files/it/learn/css/building_blocks/selettori/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: selettori CSS -slug: Learn/CSS/Building_blocks/Selettori -tags: - - Attributo - - CSS - - Classe - - Impara - - Principiante - - Pseudo - - Selettori -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

Nei {{Glossary("CSS")}}, i selettori vengono usati per selezionare elementi {{glossary("HTML")}} della pagina web di cui vogliamo curare lo stile. Esiste una grande varietá di selettori CSS, rendendo possibile selezionare gli elementi con particolare accuratezza. In questo articolo e nelle sue sezioni ci soffermeremo nel dettaglio sui diversi tipi di selettori, osservandone il funzionamento.

- - - - - - - - - - - - -
Prerequisiti:Conoscenze informatiche di base, istallazione di software fondamentali, conoscenze base di gestione dei file, basi di HTML (vedi Introduzione ad HTML) ed avere un'idea di base di come funzionano i CDD (vedi primi passi con i CSS).
Obbiettivo:Apprendere nel dettaglio il funzionamento dei selettori CSS.
- -

Cos'é un selettore?

- -

Hai giá incontrato i selettori prima di questo articolo: un selettore CSS corrisponde infatti alla prima parte di una regola e non é altro che un insieme di termini che dicono al browser quali elementi HTML devono essere selezionati in modo che vi si possano applicare le proprietá contenute dentro la regola. L'elemento o gli elementi selezionati tramite un selettore sono noti come soggetto del selettore.

- -

Some code with the h1 highlighted.

- -

Nei precedenti articoli hai incontrato diversi selettori e imparato che alcuni di essi effettuano la selezione in modi differenti — selezionando ad esempio tutti gli elementi h1 oppure una classe come .special.

- -

Nei CSS, i selettori sono definiti nelle specifiche sui selettori CSS e come ogni parte dei CSS necessitano del supporto del browser per poter funzionare. La maggior parte dei selettori che incontrerai sono definiti in Level 3 Selectors specification (specifica sui selettori di livello 3),  la quale é una raccolta curata e condivisa e i selettori lí elencati hanno il pieno supporto della maggior parte dei browser.

- -

Liste di selettori

- -

Nel caso in cui tu abbia  piú elementi che condividano le stesse regole di CSS, allora piú selettori individuali possono essere combinati in una lista. Ad esempio, se mi trovo ad avere lo stesso CSS per un h1 ed anche per la classe .special, potrei scriverlo nel seguente modo.

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

Per sintetizzare questo codice posso unire i due selettori dentro una lista, separandoli con una virgola.

- -
h1, .special {
-  color: blue;
-}
- -

Sono ammessi spazi bianchi prima o dopo la virgola. Potresti considerare piú ordinato e leggibile il codice ponendo ogni selettore su una singola riga.

- -
h1,
-.special {
-  color: blue;
-}
- -

Dall'esempio precedente, prova a combinare i due selettori con la stessa dichiarazione. Dovresti ottenere lo stesso risultando visivo pur modificando la sintassi del codice.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

- -

Quando raggruppi i selettori in quasto modo, se alcuni di essi non sono validi l'intera regola verrá ignorata.

- -

Nell'esempio seguente, il selettore di classe non é corretto e pertanto la sua dichiarazione verrá ignorata, mentre il selettore h1 non presenta errori e la sua dichiarazione verrá eseguita correttamente.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

Tuttavia se combinati, né il selettore h1 né il selettore di classe verranno considerati e l'intera regola sará quindi ignorata.

- -
h1, ..special {
-  color: blue;
-}
- -

Tipi di selettori

- -

I selettori sono raggruppabili per tipo e conoscerne la classificazione é il primo passo per poter ricercare agevolmente quello giusto per ogni occorrenza. In questa sezione vedremo nel dettaglio i differenti gruppi di selettori.

- -

Selettori di tipo, classe e ID

- -

Questo gruppo include i selettori usati per gli elementi della pagina HTML come <h1>.

- -
h1 { }
- -

Include inoltre i selettori di classe:

- -
.box { }
- -

oppure di ID:

- -
#unique { }
- -

Selettori di attributo

- -

Questo gruppo di selettori fornisce diversi modi per selezionare elementi tramite la presenza di un particolare attributo su di essi:

- -
a[title] { }
- -

Oppure seleziona basandosi sulla presenza di un attributo con uno specifico valore:

- -
a[href="https://example.com"] { }
- -

Pseudo-classi e pseudo-elementi

- -

Questo gruppo di selettori include le pseudo-classi, le cui selezioni hanno effetto solo in determinate condizioni. Ad esempio, la pseudo classe :hover seleziona un elemento solo quando su questo vi passa sopra il puntatore del mouse:

- -
a:hover { }
- -

Include inoltre gli pseudo-elementi, i quali selezionano solo una parte dell'elemento in questione. Ad esempio, ::first-line seleziona sempre la prima riga di testo di un elemento (un elemento <p> nell'esempio seguente), come se questa fosse messa dentro un blocco  <span>  e selezionata.

- -
p::first-line { }
- -

Combinatori

- -

L'ultimo gruppo di selettori combina gli altri selettori in modo da poter selezionare piú elementi della pagina. Il seguente esempio seleziona i paragrafi che sono figli di <article> utilizzando il combinatore (>):

- -
article > p { }
- -

Prossimo passo

- -

Puoi dare un'occhiata alla seguente tabella riassuntiva sui selettori, visitare i link di questa guida o di MDN, relativi al tipo di selettore corrispondente, oppure proseguire con la tua esplorazione alla scoperta dei selettori di tipo, classe e id.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Tabella riassuntiva dei selettori

- -

La tabella sottostante ti fornisce una panoramica dei selettori incontrati con i relativi link alle pagine di questa guida che mostrano come usarli. Vi sono inoltre anche dei link alle pagine MDN del corrispondente tipo di selettore dove é possibile ottenere informazioni su supporto e compatibilitá dei principali browser. Puoi usare questa tabella come punto d'appoggio per ripassare o ricercare i selettori o, piú in generale, mentre ti eserciti coi CSS.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelettoreEsempioTutorial sui CSS
Selettore di tipoh1 {  }Selettore di tipo
Selettore universale* {  }Selettore universale
Selettore di classe.box {  }Selettore di classe
Selettore di ID#unique { }Selettore di ID
Selettore di attributoa[title] {  }Selettore di attributo
Pseudo-classip:first-child { }Pseudo-classi
Pseudo-elementip::first-line { }Pseudo-elementi
Combinatore di discendenzaarticle pCombinatore di discendenza
Combinatore di figliarticle > pCombinatore di figli
Combinatore di fratelli adiacentih1 + pCombinatore di fratelli adiacenti
Combinatore di fratelli genericih1 ~ pCombinatore di fratelli generici
- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/it/learn/css/first_steps/how_css_is_structured/index.html b/files/it/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..7942e9a4a9 --- /dev/null +++ b/files/it/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,157 @@ +--- +title: CSS leggibili +slug: Conoscere_i_CSS/CSS_leggibili +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

+

In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso. +

Impareremo a cambiare l'aspetto del file CSS di prova per renderlo più leggibile. +

+

Informazioni: CSS leggibili

+

E' possibile aggiungere spazi bianchi e commenti ai propri fogli di stile al fine di renderli più leggibili. +Inoltre si possono raggruppare insieme i selettori quando viene applicata a diversi elementi la stessa regola di stile. +

+

Spazi bianchi

+

Spazi bianchi significa proprio spaziatura, tabulazione e nuove linee. +Si possono aggiungere degli spazi bianchi per rendere i fogli di stile più leggibili. +

Al momento il file CSS di prova ha una regola per ogni linea ed il minimo degli spazi bianchi. In un foglio di stile complesso questa struttura sarebbe molto difficile da decifrare, rendendo la manutenzione e la modifica del foglio di stile alquanto faticose. +

La struttura da scegliere generalmente risponde alle preferenze personali dell'autore, ma in un progetto condiviso potrebbero esistere delle particolari convenzioni comuni. +

+ + +
Esempi +
Alcuni autori preferisono una struttura molto compatta (simile a quella utilizzata fin ora per il file di esempio), dividendo la linea solo quando diventa troppo lunga: +
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+

Altri preferiscono il metodo "una proprietà per linea": +

+
+
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+
+

Altri ancora utilizzano l'indentazione—due, quattro spazi, o una tabulazione sono comuni: +

+
+
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+
+

Alcuni autori addirittura preferiscono allineare tutto verticalmente (ma una struttura simile risulta difficile da mantenere): +

+
+
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+
+

Alcuni usano la tabulazione. Altri solo gli spazi. +

+
+

Commenti

+

I commenti nei CSS iniziano con /* e terminano con */. +

I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, sia per isolare temporaneamente alcune parti di codice per scopi di test. +

Per isolare una parte del foglio di stile è sufficiente porre quella parte all'interno di un commento. In tal modo il browser la ignorerà. Occorre prestare molta attenzione al punto di inizio e di fine del commento. +Il resto del documento deve continuare ad avere una sintassi corretta. +

+ + +
Esempio +
Un commento vero e proprio: +
+
/* stile per la lettere iniziale C del primo paragrafo */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+

Un isolamento: +

+
+
/* isolo una porzione del codice
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+ */
+
+
+
+

Raggruppare i selettori

+

Se molti elementi hanno lo stesso stile è possibile raggruppare i selettori creando un gruppo separato da virgole. +La dichiarazione verrà applicata a tutti gli elementi selezionati. +

Altrove nel foglio di stile sarà anche possibile trattare individualmente gli stessi selettori, per applicare delle regole di stile personalizzate. +

+ + +
Esempi +
Questa regola rende gli elementi H1, H2 e H3 dello stesso colore. +

E' comodo indicare tale colore in un solo posto per rendere più agevole e veloce l'eventuale modifica. +

+
+
/* colore dei titoli */
+h1, h2, h3 {color: navy;}
+
+
+
+

Azione: Aggiungere commenti e migliorare la struttura

+

Modifica il file CSS e assicurati che al suo interno contenga le seguenti regole (in qualsiasi ordine): +

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

Rendi il foglio di stile più leggibile strutturandolo nel modo che ritieni più logico ed aggiungendo spazi bianchi e commenti dove pare opportuno. +

Salva il file ed aggiorna la finestra del browser per assicurarti che i cambiamenti effettuati non influiscano sul funzionamento del foglio di stile: +

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


+

+ + +
Esercizi +
Isola una parte del foglio di stile, senza modificare nient'altro, per rendere la prima lettera del documento rossa: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

(Esiste più di un modo per ottenere questo risultato.) +

+
+


+

+

Cos'altro?

+

Il foglio di stile dell'esempio utilizza solamente il testo corsivo (italic) o il testo sottolineato (underline). +La prossima pagina della guida spiega ulteriori modi per specificare l'aspetto del testo in un documento: +Stili del testo +

{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} diff --git a/files/it/learn/css/first_steps/how_css_works/index.html b/files/it/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..9e65e269af --- /dev/null +++ b/files/it/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,114 @@ +--- +title: Cosa è CSS +slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/it/docs/CSS/Getting_Started", "Getting started")}} Questa è la prima sezione dell'esercitazione "Iniziare (Esercitazione di CSS)" che spiega cosa è CSS. Si creerà un semplice documento su cui lavorare nelle pagine seguenti

+ +

Informazione: Cosa è CSS?

+ +

Cascading Style Sheets (CSS) è un linguaggio per specificare come i documenti sono presentati all'utente.

+ +

Un documento è un insieme di informazioni strutturate utilizzando un linguaggio a marcatori.

+ +
+
Esempi
+ +

Una pagine web come quella che si legge è un documento.
+ Le informazioni che si vedono in una pagina web sono strutturare utilizzando il linguaggio a marcatori HTML  (HyperText Markup Language).
+ Le finestre di dialogo, anche chiamate finestre modali, di una applicazione sono spesso documenti.
+ Tali finestre modali potrebbero essere strutturate utilizzano un linguaggio a marcatori, come XUL. E' questo il caso frequente delle applicazioni di Mozilla, ma non è il caso comune.

+
+ +

In questa esercitazione, i riquadri titolati Maggiori dettagli come quello seguente contengono informazioni facoltative. Se hai fretta di andare avanti con l'esercitazione potresti saltarli, e forse tornare a leggerli più tardi. Diversamente leggerli quando li incontri, e forse seguire i link per imparare di più.

+ +
+
Maggiori dettagli
+ +

Un documento non è un file. Potrebbe o non potrebbe essere memorizzato in un file.

+ +

Per esempio, il documento che stai leggendo non è memorizzaotin un file. Quando il browser web richiede questa pagina, il server interroga un database e genera il documento, traendone le sue parti da molti file. D'altra parte, in questa esercitazione si lavora con documenti che sono memorizzati nei file.

+ +

Per maggiori informazioni sui documenti e i linguaggi a amrcatori, si vedano altre parti di questo sito web—per esempio:

+ + + + + + + + + + + + + + + + + + + + +
HTMLper le pagine web
XMLper i documenti strutturati in generale
SVGper la grafica
XULper le interfacce utente in Mozillafor user interfaces in Mozilla
+ +

Nella Parte II di questa esercitazione si vedranno esempi di questi linguaggi a marcatore.

+
+ +

Presentare un documento ad un utente significa convertirlo in una forma utilizzabile dall'essere umano. Browser, come FireFox, Chrome o Internet Explorer, sono progettati per presentare visivamente i documenti — per esempio, sullo schermo di un computer, un proiettore o una stampante.

+ + + + + + + + +
 
+
Maggiori dettagli
+ CSS non è solo per i browser, e non solo per presentazioni visive. Nella terminologia fomale di CSS, il programma che presenta un documento a un utente è chiamatouser agent (UA). Un browser è solo un tipo di UA. Comunque, nella Parte I dell'esercitazione si lavora esclusivamente con CSS in un browser. + +

Per qualche definizione formale della terminologia relativa a CSS, vedere le Definizioni nelle specifiche CSS.

+
+ +

Azione: Creare un documento

+ +

Utilizzare il proprio computer per creare una nuova cartella ed un nuovo file di testo al suo interno. Il file conterrà il tuo documento.
+ Copia ed incolla il codice HTML mostrato sotto. Salva il file utilizzando il nome doc1.html

+ +
<!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+ +

Nel proprio browser, aprire una nuova scheda o una nuova finestra, e aprirvi il file.

+ +

Si dovrebbe vedere il testo con le lettere iniziali in grassetto, come questo:

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

Quello che vedi nel tuo browser potrebbe non apparire esattametne uguale a questo, a causa delle impostazioni utilizzate dal browser e da questo wiki. Se ci sono differenze di font, spaziatura e colori, non ha importanza.

+ +

E poi?

+ +

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Il documento ancora non utilizza CSS. Nella prossima sezione si utilizzerà CSS per specificare lo stile.

diff --git a/files/it/learn/css/first_steps/index.html b/files/it/learn/css/first_steps/index.html new file mode 100644 index 0000000000..106bf156d6 --- /dev/null +++ b/files/it/learn/css/first_steps/index.html @@ -0,0 +1,43 @@ +--- +title: Iniziare (Esercitazione di CSS) +slug: Conoscere_i_CSS +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

Rivolto ai principianti assoluti, questa esercitazione di CSS per principianti presenta il Cascading Style Sheets (CSS). Guida l'utente attraverso le caratteristiche di base del linguaggio con esempi pratici che possono essere provati sul proprio computer e illustra le caratteristiche standard di CSS che funzionano nei moderni browser.

+ +

Questa esercitazione è principalmente per principianti di CSS, ma va bene anche per chi ha qualche conoscenza base di CSS. Se sei un esperto di CSS qusta esercitazione probabilmente non è molto utile, la pagina principale di CSS elenca risorse più avanzate.

+ + + +

Di cosa hai bisogno per iniziare?

+ +

Per ottenere il massimo da questa esercitazione, hai bisogno di un editor per file di testo e un moderno browser. Devi anche avere una minima conoscenza del loro utilizzo.

+ +

Se non vuoi modificare i file, allora puoi anche solo leggere l'esercitazione e guardare le immagini, ma è il modo meno efficace per imparare.

+ +

Nota:  CSS fornisce un modo di lavorare con il colore, quindi parte di questa esercitazione dipende dal colore. Puoi utilizzare queste parti dell'esercitazione semplicemente se ha un display a colori e una normale visione dei colori.

+ +

Come utilizzare questa esercitazione

+ +

Per utilizzare questa esercitazione, leggi le pagine attentamente e in sequenza. Se salti una pagina, ti potresti trovare in difficoltà nel compredere le pagine successive.

+ +

In ogni pagina, puoi usare la sezione Informazioni per capire come funziona CSS. Usare la sezione Azione per provare ad utilizzare CSS sul proprio computer.

+ +

Per mettere alla prova la propria comprensione, cogli la sfida alla fine di ogni pagina. Le soluzioni alle sfide sono linkate sotto le sfide stesse, quindi non si ha bisogno di guardarle se non lo si vuole.

+ +

Per comprendere CSS in maggiore profondità, leggere le informazioni che si trovano nei box titolati Maggiori dettagli. Utilizzare i collegamenti presenti per trovare informazioni di riferimento su CSS.

+ +

Esercitazione Parte II

+ +

Una seconda parte dell'esercitazione fornisce esempi che mostrano la visibilità di CSS utilizzato con altre tecnologie web e Mozilla

+ +
    +
  1. JavaScript
    2. +
  2. Grafica SVG
    3. +
  3. Dati XML
    4. +
  4. Collegamento XBL
    5. +
  5. Interfacce utente XUL
    6. +
+ +

 

diff --git a/files/it/learn/css/styling_text/definire_stili_link/index.html b/files/it/learn/css/styling_text/definire_stili_link/index.html deleted file mode 100644 index b6bdc7a6fa..0000000000 --- a/files/it/learn/css/styling_text/definire_stili_link/index.html +++ /dev/null @@ -1,438 +0,0 @@ ---- -title: Definire gli stili dei link -slug: Learn/CSS/Styling_text/Definire_stili_link -translation_of: Learn/CSS/Styling_text/Styling_links ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Quando si vogliono assegnare degli stili ai link, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia, come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza informatica di base, elementi di HTML (leggi Introduction to HTML), elementi di CSS (leggi Introduction to CSS), Fondamenti di testo e font con CSS.
Obbiettivo:Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.
- - - -

Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le best practices viste in Creare gli hyperlink. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le best practices per la definizione degli stili dei link.

- - - -

La prima cosa da capire è il concetto di stato dei link — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti pseudo-classi:

- - - -

Stili predefiniti

- -

L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).

- -
<p><a href="#">A simple link</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('Default_styles', '100%', 120) }}

- -
-

Nota: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli # (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il # (cancelletto) invece si connette esclusivamente alla pagina corrente.

-
- -

Quando esplorerete gli stili predefiniti, si noteranno alcune cose:

- - - -

E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:

- - - -

Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:

- - - -
-

Nota: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !

-
- -

Definiamo qualche stile

- -

Ora che abbiamo visto qualche dettaglio sugli stati predefiniti, diamo uno sguardo ad un tipico set di stili dei link.

- -

Per cominciare, scriviamo il nostro set di stili vuoto:

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

Questo ordine è importante perché gli stili dei link si sovrappongono l'uno sull'altro, per esempio gli stili definiti nella prima regola si applicheranno a tutti quelli seguenti, e quando si attiva un link, ci si passa anche sopra con il mouse. Se si indicano nell'ordine sbagliato, le cose potrebbero non lavorare nel verso giusto.  Per ricordare questo ordine, si può provare ad usare, come aiuto mnemonico, LoVe Fears HAte.

- -

Adesso si aggiungano alcune altre impostazioni per una appropriata definizione degli stili:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

Forniamo anche il seguente esempio HTML a cui applicare il CSS:

- -
<p>There are several browsers available, such as <a href="#">Mozilla
-Firefox</a>, <a href="#">Google Chrome</a>, and
-<a href="#">Microsoft Edge</a>.</p>
- -

Mettendoli insieme il risultato sarà questo:

- -

{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}

- -

Quindi che cosa abbiamo fatto qui? Il risultato è certamente differente rispetto allo stile predefinito, ma propone ancora un'esperienza abbastanza familiare per gli utenti che sanno cosa sta succedendo:

- - - -

Active learning: Definisci i tuoi stili

- -

In questa sessione di active learning, ci piacerebbe che tu prendessi il nostro set di regole vuoto e aggiungessi le tue dichiarazioni per rendere i link veramente mitici. Usa la tua immaginazione e scatenati. Siamo sicuri che ti potrà venire in mente qualcosa di più fantasioso e funzionale rispetto al nostro esempio sopra.

- -

Se fai un errore, puoi sempre ripartire usando il pulsante Reset. E se rimani bloccato, clicca sul bottone Show solution per inserire l'esempio che ti abbiamo mostrato sopra.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- - - -

Una pratica comune consiste nell'includere le icone sui link, per fornire più di un indicatore per quanto riguarda il tipo di contenuto a cui punta il link. Vediamo sotto un esempio molto semplice che associa un'icona ad un link esterno (sono i link che collegano ad altri siti). In genere tale icona è rappresentata come una piccola freccia che indica fuori da un box — per questo esempio, useremo il grande esempio fornito da icons8.com.

- -

Guardiamo l'HTML e il CSS che ci daranno l'effetto che vogliamo. Per prima cosa, abbiamo del semplice HTML da definire:

- -
<p>For more information on the weather, visit our <a href="#">weather page</a>,
-look at <a href="#">weather on Wikipedia</a>, or check
-out <a href="#">weather on Extreme Science</a>.</p>
- -

Quindi il CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
-}
- -

{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}

- -

So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using {{cssxref("background")}} shorthand instead of the individual properties. We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

- -

We also use {{cssxref("background-size")}} to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.

- -

Finally, we set some {{cssxref("padding-right")}} on the links to make space for the background image to appear in, so we aren't overlapping it with the text.

- -

A final word — how did we select just external links? Well, if you are writing your HTML links properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an attribute selector: a[href*="http"] selects {{htmlelement("a")}} elements, but only if they have an {{htmlattrxref("href","a")}} attribute with a value that contains "http" somewhere inside it.

- -

So that's it — try revisiting the active learning section above and trying this new technique out!

- -
-

Note: Don't worry if you are not familiar with backgrounds and responsive web design yet; these are explained in other places.

-
- - - -

The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.

- -

In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.

- -

First, some HTML:

- -
<ul>
-  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
-</ul>
- -

And now our CSS:

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

This gives us the following result:

- -

{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}

- -

Let's explain what's going on here, focusing on the most interesting parts:

- - - -
-

Note: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at Fighting the space between inline block elements.

-
- -

Summary

- -

We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/it/learn/css/styling_text/styling_links/index.html b/files/it/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..b6bdc7a6fa --- /dev/null +++ b/files/it/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,438 @@ +--- +title: Definire gli stili dei link +slug: Learn/CSS/Styling_text/Definire_stili_link +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Quando si vogliono assegnare degli stili ai link, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia, come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza informatica di base, elementi di HTML (leggi Introduction to HTML), elementi di CSS (leggi Introduction to CSS), Fondamenti di testo e font con CSS.
Obbiettivo:Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.
+ + + +

Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le best practices viste in Creare gli hyperlink. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le best practices per la definizione degli stili dei link.

+ + + +

La prima cosa da capire è il concetto di stato dei link — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti pseudo-classi:

+ + + +

Stili predefiniti

+ +

L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).

+ +
<p><a href="#">A simple link</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Default_styles', '100%', 120) }}

+ +
+

Nota: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli # (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il # (cancelletto) invece si connette esclusivamente alla pagina corrente.

+
+ +

Quando esplorerete gli stili predefiniti, si noteranno alcune cose:

+ + + +

E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:

+ + + +

Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:

+ + + +
+

Nota: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !

+
+ +

Definiamo qualche stile

+ +

Ora che abbiamo visto qualche dettaglio sugli stati predefiniti, diamo uno sguardo ad un tipico set di stili dei link.

+ +

Per cominciare, scriviamo il nostro set di stili vuoto:

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Questo ordine è importante perché gli stili dei link si sovrappongono l'uno sull'altro, per esempio gli stili definiti nella prima regola si applicheranno a tutti quelli seguenti, e quando si attiva un link, ci si passa anche sopra con il mouse. Se si indicano nell'ordine sbagliato, le cose potrebbero non lavorare nel verso giusto.  Per ricordare questo ordine, si può provare ad usare, come aiuto mnemonico, LoVe Fears HAte.

+ +

Adesso si aggiungano alcune altre impostazioni per una appropriata definizione degli stili:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

Forniamo anche il seguente esempio HTML a cui applicare il CSS:

+ +
<p>There are several browsers available, such as <a href="#">Mozilla
+Firefox</a>, <a href="#">Google Chrome</a>, and
+<a href="#">Microsoft Edge</a>.</p>
+ +

Mettendoli insieme il risultato sarà questo:

+ +

{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}

+ +

Quindi che cosa abbiamo fatto qui? Il risultato è certamente differente rispetto allo stile predefinito, ma propone ancora un'esperienza abbastanza familiare per gli utenti che sanno cosa sta succedendo:

+ + + +

Active learning: Definisci i tuoi stili

+ +

In questa sessione di active learning, ci piacerebbe che tu prendessi il nostro set di regole vuoto e aggiungessi le tue dichiarazioni per rendere i link veramente mitici. Usa la tua immaginazione e scatenati. Siamo sicuri che ti potrà venire in mente qualcosa di più fantasioso e funzionale rispetto al nostro esempio sopra.

+ +

Se fai un errore, puoi sempre ripartire usando il pulsante Reset. E se rimani bloccato, clicca sul bottone Show solution per inserire l'esempio che ti abbiamo mostrato sopra.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ + + +

Una pratica comune consiste nell'includere le icone sui link, per fornire più di un indicatore per quanto riguarda il tipo di contenuto a cui punta il link. Vediamo sotto un esempio molto semplice che associa un'icona ad un link esterno (sono i link che collegano ad altri siti). In genere tale icona è rappresentata come una piccola freccia che indica fuori da un box — per questo esempio, useremo il grande esempio fornito da icons8.com.

+ +

Guardiamo l'HTML e il CSS che ci daranno l'effetto che vogliamo. Per prima cosa, abbiamo del semplice HTML da definire:

+ +
<p>For more information on the weather, visit our <a href="#">weather page</a>,
+look at <a href="#">weather on Wikipedia</a>, or check
+out <a href="#">weather on Extreme Science</a>.</p>
+ +

Quindi il CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}

+ +

So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using {{cssxref("background")}} shorthand instead of the individual properties. We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

+ +

We also use {{cssxref("background-size")}} to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.

+ +

Finally, we set some {{cssxref("padding-right")}} on the links to make space for the background image to appear in, so we aren't overlapping it with the text.

+ +

A final word — how did we select just external links? Well, if you are writing your HTML links properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an attribute selector: a[href*="http"] selects {{htmlelement("a")}} elements, but only if they have an {{htmlattrxref("href","a")}} attribute with a value that contains "http" somewhere inside it.

+ +

So that's it — try revisiting the active learning section above and trying this new technique out!

+ +
+

Note: Don't worry if you are not familiar with backgrounds and responsive web design yet; these are explained in other places.

+
+ + + +

The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.

+ +

In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.

+ +

First, some HTML:

+ +
<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+ +

And now our CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

This gives us the following result:

+ +

{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}

+ +

Let's explain what's going on here, focusing on the most interesting parts:

+ + + +
+

Note: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at Fighting the space between inline block elements.

+
+ +

Summary

+ +

We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

 

+ +

In this module

+ + + +

 

-- cgit v1.2.3-54-g00ecf