From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/learn/css/building_blocks/index.html | 89 +++ .../learn/css/building_blocks/selettori/index.html | 231 +++++++ .../css/building_blocks/styling_tables/index.html | 294 +++++++++ files/it/learn/css/css_layout/flexbox/index.html | 344 ++++++++++ files/it/learn/css/css_layout/index.html | 78 +++ .../learn/css/css_layout/introduction/index.html | 711 +++++++++++++++++++++ .../it/learn/css/css_layout/normal_flow/index.html | 108 ++++ files/it/learn/css/index.html | 65 ++ .../styling_text/definire_stili_link/index.html | 438 +++++++++++++ files/it/learn/css/styling_text/index.html | 57 ++ 10 files changed, 2415 insertions(+) create mode 100644 files/it/learn/css/building_blocks/index.html create mode 100644 files/it/learn/css/building_blocks/selettori/index.html create mode 100644 files/it/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/it/learn/css/css_layout/flexbox/index.html create mode 100644 files/it/learn/css/css_layout/index.html create mode 100644 files/it/learn/css/css_layout/introduction/index.html create mode 100644 files/it/learn/css/css_layout/normal_flow/index.html create mode 100644 files/it/learn/css/index.html create mode 100644 files/it/learn/css/styling_text/definire_stili_link/index.html create mode 100644 files/it/learn/css/styling_text/index.html (limited to 'files/it/learn/css') diff --git a/files/it/learn/css/building_blocks/index.html b/files/it/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..ef61b8c18b --- /dev/null +++ b/files/it/learn/css/building_blocks/index.html @@ -0,0 +1,89 @@ +--- +title: La costruzione del CSS +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn + - Principiante + - building blocks +translation_of: Learn/CSS/Building_blocks +--- +
{{LearnSidebar}}
+ +

Questo modulo di apprendimento è il seguito di Primi passi con il CSS: dopo aver familiarizzato con il linguaggio e la sua sintassi e dopo aver acquisito una minima esperienza di utilizzo, è ora di andare più a fondo. In questo modulo verranno trattati: funzionamento a cascata ed ereditarietà, tutti i tipi di selettori disponibili, unità di misura, dimensioni, stilizzazione di sfondi e contorni, debug e molto altro.

+ +

Lo scopo del modulo è fornire gli strumenti per sviluppare CSS efficaci e le basi teoriche essenziali, prima di procedere verso discipline più specifiche come la stilizzazione del testo e il layout CSS.

+ +

Prerequisiti

+ +

Per affrontare questo modulo è necessario:

+ +
    +
  1. Familiarità con l'utilizzo di computer e navigazione passiva sul Web (ovvero consultare semplicemente i contenuti, senza manipolarli).
    2. +
  2. Un ambiente di lavoro base come specificato in Installazione di software fondamentali e le conoscenze necessarie a creare e gestire file, come specificato in Gestire i file.
    3. +
  3. Una minima familiarità con l'HTML, come trattato nel modulo Introduzione all'HTML.
    4. +
  4. Comprensione delle basi del CSS come trattato nel modulo Primi passi con il CSS.
    5. +
+ +
+

Nota: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo JSBin o Glitch.

+
+ +

Guide

+ +

Questo modulo contiene i seguenti articoli, che coprono le basi del linguaggio CSS. Lungo il percorso sono previsti vari esercizi per verificare la comprensione dell'argomento.

+ +
+
Cascade ed ereditarietà
+
L'obiettivo di questa lezione è sviluppare la comprensione di alcuni dei concetti fondamentali del CSS (il cascade, la specificità e l'ereditarietà) che regolano l'applicazione del CSS all'HTML e la risoluzione dei conflitti.
+
Selettori CSS
+
Esiste una grande varietà di selettori CSS, che permettono di selezionare con estrema precisione gli elementi da stilizzare. In questo articolo e nelle sue sotto-sezioni osservando come funzionano nel dettaglio le differenti tipologie. Le sotto-sezioni sono le seguenti: + +
+
Il modello a contenitori CSS
+
Ogni elemento CSS è racchiuso in un contenitore. Comprendere il funzionamento dei contenitori è fondamentale per creare layout con il CSS o allineare fra loro gli elementi. In questa lezione studieremo il modello a contenitori del CSS, una premessa necessaria per acquisire dimestichezza con il loro funzionamento e relativa terminologia prima di passare a configurazioni di layout più complesse.
+
Sfondi e contorni
+
In questa lezione accenneremo alle potenzialità creative del CSS mediante la stilizzazione di sfondi e contorni. Affronteremo numerose delle domande più frequenti sul CSS come aggiungere gradienti, immagini di sfondo e angoli arrotondati.
+
Gestire direzioni di testo differenti
+
Recentemente il CSS si è evoluto per supportare meglio differenti direzioni del contenuto, sia quella da destra verso sinistra che quella dall'alto verso il basso (come il giapponese). Queste differenti direzioni sono chiamate writing modes, cioè modalità di scrittura. Introduciamo l'argomento perché più avanti, quando inizieremo a lavorare con i layout, sarà utile capire le modalità di scrittura.
+
Overflow dei contenuti
+
In questa lezione vedremo un altro importante concetto nel CSS: l'overflow. L'overflow si verifica quando il contenuto è troppo per essere adeguatamente racchiuso in un contenitore. In questa guida impareremo di cosa si tratta e come gestirlo.
+
Valori e unità CSS
+
Ogni proprietà usata nel CSS ha un valore o un insieme di valori consentiti per quella proprietà. In questa lezione affronteremo i valori e le unità più diffusi.
+
Ridimensionare gli elementi nel CSS
+
Nelle precedenti lezioni abbiamo incontrato diversi metodi per ridimensionare elementi in una pagina web utilizzando il CSS. È importante essere in grado di calcolare la dimensione dei diversi elementi nel proprio concetto grafico. In questa lezione riassumeremo i vari metodi per definire la grandezza di un elemento tramite il CSS e alcuni termini riguardo le grandezze che potranno esserti d'aiuto in futuro.
+
Immagini, contenuti multimediali e moduli
+
In questa lezione vedremo come alcuni elementi speciali vengono gestiti nel CSS. Gli elementi di immagini, altri contenuti multimediali e moduli presentano leggere differenze in termini di possibilità di stilizzazione in contenitori regolari. Sapere cosa sia possibile e cosa no può evitare errori frustranti. In questa lezione evidenzieremo le conoscenze più importanti che ci serviranno.
+
Stili e tabelle
+
Stilizzare una tabella HTML non è il lavoro più entusiasmante al mondo, ma a volte tocca a farlo. Questo articolo fornisce una guida per rendere le tabelle HTML graficamente gradevoli, presentando anche tecniche di stilizzazione specifiche.
+
Fare il debug in CSS
+
Un problema comune nello sviluppo del CSS è quando il codice presenta comportamenti imprevisti. Questo articolo fornisce una traccia per compiere il debug di un problema con il CSS e mostra come impiegare i DevTools (gli strumenti per sviluppatore incorporati in tutti i browser moderni) per individuare le anomalie.
+
Organizzare il CSS
+
Quando si inizia a lavorare su fogli di stile e progetti sempre più corposi, ci si rende conto che mantenere un file CSS di grandi dimensioni può essere impegnativo. In questo articolo affronteremo velocemente alcune buone pratiche per scrivere un foglio CSS facilmente gestibile e altre soluzioni escogitate dai vari sviluppatori per semplificare la gestione del codice.
+
+ +

Valutazioni

+ +

Per chi desidera mettersi alla prova, le seguenti valutazioni sono realizzate appositamente per verificare la comprensione degli argomenti CSS affrontati nelle guide precedenti.

+ +
+
Comprensione delle basi di CSS
+
Questa valutazione verifica la comprensione della sintassi CSS di base, selettori, specificità, modelli di contenitori e altro.
+
Realizza una carta da lettere intestata
+
Per fare una buona prima impressione non c'è niente di meglio che scrivere una lettera su carta intestata ricercata. Per superare questa valutazione dovrai realizzare un modello di carta intestata online dalla grafica accattivante.
+
Un gran bel contenitore
+
In questa valutazione faremo pratica con la stilizzazione di sfondi e contorni per realizzare un contenitore che non passa inosservato.
+
+ +

Vedi anche

+ +
+
Effetti avanzati di stilizzazione
+
Questo articolo è una sorta di scatola dei trucchi: fornisce un'introduzione ad alcune interessanti funzionalità avanzate di stilizzazione come ombre, modalità di fusione e filtri.
+
diff --git a/files/it/learn/css/building_blocks/selettori/index.html b/files/it/learn/css/building_blocks/selettori/index.html new file mode 100644 index 0000000000..cf0f6662cf --- /dev/null +++ b/files/it/learn/css/building_blocks/selettori/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/styling_tables/index.html b/files/it/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..990188c01c --- /dev/null +++ b/files/it/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,294 @@ +--- +title: Stili e tabelle +slug: Learn/CSS/Building_blocks/Styling_tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
+ +

