diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/it/learn/css/css_layout/index.html | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/it/learn/css/css_layout/index.html')
| -rw-r--r-- | files/it/learn/css/css_layout/index.html | 78 |
1 files changed, 0 insertions, 78 deletions
diff --git a/files/it/learn/css/css_layout/index.html b/files/it/learn/css/css_layout/index.html deleted file mode 100644 index 31a85170fa..0000000000 --- a/files/it/learn/css/css_layout/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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 ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">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.</p> - -<h2 id="Prerequisiti">Prerequisiti</h2> - -<p>Per affrontare questo modulo è necessario:</p> - -<ol> - <li>Avere una conoscenza di base dell'HTML, discusso nel modulo Introduzione all'HTML [<a href="/it/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>].</li> - <li>Avere familiarità con i fondamenti di CSS, discussi in Introduzione al CSS [<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>].</li> - <li>Comprendere come assegnare uno stile ai riquadri [<a href="it/docs/Learn/CSS/Building_blocks">Styling boxes</a>].</li> -</ol> - -<div class="note"> -<p><strong>Nota</strong>: 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 <a href="http://jsbin.com/">JSBin</a> oppure <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Guide">Guide</h2> - -<p>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.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduzione ai layout CSS [Introduction to CSS layout]</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flusso normale [Normal flow]</a></dt> - <dd>Gli elementi di una pagina web si dispongono secondo un <em>flusso normale</em>, a meno che non facciamo qualcosa per cambiarlo. Questo articolo spiega le basi di un flusso normale come premessa per imparare a modificarlo.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox [Flexbox]</a></dt> - <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox [Flexbox]</a> è 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 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">[test your flexbox skills]</a> per accertarti di averlo compreso prima di passare all'argomento successivo.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Griglie [Grids]</a></dt> - <dd>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 <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">[test your grid skills]</a> prima di passare all'argomento successivo.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Elementi float [Floats]</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posizionamento [Positioning]</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Layout multicolonna [Multiple-column layout]</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Design reattivo [Responsive design]</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guida per principianti alle media query [Beginner's guide to media queries]</a></dt> - <dd>Le <strong>media query CSS</strong> 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.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">I metodi di layout legacy [Legacy layout methods]</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporto per i browser più datati [Supporting older browsers]</a></dt> - <dd> - <p>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.</p> - </dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Valutazione sulla comprensione dei fondamenti di layout [Assessment: Fundamental layout comprehension]</a></dt> - <dd>Un test per valutare la comprensione dei diversi metodi di layout applicandoli a una vera pagina web.</dd> -</dl> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Esempi pratici di posizionamento [Practical positioning examples]</a></dt> - <dd>Questo articolo mostra come impostare alcuni esempi reali per illustrare le potenzialità del posizionamento.</dd> -</dl> |
