diff options
Diffstat (limited to 'files/it/learn/css/first_steps')
| -rw-r--r-- | files/it/learn/css/first_steps/how_css_is_structured/index.html | 157 | ||||
| -rw-r--r-- | files/it/learn/css/first_steps/how_css_works/index.html | 114 | ||||
| -rw-r--r-- | files/it/learn/css/first_steps/index.html | 43 |
3 files changed, 314 insertions, 0 deletions
diff --git a/files/it/learn/css/first_steps/how_css_is_structured/index.html b/files/it/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..7942e9a4a9 --- /dev/null +++ b/files/it/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,157 @@ +--- +title: CSS leggibili +slug: Conoscere_i_CSS/CSS_leggibili +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +<p> +</p><p>In questa pagina si parla dello stile e della grammatica del linguaggio CSS stesso. +</p><p>Impareremo a cambiare l'aspetto del file CSS di prova per renderlo più leggibile. +</p> +<h3 id="Informazioni:_CSS_leggibili" name="Informazioni:_CSS_leggibili"> Informazioni: CSS leggibili </h3> +<p>E' possibile aggiungere spazi bianchi e commenti ai propri fogli di stile al fine di renderli più leggibili. +Inoltre si possono raggruppare insieme i selettori quando viene applicata a diversi elementi la stessa regola di stile. +</p> +<h4 id="Spazi_bianchi" name="Spazi_bianchi"> Spazi bianchi </h4> +<p>Spazi bianchi significa proprio spaziatura, tabulazione e nuove linee. +Si possono aggiungere degli spazi bianchi per rendere i fogli di stile più leggibili. +</p><p>Al momento il file CSS di prova ha una regola per ogni linea ed il minimo degli spazi bianchi. In un foglio di stile complesso questa struttura sarebbe molto difficile da decifrare, rendendo la manutenzione e la modifica del foglio di stile alquanto faticose. +</p><p>La struttura da scegliere generalmente risponde alle preferenze personali dell'autore, ma in un progetto condiviso potrebbero esistere delle particolari convenzioni comuni. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Esempi +</caption><tbody><tr> +<td> Alcuni autori preferisono una struttura molto compatta (simile a quella utilizzata fin ora per il file di esempio), dividendo la linea solo quando diventa troppo lunga: +<pre> +.carrot {color: orange; text-decoration: underline; font-style: italic;} +</pre> +<p>Altri preferiscono il metodo "una proprietà per linea": +</p> +<div style="width: 45em;"> +<pre class="eval">.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</pre> +</div> +<p>Altri ancora utilizzano l'indentazione—due, quattro spazi, o una tabulazione sono comuni: +</p> +<div style="width: 45em;"> +<pre class="eval">.carrot { + color: orange; + text-decoration: underline; + font-style: italic; +} +</pre> +</div> +<p>Alcuni autori addirittura preferiscono allineare tutto verticalmente (ma una struttura simile risulta difficile da mantenere): +</p> +<div style="width: 45em;"> +<pre class="eval">.carrot + { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> +</div> +<p>Alcuni usano la tabulazione. Altri solo gli spazi. +</p> +</td></tr></tbody></table> +<h4 id="Commenti" name="Commenti"> Commenti </h4> +<p>I commenti nei CSS iniziano con <code>/*</code> e terminano con <code>*/</code>. +</p><p>I commenti possono essere utilizzati sia per scrivere un vero e proprio commento al foglio di stile, sia per <i>isolare</i> temporaneamente alcune parti di codice per scopi di test. +</p><p>Per isolare una parte del foglio di stile è sufficiente porre quella parte all'interno di un commento. In tal modo il browser la ignorerà. Occorre prestare molta attenzione al punto di inizio e di fine del commento. +Il resto del documento deve continuare ad avere una sintassi corretta. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Esempio +</caption><tbody><tr> +<td>Un commento vero e proprio: +<div style="width: 45em;"> +<pre class="eval">/* stile per la lettere iniziale C del primo paragrafo */ +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> +</div> +<p>Un isolamento: +</p> +<div style="width: 45em;"> +<pre class="eval"><b>/*</b> isolo una porzione del codice +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; + } + <b>*/</b> +</pre> +</div> +</td></tr></tbody></table> +<h4 id="Raggruppare_i_selettori" name="Raggruppare_i_selettori"> Raggruppare i selettori </h4> +<p>Se molti elementi hanno lo stesso stile è possibile raggruppare i selettori creando un gruppo separato da virgole. +La dichiarazione verrà applicata a tutti gli elementi selezionati. +</p><p>Altrove nel foglio di stile sarà anche possibile trattare individualmente gli stessi selettori, per applicare delle regole di stile personalizzate. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Esempi +</caption><tbody><tr> +<td> Questa regola rende gli elementi <small>H1</small>, <small>H2</small> e <small>H3</small> dello stesso colore. +<p>E' comodo indicare tale colore in un solo posto per rendere più agevole e veloce l'eventuale modifica. +</p> +<div style="width: 30em;"> +<pre class="eval">/* colore dei titoli */ +h1, h2, h3 {color: navy;} +</pre> +</div> +</td></tr></tbody></table> +<h3 id="Azione:_Aggiungere_commenti_e_migliorare_la_struttura" name="Azione:_Aggiungere_commenti_e_migliorare_la_struttura"> Azione: Aggiungere commenti e migliorare la struttura </h3> +<p>Modifica il file CSS e assicurati che al suo interno contenga le seguenti regole (in qualsiasi ordine): +</p> +<div style="width: 30em;"> +<pre class="eval">strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +#first {font-style: italic;} +p {color: blue;} +</pre> +</div> +<p>Rendi il foglio di stile più leggibile strutturandolo nel modo che ritieni più logico ed aggiungendo spazi bianchi e commenti dove pare opportuno. +</p><p>Salva il file ed aggiorna la finestra del browser per assicurarti che i cambiamenti effettuati non influiscano sul funzionamento del foglio di stile: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets +</td></tr> +<tr> +<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +<p><br> +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> +<caption>Esercizi +</caption><tbody><tr> +<td> Isola una parte del foglio di stile, senza modificare nient'altro, per rendere la prima lettera del documento rossa: +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> +<tbody><tr> +<td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets +</td></tr> +<tr> +<td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets +</td></tr></tbody></table> +<p>(Esiste più di un modo per ottenere questo risultato.) +</p> +</td></tr></tbody></table> +<p><br> +</p> +<h4 id="Cos.27altro.3F" name="Cos.27altro.3F"> Cos'altro? </h4> +<p>Il foglio di stile dell'esempio utilizza solamente il testo corsivo (<i>italic</i>) o il testo sottolineato (<i>underline</i>). +La prossima pagina della guida spiega ulteriori modi per specificare l'aspetto del testo in un documento: +<b><a href="it/Conoscere_i_CSS/Stili_del_testo">Stili del testo</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "pl": "pl/CSS/Na_pocz\u0105tek/Czytelny_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} diff --git a/files/it/learn/css/first_steps/how_css_works/index.html b/files/it/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..9e65e269af --- /dev/null +++ b/files/it/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,114 @@ +--- +title: Cosa è CSS +slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/it/docs/CSS/Getting_Started", "Getting started")}} Questa è la prima sezione dell'esercitazione "Iniziare (Esercitazione di CSS)" che spiega cosa è CSS. Si creerà un semplice documento su cui lavorare nelle pagine seguenti</p> + +<h3 id="Informazioni:_Che_cosa_sono_i_CSS.3F" name="Informazioni:_Che_cosa_sono_i_CSS.3F">Informazione: Cosa è CSS?</h3> + +<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) è un linguaggio per specificare come i documenti sono presentati all'utente.</p> + +<p>Un <em>documento</em> è un insieme di informazioni strutturate utilizzando un <em>linguaggio a marcatori</em>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Esempi</div> + +<p>Una pagine web come quella che si legge è un documento.<br> + Le informazioni che si vedono in una pagina web sono strutturare utilizzando il linguaggio a marcatori HTML (HyperText Markup Language).<br> + Le finestre di dialogo, anche chiamate finestre modali, di una applicazione sono spesso documenti.<br> + Tali finestre modali potrebbero essere strutturate utilizzano un linguaggio a marcatori, come XUL. E' questo il caso frequente delle applicazioni di Mozilla, ma non è il caso comune.</p> +</div> + +<p>In questa esercitazione, i riquadri titolati <strong>Maggiori dettagli</strong> come quello seguente contengono informazioni facoltative. Se hai fretta di andare avanti con l'esercitazione potresti saltarli, e forse tornare a leggerli più tardi. Diversamente leggerli quando li incontri, e forse seguire i link per imparare di più.</p> + +<div class="tuto_details"> +<div class="tuto_type">Maggiori dettagli</div> + +<p>Un documento non è un file. Potrebbe o non potrebbe essere memorizzato in un file.</p> + +<p>Per esempio, il documento che stai leggendo non è memorizzaotin un file. Quando il browser web richiede questa pagina, il server interroga un database e genera il documento, traendone le sue parti da molti file. D'altra parte, in questa esercitazione si lavora con documenti che sono memorizzati nei file.</p> + +<p>Per maggiori informazioni sui documenti e i linguaggi a amrcatori, si vedano altre parti di questo sito web—per esempio:</p> + +<table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="https://developer.mozilla.org/en/HTML" title="en/HTML">HTML</a></td> + <td>per le pagine web</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en/XML" title="en/XML">XML</a></td> + <td>per i documenti strutturati in generale</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en/SVG" title="en/SVG">SVG</a></td> + <td>per la grafica</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en/XUL" title="en/XUL">XUL</a></td> + <td>per le interfacce utente in Mozillafor user interfaces in Mozilla</td> + </tr> + </tbody> +</table> + +<p>Nella Parte II di questa esercitazione si vedranno esempi di questi linguaggi a marcatore.</p> +</div> + +<p><em>Presentare </em>un documento ad un utente significa convertirlo in una forma utilizzabile dall'essere umano. Browser, come FireFox, Chrome o Internet Explorer, sono progettati per presentare visivamente i documenti — per esempio, sullo schermo di un computer, un proiettore o una stampante.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> + <caption> </caption> + <tbody> + <tr> + <td> + <div class="tuto_type">Maggiori dettagli</div> + CSS non è solo per i browser, e non solo per presentazioni visive. Nella terminologia fomale di CSS, il programma che presenta un documento a un utente è chiamato<em>user agent</em> (UA). Un browser è solo un tipo di UA. Comunque, nella Parte I dell'esercitazione si lavora esclusivamente con CSS in un browser. + + <p>Per qualche definizione formale della terminologia relativa a CSS, vedere le <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definizioni</a> nelle specifiche CSS.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Azione:_Creare_un_documento" name="Azione:_Creare_un_documento">Azione: Creare un documento</h3> + +<p>Utilizzare il proprio computer per creare una nuova cartella ed un nuovo file di testo al suo interno. Il file conterrà il tuo documento.<br> + Copia ed incolla il codice HTML mostrato sotto. Salva il file utilizzando il nome <code>doc1.html</code></p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html></pre> + +<p>Nel proprio browser, aprire una nuova scheda o una nuova finestra, e aprirvi il file.</p> + +<p>Si dovrebbe vedere il testo con le lettere iniziali in grassetto, come questo:</p> + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>Quello che vedi nel tuo browser potrebbe non apparire esattametne uguale a questo, a causa delle impostazioni utilizzate dal browser e da questo wiki. Se ci sono differenze di font, spaziatura e colori, non ha importanza.</p> + +<h4 id="Cos.27altro.3F" name="Cos.27altro.3F">E poi?</h4> + +<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Il documento ancora non utilizza CSS. Nella <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">prossima sezione</a> si utilizzerà CSS per specificare lo stile.</p> diff --git a/files/it/learn/css/first_steps/index.html b/files/it/learn/css/first_steps/index.html new file mode 100644 index 0000000000..106bf156d6 --- /dev/null +++ b/files/it/learn/css/first_steps/index.html @@ -0,0 +1,43 @@ +--- +title: Iniziare (Esercitazione di CSS) +slug: Conoscere_i_CSS +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +<p><span id="result_box" lang="it"><span class="hps">Rivolto a</span>i <span class="hps">principianti assoluti</span><span>,</span> <span class="hps">questa <strong>esercitazione di </strong></span><strong><span class="hps">CSS</span></strong> <span class="hps">per principianti</span> <span class="hps">presenta</span> il </span><a href="https://developer.mozilla.org/en-US/docs/CSS" title="/en-US/docs/CSS">Cascading Style Sheets</a><span id="result_box" lang="it"> <span class="atn hps">(</span><span>CSS)</span><span>.</span> <span class="hps">Guida l'utente</span> <span class="hps">attraverso le</span> <span class="hps">caratteristiche di base del linguaggio </span><span class="hps">con</span> <span class="hps">esempi pratici</span> <span class="hps">che possono essere provati</span> <span class="hps">sul proprio computer</span> <span class="hps">e illustra</span> <span class="hps">le caratteristiche standard</span> <span class="hps">di CSS</span> <span class="hps">che funzionano</span> <span class="hps">nei moderni browser</span><span class="hps">.</span></span></p> + +<p>Questa esercitazione è principalmente per principianti di CSS, ma va bene anche per chi ha qualche conoscenza base di CSS. Se sei un esperto di CSS qusta esercitazione probabilmente non è molto utile, la pagina principale di CSS elenca risorse più avanzate.</p> + +<nav class="fancyTOC"><a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/What_is_CSS" title="Chapter 'What is CSS' of the CSS tutorial">Cos'è CSS</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Perchè usare CSS</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">Come lavora CSS</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascata e ereditarietà</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selettori</a><a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial"> CSS leggibili</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Stili di testo</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Colore</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Contenuto</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Elenchi</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Box</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Impaginazione</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tabelle</a> <a class="button" href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav> + +<h3 id="Di_cosa_hai_bisogno_per_iniziare">Di cosa hai bisogno per iniziare?</h3> + +<p>Per ottenere il massimo da questa esercitazione, hai bisogno di un editor per file di testo e un moderno browser. Devi anche avere una minima conoscenza del loro utilizzo.</p> + +<p>Se non vuoi modificare i file, allora puoi anche solo leggere l'esercitazione e guardare le immagini, ma è il modo meno efficace per imparare.</p> + +<p><strong>Nota: </strong> CSS fornisce un modo di lavorare con il colore, quindi parte di questa esercitazione dipende dal colore. Puoi utilizzare queste parti dell'esercitazione semplicemente se ha un display a colori e una normale visione dei colori.</p> + +<h3 id="Come_utilizzare_questa_esercitazione">Come utilizzare questa esercitazione</h3> + +<p>Per utilizzare questa esercitazione, leggi le pagine attentamente e in sequenza. Se salti una pagina, ti potresti trovare in difficoltà nel compredere le pagine successive.</p> + +<p>In ogni pagina, puoi usare la sezione <em>Informazioni </em>per capire come funziona CSS. Usare la sezione <em>Azione</em> per provare ad utilizzare CSS sul proprio computer.</p> + +<p>Per mettere alla prova la propria comprensione, cogli la sfida alla fine di ogni pagina. Le soluzioni alle sfide sono linkate sotto le sfide stesse, quindi non si ha bisogno di guardarle se non lo si vuole.</p> + +<p>Per comprendere CSS in maggiore profondità, leggere le informazioni che si trovano nei box titolati <em>Maggiori dettagli</em>. Utilizzare i collegamenti presenti per trovare informazioni di riferimento su CSS.</p> + +<h2 id="Esercitazione_Parte_II">Esercitazione Parte II</h2> + +<p>Una seconda parte dell'esercitazione fornisce esempi che mostrano la visibilità di CSS utilizzato con altre tecnologie web e Mozilla</p> + +<ol> + <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li> + <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">Grafica SVG</a></strong></li> + <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">Dati XML</a></strong></li> + <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">Collegamento XBL</a></strong></li> + <li><strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Interfacce utente XUL</a></strong></li> +</ol> + +<p> </p> |