Applicare stili a tabelle HTML non è il lavoro più stimolante che esista, ma di tanto in tanto va fatto. Questo articolo vi guiderà nel compito di rendere gradevoli le tabelle HTML, usando gli attributi spiegati in articoli precedenti.

+ + + + + + + + + + + + +
Prerequisiti:Basi HTML (vedi Introduction to HTML), tabelle HTML (vedi il modulo tabelle HTML (TBD)), e un'idea di come funzioni un CSS (studia Introduction to CSS.)
Obiettivo:Uso efficace degli stili su tabelle HTML.
+ +

Una tipica tabella HTML

+ +

Iniziamo a vedere una tipica tabella HTML. Beh, diciamo tipica — gli esempi di tabella contengono scarpe, meteo, dipendenti; rendiamo le cose più interessanti usando le più famose band punk del Regno Unito. Il codice quindi sarà questo:

+ +
<table>
+  <caption>A summary of the UK's most famous punk bands</caption>
+  <thead>
+    <tr>
+      <th scope="col">Band</th>
+      <th scope="col">Year formed</th>
+      <th scope="col">No. of Albums</th>
+      <th scope="col">Most famous song</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Buzzcocks</th>
+      <td>1976</td>
+      <td>9</td>
+      <td>Ever fallen in love (with someone you shouldn't've)</td>
+    </tr>
+    <tr>
+      <th scope="row">The Clash</th>
+      <td>1976</td>
+      <td>6</td>
+      <td>London Calling</td>
+    </tr>
+
+     ... alcune righe rimosse per concisione
+
+    <tr>
+      <th scope="row">The Stranglers</th>
+      <td>1974</td>
+      <td>17</td>
+      <td>No More Heroes</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="row" colspan="2">Total albums</th>
+      <td colspan="2">77</td>
+    </tr>
+  </tfoot>
+</table>
+ +

La tabella è ben formata, è facile applicarle stili, è accessibile, grazie all'uso di attributi come {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, ecc. Però non ha un bell'aspetto quando vista su schermo (vedila su punk-bands-unstyled.html):

+ +

+ +

Ha un aspetto rozzo, poco leggibile e noioso. Dobbiamo usare un po' di CSS per rimediare.

+ +

Apprendere attivamente: Diamo stile alla tabella

+ +

In questa sezione di apprendimento attivo daremo stile insieme alla nostra tabella.

+ +
    +
  1. Per iniziare, fai una copia in locale del codice di esempio, scarica le immagini (noise e leopardskin), e e metti i tre files in una directory di lavoro sul tuo computer.
    2. +
  2. Quindi, crea un nuovo file e salvalo col nome style.css nella stessa directory degli altri file.
    3. +
  3. Collega il file CSS all'interno del codice HTML scrivendo questa riga di HTML all'interno della sezione {{htmlelement("head")}}: + 
    <link href="style.css" rel="stylesheet" type="text/css">
    +
    4. +
+ +

Spaziatura e layout

+ +

La prima cosa da fare è mettere ordine nella spaziatura/layout, visto che lo stile predefinito è davvero rozzo! Per ottenere questo risultato, mettiamo queste definizioni CSS al file style.css:

+ +
/* spaziatura */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}
+ +

Le definizioni più importanti da notare sono:

+ + + +

A uesto punto, la nostra tabella ha già un aspetto molto migliore:

+ +

+ +

Semplici concetti tipografici

+ +

Ora diamo una sistemata al contenuto.

+ +

Innanzi tutto, abbiamo trovato un font su Google Fonts intonato alle nostre band punk. Puoi andare a sceglierne uno diverso se vuoi; devi solo sostituire l'elemento {{htmlelement("link")}} e la {{cssxref("font-family")}} con quelli che Google Fonts ti fornirà.

+ +

Prima, inserisci il seguente elemento {{htmlelement("link")}} nella sezione head, prima dell'altro elemento <link>:

+ +
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+ +

Ora aggiungi in testa al tuo file style.css i seguenti attributi CSS:

+ +
/* tipografia */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}
+ +

Non c'è nulla di specifico per tabelle; in generale impostiamo lo stile dei caratteri per rendere tutto di più facile lettura:

+ + + +

The result looks a bit neater:

+ +

+ +

Grafica e colori

+ +

Now onto graphics and colors! Because the table is full of punk and attitude, we need to give it some bright imposing styling to suit. Don't worry, you don't have to make your tables this loud — you can opt for something more subtle and tasteful.

+ +

Start by adding the following CSS to your style.css file, again at the bottom:

+ +
thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+
+ +

Again, there's nothing specific to tables here, but it is worthwhile to note a few things.

+ +

We've added a {{cssxref("background-image")}} to the {{htmlelement("thead")}} and {{htmlelement("tfoot")}}, and changed the {{cssxref("color")}} of all the text inside the header and footer to white (and given it a {{cssxref("text-shadow")}}) so it is readable. You should always make sure your text contrasts well with your background, so it is readable.

+ +

We've also added a linear gradient to the {{htmlelement("th")}} and {{htmlelement("td")}} elements inside the header and footer for a nice bit of texture, as well as giving those elements a bright purple border. It is useful to have multiple nested elements available so you can layer styles on top of one another. Yes, we could have put both the background image and the linear gradient on the {{htmlelement("thead")}} and {{htmlelement("tfoot")}} elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients.

+ +

Zebra striping

+ +

We wanted to dedicate a separate section to showing you how to implement zebra stripes — alternating rows of color that make the different data rows in your table easier to parse and read. Add the following CSS to the bottom of your style.css file:

+ +
tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}
+ + + +

This color explosion results in the following look:

+ +

+ +

Now, this may be a bit over the top and not to your taste, but the point we are trying to make here is that tables don't have to be boring and academic.

+ +

Stile del titolo

+ +

There is one last thing to do with our table — style the caption. To do this, add the following to the bottom of your style.css file:

+ +
caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}
+ +

There is nothing remarkable here, except for the {{cssxref("caption-side")}} property, which has been given a value of bottom. This causes the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at punk-bands-complete.html):

+ +

+ +

Apprendere attivamente: Uno stile per la tua tabella

+ +

At this point, we'd like you to take our example table HTML (or use some of your own!) and style it to make something considerably better designed and less garish than our table.

+ +

Trucchi per gli stili delle tabelle

+ +

Before moving on, we thought we'd provide you with a quick list of the most useful points illustrated above:

+ + + +

Sommario

+ +

With the dizzy exciting heights of styling tables now behind us, we need something else to occupy our time. Never fear — the next chapter provides a look at some advanced box effects, some of which have only landed in browsers very recently (such as blend modes and filters), and some of which are a bit more established (such as box shadows.)

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/css/css_layout/flexbox/index.html b/files/it/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..cc88b74d61 --- /dev/null +++ b/files/it/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,344 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +
Flexbox è un metodo di layout monodimensionale per disporre i componenti in righe oppure in colonne. Quando l'area che li contiene aumenta, i componenti si espandono per colmarne lo spazio, quando invece si restringe anche i componenti si restringono.
+Questo articolo comprende i concetti fondamentali.
+ +
+ + + + + + + + + + + + +
Prerequisiti:Le basi di HTML (leggi Introduzione a HTML) e nozioni sul funzionamento del CSS (leggi Introduzione a CSS.)
Obiettivo:Apprendere l'utilizzo di Flexbox per impostare il layout delle pagine web.
+ +

Perchè Flexbox?

+ +

Per molto tempo, le uniche tecniche affidabili per creare layout CSS compatibili con tutti i browser utilizzavano elementi float e posizionamento. Funzionavano a sufficienza, ma erano per alcuni aspetti limitati e frustranti.

+ +

Per esempio con quelle tecniche era difficile o del tutto impossibile definire in maniera flessibile e vantaggiosa le seguenti impostazioni:

+ + + +

Nelle sezioni seguenti apprenderemo come flexbox faciliti notevolmente questi compiti. Iniziamo!

+ +

Introduzione a un semplice esempio

+ +

Questo articolo presenta una serie di esercizi per aiutare a comprendere il funzionamento di flexbox. Per cominciare copiamo in locale il file di partenza flexbox0.html presente in github. Carichiamolo con un browser moderno, ad esempio Firefox o Chrome e facciamo attenzione al codice nell'editor. É possibile in alternativa visionarlo attraverso la versione live.

+ +

Image showing the starting point of Flexbox tutorial

+ +

Come vediamo la pagina è formata da un {{htmlelement("header")}} contenente il titolo principale, poi un elemento {{htmlelement("section")}} che contiene tre {{htmlelement("article")}}. Partiamo da questa situazione per creare un layout a tre colonne abbastanza comune.

+ +

Individuare gli elementi da impostare come box flessibili

+ +

Per cominciare occorre scegliere il gruppo di elementi che devono apparire come box flessibili; per farlo occorre impostare un valore particolare della proprietà {{cssxref("display")}} del loro elemento padre. In questo caso specifico desideriamo sistemare gli elementi {{htmlelement("article")}}, perciò agiamo sul loro contenitore {{htmlelement("section")}}:

+ +
section {
+  display: flex;
+}
+ +

Questa impostazione trasforma <section> in un contenitore flex e gli elementi figli in componenti flex. Questo è l'aspetto che otteniamo:

+ +

+ +

Proprio così: con questa semplice regola abbiamo già ottenuto tutto ciò che volevamo! Il layout diventa multicolonna e le colonne che lo formano sono della medesima larghezza e lunghezza. Tutto ciò avviene grazie ai componenti flex, cioè i figli del contenitore impostato come flex, che, grazie a valori predefiniti, risolvono automaticamente problemi tipici come questo.

+ +

Ripassiamo cosa è avvenuto: l'elemento il cui valore di  {{cssxref("display")}} è flex si comporta come un elemento blocco all'interno della pagina, ma i suoi figli vengono disposti come componenti flex. Nella prossima sezione capiremo meglio che cosa significa. Notiamo che in alternativa possiamo usare il valore inline-flex per display cosicché gli elementi figlio diventano comunque componenti flex, ma il contenitore si comporta come un elemento in linea.

+ +

Il modello flex

+ +

In qualità di componenti flex, gli elementi si dispongono lungo due assi:

+ +

flex_terms.png

+ + + +

Si tengano a mente queste definizioni durante le sezioni successive. In caso di confusione con i termini potete comunque tornare a rileggere questa sezione.

+ +

Colonne o righe?

+ +

Flexbox offre una proprietà chiamata flex-direction {{cssxref("flex-direction")}} che indica quale direzione deve seguire l'asse principale, ovvero come vengono disposti i contenuti flexbox;il valore predefinito è row, in modo che i contenuti si schierino in riga secondo il verso della lingua preimpostata dal browser, che per le quelle occidentali è da sinistra a destra.

+ +

Proviamo ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:

+ +
flex-direction: column;
+ +

Come vediamo i componenti tornano a schierarsi in colonna, come in un il flusso normale senza aggiungere CSS. Cancelliamo pure questa dichiarazione dall'esercizio, prima di continuare.

+ +
+

Nota: Potremmo anche invertire la disposizione dei componenti flex utilizzando i valori row-reverse o column-reverse. Sono da sperimentare!

+
+ +

Effettuare il Wrapping

+ +

Il problema che sorge nel layout quando la larghezza o l'altezza vengono esplicitate è che il gruppo dei contenuti flexbox potrebbe eccedere il limite del contenitore, guastando il layout. Diamo un'occhiata all'esempio flexbox-wrap0.html,di cui viene fornita la visione live. Per eseguire le procedure mostrate da questo punto in poi, salvate una copia del file in locale.

+ +

+ +

Come vediamo i contenuti figli eccedono effettivamente il limite del loro contenitore. Una possibile soluzione consiste nell'aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:

+ +
flex-wrap: wrap;
+ +

Proviamo anche ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("article")}}:

+ +
flex: 200px;
+ +

Ricaricando possiamo notare il miglioramento che abbiamo ottenuto grazie queste modifiche.

+ +

Adesso possiamo notare che si sono formate un certo numero di righe, ovviamente tante quante ne servono per tutti i contenuti flexbox: quando un contenuto eccede i limiti, scala alla riga successiva. L'impostazione flex: 200px dichiarata per gli articoli significa che ognuno di essi occuperà almeno 200px; questa proprietà verrà discussa con maggior dettaglio più avanti nell'articolo. Notiamo anche che ciascuno degli ultimi contenuti che occupano l'ultima riga è molto più largo in modo da riempirla completamente.

+ +

Possiamo sperimentare ancora: innanzitutto assegnare alla proprietà {{cssxref("flex-direction")}} il valore row-reverse, così da ottenere un layout con numerose righe come il precedente in cui però i contenuti si schierano a partire dall'angolo opposto della finestra del browser e fluiscono in maniera inversa.

+ +

La forma contratta flex-flow

+ +

Occorre notare a questo punto che esiste una forma contratta, {{cssxref("flex-flow")}, per le proprietà {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}} — }. É possibile per esempio sostituire

+ +
flex-direction: row;
+flex-wrap: wrap;
+ +

con

+ +
flex-flow: row wrap;
+ +

Dimensionamento flessibile dei componenti flex

+ +

Ora torniamo al primo esempio per capire come determinare la proporzione che occupa ogni componente flex nello spazio rispetto ai componenti suoi pari. Riapriamo il file locale flexbox0.html, oppure, come punto di partenza, prendiamo il nuovo file flexbox1.html di cui viene fornita anche la versione live.

+ +

Cominciamo aggiungendo la seguente regola al termine del nostro CSS:

+ +
article {
+  flex: 1;
+}
+ +

Si indica in questo modo un valore proporzionale, privo di unità di misura, che determina lo spazio che occupa ogni componente flex rispetto agli altri. In questo caso tutti gli elementi {{htmlelement("article")}} hanno valore 1, il che significa, al netto di spaziature interne (padding) ed esterne (margin), che lo spazio verrà equamente ripartito tra tutti i componenti. Questo è un valore relativo a tutti i componenti flex del medesimo gruppo, perciò, se invece di 1 viene scritto un altro valore, 400000 ad esempio, otteniamo lo stesso risultato.

+ +

Di seguito scriviamo questa regola:

+ +
article:nth-of-type(3) {
+  flex: 2;
+}
+ +

Si noti, dopo aver ricaricando la pagina, che il terzo componente {{htmlelement("article")}} riempie il doppio dello spazio occupato da ciascuno degli altri due. Lo spazio totale è ora diviso in quattro, cioè una spaziatura per il primo elemento, una per il secondo e due per il terzo (1+1+2=4), quindi il primo e il secondo occupano un quarto (1/4) di spazio ciascuno mentre il terzo ne occupa due quarti (2/4) ovvero la metà.

+ +

Si può anche specificare una misura reale minima al di sotto del quale non è possibile andare. Correggiamo le regole degli articoli in questo modo:

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}
+ +

Con queste regole affermiamo fondamentalmente quanto segue: "Ogni componente flex occupa almeno 200px nello spazio a disposizione, mentre lo spazio che rimane viene occupato rispettando le unità proporzionali." Ricaricando la pagina possiamo notare la differenza nella ripartizione delle spaziature.

+ +

+ +

La potenza di flexbox risiede nella sua flessibilità ovvero nella responsività con cui gestisce il layout: se ridimensioniamo la finestra del browser oppure inseriamo un nuovo elemento {{htmlelement("article")}} il layout continuerà a funzionare bene.

+ +

flex: forma contratta al posto della forma estesa

+ +

La proprietà  {{cssxref("flex")}} rappresenta la forma contratta delle seguenti tre proprietà::

+ + + +

È consigliabile non utilizzare le forme estese della proprietà flex, a meno che non si possa fare altrimenti, come per esempio sostituire un valore stabilito in precedenza, perché costringono a scrivere una maggior quantità di codice che può risultare in qualche modo confusionario.

+ +

Allineamento orizzontale e verticale

+ +

Con flexbox è possibile allineare i componenti flex lungo l'asse principale (main axis) o lungo l'asse traverso (cross axis). Facciamo alcune prove con la nuova pagina di esempio, flex-align0.html di cui è presente anche la versione live , per mostrare come creare una bottoniera, o barra degli strumenti, semplice e flessibile.

+ +

+ +

Apriamo il codice in locale.

+ +

Aggiungiamo al termine del file CSS la regola seguente:

+ +
div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

+ +

Dopo aver ricaricato la pagina, i bottoni vengono ben centrati, sia orizzontalmente che verticalmente. Abbiamo ottenuto questo risultato operando con due nuove proprietà:

+ +

Attraverso {{cssxref("align-items")}} controlliamo l'allineamento rispetto all'asse traverso (cross axis).

+ + + +

É possibile sostituire l'impostazione data da align-items {{cssxref("align-items")}} , utilizzando la proprietà {{cssxref("align-self")}} di ogni singolo componente figlio. Ad esempio se proviamo ad aggiungere la seguente regola:

+ +
button:first-child {
+  align-self: flex-end;
+}
+ +

+ +

Dopo aver verificato l’effetto, possiamo cancellare questa regola per ritornare alla situazione precedente.

+ +

Attraverso {{cssxref("justify-content")}} controlliamo il tipo di schieramento dei componenti flex lungo l'asse principale (main axis).

+ + + +

É consigliabile sperimentare le proprietà con valori suddetti prima di continuare a leggere l'articolo.

+ +

Ordinare i componenti flex

+ +

Con flexbox è possibile cambiare l'ordine dei componenti senza intervenire manualmente nel sorgente HTML. Questa opportunità non esisteva con le metodologie di layout precedenti.

+ +

Proviamo ad aggiungere al CSS una nuova semplice regola:

+ +
button:first-child {
+  order: 1;
+}
+ +

Una volta ricaricato notiamo che il bottone con label "Sorriso" si è spostato al termine dell'asse principale. Vediamo in dettaglio cosa è successo:

+ + + +

Se impostiamo un valore negativo di order, il componente compare prima di quelli con valore 0. Proviamo ora ad applicare la regola impostando per esempio l'ordine del bottone "Imbarazzo":

+ +
button:last-child {
+  order: -1;
+}
+ +

Flex box annidati

+ +

Con flexbox possiamo creare layout piuttosto complessi; è del tutto lecito impostare un componente flex in modo che contenga a sua volta componenti annidati flex che vengono visualizzati come flex box. Diamo un'occhiata a complex-flexbox.html (see it live also).

+ +

+ +

La struttura HTML è abbastanza semplice, l'elemento {{htmlelement("section")}} contiene gli elementi figli {{htmlelement("article")}}. , il terzo di questi contiene tre {{htmlelement("div")}} :

+ +
section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button
+ +

Ora guardiamo il codice che ha creato il layout.

+ +

Innanzitutto, impostiamo i figli di {{htmlelement("section")}} affinché diventino flex box.

+ +
section {
+  display: flex;
+}
+ +

Quindi valorizziamo alcune proprietà flex all'interno degli stessi {{htmlelement("article")}}. Si noti in particolare la seconda regola, in cui si impone che il terzo elemento {{htmlelement("article")}} abbia a sua volta componenti innestati flex, i quali però devono essere incolonnati.

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+
+ +

Quindi, impostiamo per il primo <div> la proprietà flex a 1 100px; in modo che abbia un'altezza reale di almeno 100px; la proprietà successiva stabilisce che anche gli elementi figli, cioè i (the {{htmlelement("button")}}, divengano componenti flex; tali elementi si dispongono in riga e allineati a partire dal centro dello spazio disponibile mantenendo i margini alle estremità, proprio come l'esempio del bottone visto in precedenza.

+ +
article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Infine viene definita una regola per la dimensione dei bottoni., ma la parte più interessante è la proprietà flex che ha valore 1 auto; questa impostazione genera un comportamento peculiare che notiamo quando restringiamo la finestra del browser: i bottoni cercano di occupare il massimo dello spazio disponibile, si schierano uno accanto all'altro finché c'è spazio disponibile, e poi scalano alla riga seguente.

+ +
button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+ +

Compatibilità tra browser

+ +

Gran parte delle ultime versioni dei browser supportano flexbox, cioè Firefox, Chrome, Opera, Microsoft Edge, IE 11, le versioni recenti di Android/iOS ecc. Occorre tuttavia considerare anche la presenza delle versioni antiquate dei browser che non supportano flexbox oppure lo fanno solo parzialmente.

+ +

Il problema non incide granché quando ne studiamo e ne proviamo le funzionalità, tuttavia quando si cerca di utilizzare flexbox per creare un sito web reale dobbiamo controllare e assicurarci che l'esperienza utente sia comunque accettabile in quanti più browser possibile.

+ +

Applicare flexbox è un po' più complicato di altre funzionalità CSS. Se per esempio il browser non supporta l'ombreggiatura (drop shadow) è facile che l'usabilità del sito rimanga comunque valida, se invece manca il supporto a flexbox è probabile che il layout della pagina si disintegri rendendola inutilizzabile.

+ +

Le strategie per ovviare ai problemi di compatibilità tra browser vengono affrontate nel modulo Cross browser testing.

+ +

Metti alla prova le tue capacità!

+ +

Questo articolo è denso di informazioni, ma riesci a ricordare quelle più importanti?

+ +

Prima di continuare possiamo verificare la nostra comprensione alla pagina Test your skills: Flexbox.

+ +

Sommario

+ +

In conclusione dell'articolo sulle basi di flexbox speriamo di aver suscitato interesse e un buon punto di partenza nel nostro percorso di apprendimento. Nel prossimo articolo ci occupiamo di un altro importante aspetto del layout CSS: le Griglie CSS.

+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +
+

In this module

+ + +
diff --git a/files/it/learn/css/css_layout/index.html b/files/it/learn/css/css_layout/index.html new file mode 100644 index 0000000000..31a85170fa --- /dev/null +++ b/files/it/learn/css/css_layout/index.html @@ -0,0 +1,78 @@ +--- +title: Layout CSS +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - alignment + - flexbox + - float + - table +translation_of: Learn/CSS/CSS_layout +--- +
{{LearnSidebar}}
+ +

A questo punto abbiamo già visto i fondamenti di CSS, come assegnare uno stile a un testo e come modificare lo stile e l'impostazione dei riquadri nei quali risiede il contenuto. Ora impareremo come posizionare i riquadri rispetto all'area di visualizzazione e l'uno rispetto all'altro. Abbiamo già appreso i prerequisiti necessari per approfondire il layout CSS, analizzare le diverse impostazioni di display, i moderni strumenti di layout quali flexbox, griglia CSS, posizionamento e alcune tecniche legacy che potrebbe comunque tornare utile conoscere.

+ +

Prerequisiti

+ +

Per affrontare questo modulo è necessario:

+ +
    +
  1. Avere una conoscenza di base dell'HTML, discusso nel modulo Introduzione all'HTML [Introduction to HTML].
    2. +
  2. Avere familiarità con i fondamenti di CSS, discussi in Introduzione al CSS [Introduction to CSS].
    3. +
  3. Comprendere come assegnare uno stile ai riquadri [Styling boxes].
    4. +
+ +
+

Nota: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo JSBin oppure Glitch.

+
+ +

Guide

+ +

I seguenti articoli insegnano a utilizzare gli strumenti fondamentali di layout e le tecniche disponibili nel linguaggio CSS. Alla fine delle lezioni è previsto un test di valutazione per verificare la propria comprensione dei metodi di layout applicandoli a una pagina web.

+ +
+
Introduzione ai layout CSS [Introduction to CSS layout]
+
Questo articolo riassume alcune delle caratteristiche dei layout CSS già incontrate nei moduli precedenti (ad esempio i diversi valori di {{cssxref("display")}}) e introduce diversi concetti che affronteremo in questo modulo.
+
Flusso normale [Normal flow]
+
Gli elementi di una pagina web si dispongono secondo un flusso normale, a meno che non facciamo qualcosa per cambiarlo. Questo articolo spiega le basi di un flusso normale come premessa per imparare a modificarlo.
+
Flexbox [Flexbox]
+
Flexbox [Flexbox] è un metodo di layout monodimensionale per disporre gli elementi in righe e colonne. Gli elementi si espandono per riempire lo spazio extra e si contraggono per adattarsi a uno spazio più ridotto. Questo articolo ne spiega i concetti fondamentali. Dopo aver studiato la guida potrai testare le tue competenze su flexbox [test your flexbox skills] per accertarti di averlo compreso prima di passare all'argomento successivo.
+
Griglie [Grids]
+
La Griglia layout CSS è un sistema bidimensionale di layout per il Web. Permette di disporre i contenuti in righe e colonne, inoltre offre diverse funzionalità per semplificare la costruzione di layout complessi. Questo articolo contiene tutte le informazioni necessarie per iniziare a costruire il layout della pagina, quindi mettere alla prova le proprie abilità sulla griglia [test your grid skills] prima di passare all'argomento successivo.
+
Elementi float [Floats]
+
Originariamente usata per inserire le immagini all'interno di blocchi di testo, la proprietà {{cssxref("float")}} è diventata uno dei più comuni strumenti per creare layout multicolonna nelle pagine web. Con la comparsa di Flexbox e Griglia è tornata alla sua finalità originale, come spiegato in questo articolo.
+
Posizionamento [Positioning]
+
Il posizionamento permette di isolare gli elementi dal normale flusso della pagina assegnando loro un comportamento diverso, ad esempio sovrapporsi uno sull'altro o mantenere sempre la stessa posizione all'interno dell'area di visualizzazione del browser. Questo articolo spiega i differenti valori di {{cssxref("position")}} e come utilizzarli.
+
Layout multicolonna [Multiple-column layout]
+
Le specifiche del layout multicolonna offrono un metodo per strutturare il contenuto in colonne come sulla pagina di un quotidiano. L'articolo spiega come sfruttare questa caratteristica.
+
Design reattivo [Responsive design]
+
Con la comparsa di dispositivi di varie dimensioni in grado di accedere al Web, è nato il concetto di web design reattivo (o RWD, dall'inglese Responsive Web Design): un insieme di procedure che permettono alle pagine web di modificare il proprio layout e aspetto per adattarsi a diverse larghezze, risoluzioni, ecc. Si tratta di un'idea che ha cambiato il modo di progettare il Web multi-dispositivo e questo articolo aiuta a capire le principali tecniche necessarie a padroneggiarlo.
+
Guida per principianti alle media query [Beginner's guide to media queries]
+
Le media query CSS danno modo di applicare i fogli di stile CSS solo quando il browser e le condizioni del dispositivo corrispondono alle regole specificate, ad esempio "l'area di visualizzazione è più larga di 480 pixel". Le media query sono un elemento fondamentale del web design reattivo, poiché non solo permettono di stabilire layout differenti a seconda della grandezza dell'area di visualizzazione, ma anche di rilevare altre condizioni dell'ambiente in cui un sito viene riprodotto, ad esempio se l'utente usa un touchscreen o un mouse. In questa lezione impareremo innanzitutto la sintassi usata nelle media query e poi le applicheremo in un esempio reale che mostra come trasformare un design semplice in reattivo.
+
I metodi di layout legacy [Legacy layout methods]
+
Una caratteristica molto comune dei layout CSS sono i sistemi di griglia. Prima della Griglia Layout CSS cercavamo di realizzare l'impaginazione utilizzando elementi float o altre caratteristiche del layout. Il layout veniva concepito come un numero dato di colonne immaginarie (ad esempio 4, 6 o 12) all'interno delle quali inserire i contenuti. In questo articolo vedremo come funzionano questi metodi ormai obsoleti per capirne l'impostazione in caso dovessimo lavorare su progetti più datati.
+
Supporto per i browser più datati [Supporting older browsers]
+
+

In questo modulo consigliamo di usare Flexbox e Griglia quali principali metodi di progettazione. Va però considerato che alcuni utenti potrebbero visualizzare il nostro sito con browser più datati o che, semplicemente, non supportano i metodi da noi scelti. Bisogna sempre tenerne conto nel Web: man mano che nuove funzionalità vengono messe a punto, ciascun browser si concentra sull'implementarne alcune, a scapito di altre. Questo articolo spiega come usare le moderne tecniche del Web senza escludere chi utilizza tecnologia più datata.

+
+
Valutazione sulla comprensione dei fondamenti di layout [Assessment: Fundamental layout comprehension]
+
Un test per valutare la comprensione dei diversi metodi di layout applicandoli a una vera pagina web.
+
+ +

Vedi anche

+ +
+
Esempi pratici di posizionamento [Practical positioning examples]
+
Questo articolo mostra come impostare alcuni esempi reali per illustrare le potenzialità del posizionamento.
+
diff --git a/files/it/learn/css/css_layout/introduction/index.html b/files/it/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..3a3238e551 --- /dev/null +++ b/files/it/learn/css/css_layout/introduction/index.html @@ -0,0 +1,711 @@ +--- +title: Introduzione al layout CSS +slug: Learn/CSS/CSS_layout/Introduction +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
+ +

Questo articolo riassume alcune caratteristiche del CSS viste nei moduli precedenti, come ad esempio i diversi valori di {{cssxref("display")}}, e presenta alcuni concetti che verranno trattati nel corso di questo modulo.

+ + + + + + + + + + + + +
Prerequisiti:Le basi di HTML (leggi Introduzione a HTML) e nozioni sul funzionamento del CSS (leggi Introduzione a CSS [Introduction to CSS].)
Obiettivo:Offrire una panoramica sulle tecniche di CSS usate nei layout delle pagine web. Ogni tecnica viene approfondita negli articoli a seguire.
+ +

Le tecniche di CSS applicate al layout di pagina permettono di controllare il posizionamento degli elementi contenuti nella pagina web relativamente alla loro posizione predefinita nel flusso normale di layout, agli elementi contigui, al contenitore padre o all'area di visualizzazione/finestra principale. Le tecniche per il layout di pagina che approfondiremo in questo modulo sono:

+ + + +

Ogni tecnica ha i propri casi d'uso, vantaggi e svantaggi. Nessuna di esse è concepita per funzionare in isolamento. Una volta compreso per quale scopo è stato progettato ciascun metodo, risulterà facile scegliere lo strumento di layout più adatto alle diverse esigenze.

+ +

Flusso normale

+ +

Per flusso normale si intende il layout predefinito di una pagina HTML, ovvero come viene visualizzata senza interventi da parte nostra. Ecco un breve esempio di codice HTML:

+ +
<p>Amo il mio gatto.</p>
+
+<ul>
+  <li>Compra il cibo per gatti</li>
+  <li>Esercitati</li>
+  <li>Tira su di morale un amico</li>
+</ul>
+
+<p>Fine!</p>
+ +

Secondo le impostazioni predefinite, il browser visualizza il codice in questo modo:

+ +

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

+ +

Notiamo come l'HTML venga visualizzato nell'esatto ordine in cui appare nel codice sorgente, con gli elementi incolonnati uno sotto l'altro: primo paragrafo, elenco non ordinato, secondo paragrafo.

+ +

Gli elementi che compaiono uno sotto l'altro vengono definiti come elementi blocco, al contrario degli elementi in linea, che sono disposti uno accanto all'altro come le singole parole di un paragrafo.

+ +
+

Nota: La direzione in cui si dispongono i contenuti di elementi blocco viene definita direzione blocco. La direzione blocco è verticale in lingue come l'inglese, che hanno una modalità di scrittura orizzontale. Al contrario, è orizzontale in lingue come il giapponese, che hanno una modalità di scrittura verticale. La corrispondente direzione in linea segue la direzione percorsa dai contenuti lineari, ad esempio quelli di una frase scritta.

+
+ +

Nella maggior parte dei casi, il flusso normale è sufficiente a disporre gli elementi nella pagina come ci servono. Tuttavia, per ottenere layout più complessi, occorre modificare la disposizione predefinita grazie ad alcuni strumenti disponibili nel CSS. Partire da un codice HTML ben strutturato è importante, perché permette di ritoccare la disposizione predefinita degli elementi, invece di stravolgerla.

+ +

I metodi per influenzare la disposizione degli elementi con il CSS sono i seguenti:

+ + + +

La proprietà display

+ +

I modi principali per realizzare il layout di una pagina via CSS risiedono nei diversi valori della proprietà display. Questa proprietà permette di cambiare l'impostazione predefinita per la visualizzazione di un elemento. Nel flusso normale, tutti gli elementi hanno un valore display predefinito, che definisce il comportamento per cui sono stati progettati. Ad esempio, il fatto che i paragrafi di testo nelle lingue occidentali vengano visualizzati uno sotto l'altro è dovuto al loro stile predefinito display: block. Se all'interno di un paragrafo si inserisce un link in una porzione del testo, il link rimane allineato con il resto del testo invece di andare a capo poiché lo stile predefinito dell'elemento {{htmlelement("a")}} è display: inline.

+ +

Il tipo di visualizzazione predefinito può essere modificato. Ad esempio, l'impostazione predefinita dell'elemento {{htmlelement("li")}} è display: block. Ciò significa che le voci dell'elenco nel documento vengono visualizzate una sotto l'altra, secondo l'impostazione occidentale. Se il valore di display viene modificato in inline, gli elementi dell'elenco verranno visualizzati uno accanto all'altro, come le parole di una frase. La possibilità di modificare il valore di display per tutti gli elementi significa che è possibile mantenere il loro significato semantico definito nell'HTML, indipendentemente dal modo in cui verranno visualizzati. Abbiamo, in sostanza, la possibilità di cambiarne unicamente il comportamento.

+ +

Oltre alla possibilità di cambiare la presentazione dei componenti da block a inline e vice versa, si possono creare layout con metodi più complessi, iniziando proprio dall'impostazione del valore di display. Tuttavia, occorre solitamente abbinarlo ad altre proprietà per realizzare un layout complesso. I due valori principali quando parliamo di layout sono display: flex e display: grid.

+ +

Flexbox

+ +

Flexbox è l'abbreviazione di Modulo Flexible Box Layout, progettato per facilitare la creazione di layout monodimensionali degli elementi sia in riga che in colonna. Per utilizzare Flexbox, occorre impostare display: flex al padre degli elementi su cui si intende applicare il layout; tutti i figli diretti di tale elemento diventeranno componenti flex. Ecco un semplice esempio.

+ +

Il markup HTML sottostante presenta una classe wrapper associata a un elemento contenitore, nel quale sono presenti tre elementi {{htmlelement("div")}}. Secondo il loro valore predefinito, nel documento d'esempio che ha una direzione di scrittura occidentale, gli elementi dovrebbero essere visualizzati come elementi blocco, uno sotto l'altro.

+ +

Tuttavia, una volta specificato display: flex sul padre, i tre componenti figlio si dispongono in colonna. Questo accade perché essi ora sono componenti flex e assumono il medesimo valore iniziale che Flexbox attribuisce loro attraverso il contenitore padre. In questo caso vengono presentati in riga perché il valore iniziale di {{cssxref("flex-direction")}} impostato dal padre è row. Si allungano tutti fino a raggiungere l'altezza del componente più alto perché il valore iniziale della proprietà {{cssxref("align-items")}} viene impostato a stretch dal padre. Quindi i componenti si distendono fino a raggiungere l'altezza del contenitore flex, che in questo caso è definita dal più alto tra i suoi componenti. Tutti i componenti si schierano al principio del contenitore, lasciando spazio libero alla fine della riga.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Uno</div>
+  <div class="box2">Due</div>
+  <div class="box3">Tre</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

Oltre alle suddette proprietà applicabili al contenitore flex, esistono anche proprietà che possono essere impostate sui componenti figlio. Tra le altre cose, queste proprietà possono cambiare il modo in cui i componenti si flettono, facendoli espandere o contrarre per adattarsi allo spazio disponibile.

+ +

È possibile, per esempio, aggiungere la proprietà {{cssxref("flex")}} a tutti i componenti figlio, con valore 1. Questo fa sì che tutti i componenti aumentino in dimensione sino a riempire il contenitore, invece di lasciare dello spazio vuoto alla fine. Se lo spazio aumenta, i componenti si allargano. Se lo spazio diminuisce, si contraggono. Inoltre, se viene aggiunto un nuovo elemento al markup, tutti i componenti diminuiscono la propria dimensione per far spazio al nuovo inserimento continuando a riempire la medesima area, qualsiasi essa sia.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Due</div>
+    <div class="box3">Tre</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

Nota: Questa è solo una breve introduzione alle possibilità di Flexbox. Per approfondire l'argomento vai all'articolo Flexbox.

+
+ +

Griglia layout

+ +

Mentre Flexbox è stato progettato per il layout monodimensionale, la Griglia layout è stata progettata per essere bidimensionale, cioè per disporre gli elementi in righe e colonne.

+ +

Per passare alla modalità Griglia layout occorre innanzitutto impostare un valore di display specifico, display: grid. L'esempio seguente usa un markup simile a quello visto negli esempi di flex: presenta un contenitore e alcuni elementi figlio. Oltre a usare display: grid, definiamo anche una regola per righe e colonne nell'elemento padre utilizzando rispettivamente le proprietà {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-columns")}}. Definiamo tre colonne di 1fr ciascuna e due righe di 100px. Non occorre specificare alcuna regola per gli elementi figlio, che verranno inseriti nelle celle create dalla nostra griglia in maniera automatica.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Due</div>
+    <div class="box3">Tre</div>
+    <div class="box4">Quattro</div>
+    <div class="box5">Cinque</div>
+    <div class="box6">Sei</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

Una volta impostata la griglia, è possibile posizionarvi all'interno i componenti in maniera esplicita invece di affidarsi all'impostazione automatica come nell'esempio precedente. Nel secondo esempio qui sotto viene definita la stessa griglia, ma in questo caso definiamo delle regole anche per i componenti figlio. La linea iniziale e quella finale di ogni componente vengono impostate nelle proprietà {{cssxref("grid-column")}} e {{cssxref("grid-row")}}. Questo fa sì che i componenti seguano tracciati diversi.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Due</div>
+    <div class="box3">Tre</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

Nota: Questi due esempi dimostrano solo una piccola parte delle potenzialità della Griglia layout; per scoprirne altre vedi l'articolo Griglia layout [Grid Layout].

+
+ +

La parte restante di questa guida tratta di altri metodi di strutturazione, meno rilevanti per l'impostazione del layout principale della pagina, ma utili per operazioni specifiche. Una volta compresa la funzione di ogni sezione, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout.

+ +

Elementi float

+ +

Configurando un elemento in float cambiamo il suo comportamento e quello degli elementi che gli succedono nel flusso normale. L'elemento viene spostato a sinistra o a destra e isolato dal flusso normale, il contenuto circostante scorre intorno a questo elemento.

+ +

La proprietà {{cssxref("float")}} ha quattro possibili valori:

+ + + +

Nel seguente esempio, un elemento <div> viene spostato a sinistra e il suo {{cssxref("margin")}} impostato a destra per creare uno spazio tra il testo e l'elemento. In questo modo, il corpo del testo fluisce intorno al box. Questo è tutto ciò che ci occorre conoscere nel web design moderno a proposito degli elementi float.

+ +
+ + +
<h1>Esempio semplice di float</h1>
+
+<div class="box">Float</div>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+
+ +
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+
+
+ +

{{ EmbedLiveSample('Float_1', '100%', 600) }}

+ +
+

Nota: Gli elementi float vengono spiegati in maniera esauriente nell'articolo sulle proprietà float e clear. Prima dell'esistenza di metodi come Flexbox e Griglia layout, gli elementi float venivano utilizzati anche come sistema per suddividere il layout in colonne. È tutt'ora possibile imbattersi in siti web che utilizzano questo sistema. Lo scopriremo nella lezione sui metodi di layout legacy.

+
+ +

Tecniche di posizionamento

+ +

Il posizionamento permette di spostare un elemento dalla posizione che assumerebbe nel flusso normale a una nuova posizione. Il posizionamento non è un indicato per creare il layout di un'intera pagina, ma piuttosto per gestire e ritoccare la posizione di un componente specifico.

+ +

Tuttavia, esistono tecniche utili per gestire alcuni modelli di layout basati sulla proprietà {{cssxref("position")}}. Comprendere la tecnica del posizionamento permette anche di capire cos'è il flusso normale e come estromettere un componente da esso.

+ +

I tipi di posizionamento che ci serve conoscere sono cinque:

+ + + +

Semplice esempio di posizionamento

+ +

Per familiarizzare con queste tecniche di layout, vediamo un paio di semplici esempi basati sullo stesso codice HTML:

+ +
<h1>Posizionamento</h1>
+
+<p>Elemento blocco essenziale.</p>
+<p class="positioned">Elemento blocco essenziale.</p>
+<p>Elemento blocco essenziale.</p>
+ +

Il seguente CSS mostra lo stile preimpostato dell'HTML:

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+
+ +

L'output mostrato è il seguente:

+ +

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

+ +

Posizionamento relativo

+ +

Il posizionamento relativo permette di spostare un componente dalla posizione predefinita che occuperebbe nel flusso normale. Si potrebbe perciò realizzare lo spostamento di un'icona un po' più in basso per allinearla a un'etichetta testuale, aggiungendo la seguente istruzione:

+ +
.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+ +

In questo caso, il secondo paragrafo ha un attributo {{cssxref("position")}} di valore relative che non produce alcun effetto di per sé. Quindi, aggiungiamo le proprietà {{cssxref("top")}} e {{cssxref("left")}}, che spostano l'elemento associato in basso e a destra. Questo passaggio potrebbe sembrare controintuitivo, ma basta figurarselo come se l'elemento subisse una spinta da sinistra e dall'alto che ne provocasse lo spostamento a destra e in basso.

+ +

Aggiungendo questo codice, si ottiene il seguente risultato:

+ +
+ + +
.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

+ +

Posizionamento assoluto

+ +

Il posizionamento assoluto serve a rimuovere un elemento dal flusso normale e riposizionarlo stabilendo l'offset dai margini di un blocco contenitore.

+ +

Riprendendo l'originale esempio senza posizionamento, implementiamo il posizionamento assoluto aggiungendo le seguenti regole CSS per:

+ +
.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+ +

In questo caso, assegniamo absolute alla proprietà {{cssxref("position")}} per il secondo paragrafo e manteniamo i valori attribuiti in precedenza alle proprietà {{cssxref("top")}} e {{cssxref("left")}}. Il codice però produce il risultato seguente.

+ +
+ + +
.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

+ +

La differenza si nota! L'elemento a cui viene assegnato il posizionamento è stato separato completamente dal resto del layout della pagina e allocato al di sopra di esso. Gli altri due paragrafi appaiono giustapposti e non influenzati dal primo, come se non esistesse affatto. Le proprietà {{cssxref("top")}} e {{cssxref("left")}} applicate all'elemento producono un effetto diverso a seconda del tipo di posizionamento, se assoluto oppure relativo. In questo caso, l'offset viene calcolato rispetto al lato superiore e sinistro della pagina. L'elemento padre che contiene l'elemento può essere modificato, come spiegato nella lezione dedicata al posizionamento.

+ +

Posizionamento fisso

+ +

Il posizionamento fisso estrae l'elemento a cui è applicato dal flusso del documento allo stesso modo del posizionamento assoluto. Tuttavia, gli offset vengono applicati in relazione all'area di visualizzazione, invece che in relazione al contenitore padre. Poiché il componente rimane fisso rispetto all'area di visualizzazione, siamo in grado di costruire componenti come un menu che rimane fisso mentre il resto della pagina scorre al livello sottostante.

+ +

Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnata la regola position: fixed.

+ +
<h1>Posizionamento fisso</h1>
+
+<div class="positioned">Fisso</div>
+
+<p>Paragrafo 1.</p>
+<p>Paragrafo 2.</p>
+<p>Paragrafo 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Posizionamento adesivo

+ +

L'ultimo tipo di posizionamento a nostra disposizione è il posizionamento adesivo. Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con regola position: sticky scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato regola in position: fixed.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Nota: per saperne di più sul posizionamento, vedi l'articolo Posizionamento [Positioning].

+
+ +

Layout con tabelle

+ +

La tabelle HTML sono appropriate per rendere i dati tabulari. Tuttavia, molti anni fa, prima che i vari browser supportassero i più elementari CSS in maniera affidabile, gli sviluppatori web utilizzavano le tabelle anche per costruire l'intero layout della pagina, inserendo intestazioni, piè pagina, contenuti ecc. nelle righe e colonne della tabella. Questo approccio funzionava, ma presentava molti problemi: i layout basati su tabella non erano reattivi, generavano un markup molto pesante, creavano difficoltà nel processo di debug e a livello semantico (ad esempio, non venivano correttamente interpretati dagli screen reader).

+ +

Il modo in cui una tabella appare nella pagina web si deve a un'impostazione di proprietà CSS che ne definisce il layout. È possibile utilizzare queste proprietà anche per posizionare elementi diversi dalle tabelle. Talvolta, questo utilizzo viene definito come “tabelle CSS”.

+ +

Di seguito viene mostrato un esempio di questo uso. Tuttavia, i layout realizzati con tabelle CSS dovrebbero ormai essere considerati un metodo legacy, riservato a situazioni in cui occorre garantire la compatibilità con browser datati, che non supportano Flexbox e Griglia.

+ +

Diamo un'occhiata all'esempio. Innanzitutto vi sono alcuni semplici markup che generano il modulo HTML. Ogni elemento HTML ha un'etichetta, in più è presente un paragrafo contenente una didascalia. Tutti i campi di input accoppiati alle etichette vengono inseriti in {{htmlelement("div")}} al fine di produrre il layout.

+ +
<form>
+  <p>Prima di tutto, dichiara il tuo nome e la tua età.</p>
+  <div>
+    <label for="fname">Nome:</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Cognome:</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Età:</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Segue il CSS dell'esempio. Si tratta di un codice CSS piuttosto comune, fatta eccezione per l'impiego della proprietà {{cssxref("display")}}. Gli elementi {{htmlelement("form")}}, {{htmlelement("div")}}, {{htmlelement("label")}} e {{htmlelement("input")}} vengono rispettivamente impostati come una tabella, righe di tabella e celle di tabella. Operando fondamentalmente come il markup di una tabella in HTML, i campi input e le didascalie si allineano in maniera corretta. Rimane solo da regolare la dimensione, i margini ecc. per far apparire l'insieme più gradevole.

+ +

Si noti che il paragrafo contenete la didascalia è stato impostato con la regola display: table-caption, che determina un comportamento simile a {{htmlelement("caption")}} all'interno di una tabella. Inoltre, per motivi estetici, ha l'attributo caption-side: bottom;. In questo modo, la didascalia viene visualizzata sotto al modulo, anche se nel codice sorgente è posizionata prima degli elementi <input>.

+ +

Ciò consente una notevole flessibilità.

+ +
html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}
+ +

Otteniamo il seguente risultato:

+ +

{{ EmbedLiveSample('Table_layout', '100%', '170') }}

+ +

Si veda anche l'esempio dal vivo [TODO] e il codice sorgente [TODO IT source code]

+ +

You can also see this example live at css-tables-example.html (see the source code too.)

+ +

Layout multicolonna

+ +

Il modulo di layout multicolonna permette di strutturare il contenuto in colonne, in maniera simile al testo di un quotidiano cartaceo. Il layout a colonne non è una visualizzazione ottimale nei siti web, in quanto costringe chi legge a scorrere continuamente su e giù per la pagina. Tuttavia, in alcuni casi, suddividere il contenuto in colonne si rivela utile.

+ +

Il blocco si può trasformare in un contenitore multicolonna grazie alla proprietà {{cssxref("column-count")}}, che indica al browser il numero di colonne desiderate, oppure alla proprietà {{cssxref("column-width")}}, che specifica la larghezza delle colonne (il loro numero viene automaticamente calcolato in base alla larghezza totale del contenitore).

+ +

Nel seguente esempio, un elemento <div> con classe container contiene un blocco di codice HTML.

+ +
<div class="container">
+    <h1>Layout multi-colonna</h1>
+
+    <p>Paragrafo 1.</p>
+    <p>Paragrafo 2.</p>
+
+</div>
+
+ +

La proprietà column-width con valore 200 pixel viene applicata a questo contenitore, indicando al browser di disporre tante colonne larghe 200 pixel quante sono necessarie per riempirne la larghezza. Lo spazio rimanente viene suddiviso tra le colonne, come spaziatura tra una e l'altra.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Sommario

+ +

Questo articolo è un breve compendio di tutte le tecniche che occorre conoscere per sviluppare un layout. Continua la lettura per approfondire ogni singolo aspetto di questa tecnologia!

+ +

{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/css/css_layout/normal_flow/index.html b/files/it/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..01e197ad76 --- /dev/null +++ b/files/it/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,108 @@ +--- +title: Flusso normale +slug: Learn/CSS/CSS_layout/Normal_Flow +tags: + - Beginner + - CSS + - Layout + - Learn + - float + - grid + - normal flow +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Questo articolo illustra il flusso normale ovvero il modo in cui si dispongono gli elementi che formano una pagina web in maniera spontanea, senza manipolazioni.

+ + + + + + + + + + + + +
Prerequisiti:Le basi di HTML (leggi Introduzione a HTML [Introduction to HTML]) e nozioni sul funzionamento del CSS (leggi Introduzione al CSS [Introduction to CSS].)
Obiettivo:Comprendere come i browser predispongono il layout delle pagine web prima di intervenire su di esso applicando le regole di stile CSS.
+ +

Come specificato nella lezione precedente, che introduceva al layout CSS, gli elementi di una pagina web si dispongono secondo il flusso normale, a meno che non vengano applicate alcune regole CSS che ne mutano il comportamento.
+ Come premesso, è possibile cambiare il comportamento degli elementi adattando la loro posizione all'interno del flusso oppure estrapolandoli da esso.
+ La maniera migliore per costruire una pagina web è iniziare impostando una struttura chiara e solida, adatta a essere visualizzata nel flusso normale.
+ In questo modo ci assicuriamo che il contenuto sia leggibile, anche quando l'utente usa un browser molto limitato oppure un dispositivo che, tramite screen reader, enuncia il contenuto della pagina.
+ Inoltre, poiché il flusso normale è stato progettato per rendere leggibile il documento, possiamo cominciare da questa impostazione per effettuare le modifiche in maniera armonica, senza forzature.

+ +

Prima di esplorare in maniera approfondita i vari metodi di layout, ripassiamo alcune nozioni apprese nei moduli precedenti sul flusso normale del documento.

+ +

Come si dispongono gli elementi con impostazione predefinita?

+ +

Prima di tutto, il riquadro di un determinato elemento varia a seconda del suo contenuto. Successivamente intervengono altri fattori quali la spaziatura interna, il bordo e il margine esterno, seguendo esattamente la logica del Box Model che abbiamo studiato in precedenza.

+ +

Come da impostazione predefinita, la larghezza del contenuto di un elemento di tipo blocco [block level element] copre il 100% della larghezza dell'elemento padre, mentre l'altezza dipende dall'altezza del suo contenuto. Invece, nel caso degli elementi in linea [Inline elements], sia la larghezza che l'altezza dipendono dal contenuto. Non è possibile imporre una larghezza o un'altezza degli elementi in linea, perché essi si posizionano come contenuti fluidi all'interno di un elemento blocco. Se vogliamo stabilire le sue dimensioni, occorre usare display:block per fare in modo che assuma le proprietà di un elemento blocco (oppure display: inline-block, che presenta caratteristiche di entrambi gli stili).

+ +

Il layout del flusso normale, lo abbiamo detto nell'introduzione al layout CSS, è il sistema impiegato dai browser per disporre gli elementi all'interno dell'area di visualizzazione. Come da impostazione predefinita, gli elementi di tipo blocco si dispongono secondo la direzione blocco, determinata dalla proprietà writing-mode dell'elemento padre (che assume valore iniziale horizontal-tb). Ciascun elemento occupa un'intera linea; inoltre è possibile inserire margini per separare i vari elementi. Nel caso di lingue come l'inglese, con la direzione di scrittura preimpostata da sinistra verso destra e dall’alto verso il basso, gli elementi blocco vengono disposti verticalmente dall'alto in basso.

+ +

Gli elementi in linea si comportano diversamente: non occupano una nuova linea ciascuno, bensì si susseguono lungo la medesima linea e si allineano ai contenuti testuali adiacenti sino a riempire l'intera larghezza dell'elemento padre di tipo blocco. Quando non vi è più spazio, gli elementi vanno fluidamente a capo per occupare la linea successiva.

+ +

Se due elementi adiacenti hanno margini contigui, il margine maggiore prevale su quello più esiguo che sparirà del tutto. Questo comportamento, già trattato negli articoli sui CCS di Mozilla, prende il nome di "margin collapsing" (compressione dei margini).

+ +

Il basilare esempio di seguito illustra il comportamento del flusso normale:

+ +
+
<h1>Flusso di base del documento</h1>
+
+<p>Io sono un tipico elemento blocco. L'elemento blocco che viene dopo di me, occupa la linea orizzontale successiva</p>
+
+<p>Da impostazione predefinita occupiamo il 100% della larghezza del nostro elemento padre, mentre l'altezza di ciascuno è determinata dal suo contenuto. Le nostre larghezza e altezza totali sono uguali a contenuto + margine interno + altezza/larghezza del bordo.</p>
+
+<p>Siamo separati dai margini. A causa del "margin collapse", tra uno e l'altro di noi rimane un solo margine, il maggiore, mentre il minore si comprime.</p>
+
+<p>Gli elementi in linea <span>come questo</span> e <span>quest’altro</span> si collocano entrambi sulla stessa linea e, spazio permettendo, sulla stessa linea dei nodi di testo adiacenti.
+Gli elementi in linea che eccedono la larghezza dell'elemento padre, <span> se possibile vanno a capo, continuando su una nuova linea, proprio come questo testo,</span>, altrimenti si spostano direttamente sulla linea successiva proprio come la seguente immagine: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Sommario

+ +

Ora che abbiamo compreso il flusso normale, cioè il meccanismo predefinito con cui un browser dispone gli elementi nella pagina, passiamo a studiare come cambiare l'impostazione predefinita di visualizzazione al fine di sviluppare il layout secondo la progettazione desiderata.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/css/index.html b/files/it/learn/css/index.html new file mode 100644 index 0000000000..9ffaa802c9 --- /dev/null +++ b/files/it/learn/css/index.html @@ -0,0 +1,65 @@ +--- +title: Impara a stilizzare HTML usando i CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +--- +
{{LearnSidebar}}
+ +
I fogli di stile a cascata - o {{glossary("CSS")}} - sono la seconda tecnologia che dovresti iniziare a imparare dopo l' {{glossary("HTML")}}. Mentre l'HTML è usato per definire la struttura e la semantica del tuo contenuto, i CSS vengono utilizzati per modellarlo e disporlo graficamente. Per esempio puoi utilizzare il CSS per modificare il colore e la dimensione di un testo, animare certi elementi della pagina, aggiungere margini e bordi e molte altre casistiche.
+ +
+ +
Percorso di apprendimento
+ +
Dovresti imparare prima i concetti base dell' HTML prima di cimentarti con i CSS. Ti consigliamo di leggere prima il modulo di introduzione Cominciare con l'HTML.
+ +
Con tale modulo potrai imparare:
+ +
+ + + +

Una volta che avrai compreso i fondamenti dell'HTML, ti consigliamo di imparare HTML e CSS contemporaneamente. Questo perchè l'HTML è molto più interessante e più divertente da imparare quando applichi anche i CSS, e non puoi imparare veramente i CSS senza conoscere l'HTML.

+ +

Prima di iniziare questi argomenti, dovresti avere una certa familiarità nell'uso dei computer e nella navigazione sul web. Dovresti avere un ambiente di lavoro di base impostato secondo i dettagli forniti in Installazione di software fondamentali, e sapere come creare e gestire file, come esposto in Gestire i file — entrambi fanno parte della nostra guida completa per principianti Primi passi con il web.

+ +

Ti raccomandiamo di completare con Primi passi con il web prima di continuare con questo argomento. Questo non è assolutamente indispensabile in quanto molti argomenti affrontati nell'articolo sulle basi del CSS sono anche affrontati nella nostra Introduzione ai CSS, anche se in dettaglio molto maggiore.

+ +

Moduli

+ +

Questo argomento contiene i seguenti moduli, suggeriti in ordine di lettura. Dovresti iniziare con il primo modulo.

+ +
+
Introduzione al CSS
+
Questo modulo ti introdurrà alle basi di come funzionano i CSS, inclusi selettori e proprietà, scrivere regole CSS, applicare CSS ad HTML, come specificare lunghezza, colore ed altri elementi in CSS, ereditarietà e cascata, basi del box model ed il debug di CSS.
+
Styling text
+
Guardiamo ai fondamenti di formattazione del testo, inclusa l'impostazione del carattere, grassetto e corsivo, la spaziatura di lettere e l'interlinea, ombreggiatura ed altre caratteristiche del testo. Concludiamo il modulo guardando a come applicare un carattere personalizzato alla tua pagina e stilizzando liste e collegamenti.
+
Styling boxes
+
Subito dopo diamo un occhio a come stilizzare i contenitori, uno dei passi fondamentali verso la creazione di una pagina web. In questo modulo riepiloghiamo il modello dei contenitori per poi affrontare il controllo della disposizione degli elementi impostando riempimento, bordi e margini, impostando colori di sfondo, immagini ed altre caratteristiche come ombre e filtri sui contenitori.
+
CSS layout
+
A questo punto abbiamo già esaminato i fondamenti dei CSS, come modellare il testo e come modellare e manipolare le caselle in cui si trovano i tuoi contenuti. Ora è il momento di vedere come posizionare le tue box nel posto giusto rispetto al viewport e tra di loro. Abbiamo coperto i prerequisiti necessari in modo che ora possiamo immergerci in profondità nel layout CSS, esaminando diverse impostazioni di visualizzazione, metodi di layout tradizionali che coinvolgono float e posizionamento e nuovi strumenti di layout fangled come flexbox.
+
+ +

Solving common CSS problems

+ + + +

Usare CSS per risolvere problemi comuni fornisce collegamenti a sezioni di contenuto che spiegano come utilizzare CSS per risolvere problemi molto comuni durante la creazione di una pagina web: Styling Box.

+ +

See also

+ +
+
CSS su MDN
+
Il punto d'ingresso principale per la documentazione CSS su MDN, dove troverai documentazione di riferimento dettagliata per tutte le funzionalità del linguaggio CSS. Vuoi conoscere tutti i valori che una proprietà può assumere? Questo è un buon posto dove andare.
+
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 new file mode 100644 index 0000000000..b6bdc7a6fa --- /dev/null +++ b/files/it/learn/css/styling_text/definire_stili_link/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

+ + + +

 

diff --git a/files/it/learn/css/styling_text/index.html b/files/it/learn/css/styling_text/index.html new file mode 100644 index 0000000000..ce435ca33b --- /dev/null +++ b/files/it/learn/css/styling_text/index.html @@ -0,0 +1,57 @@ +--- +title: Styling text +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - NeedsTranslation + - Text + - TopicStub + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

+ +

Prerequisites

+ +

Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin, CodePen or Thimble.

+
+ +

Guides

+ +

This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

+ +
+
Fundamental text and font styling
+
In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
+
Styling lists
+
Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
+
Styling links
+
When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
+
Web fonts
+
Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
+
+ +

Assessments

+ +

The following assessments will test your understanding of the text styling techniques covered in the guides above.

+ +
+
Typesetting a community school homepage
+
In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.
+
-- cgit v1.2.3-54-g00ecf