aboutsummaryrefslogtreecommitdiff
path: root/files/it/conoscere_i_css/perché_usare_i_css
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:17 -0500
commitda78a9e329e272dedb2400b79a3bdeebff387d47 (patch)
treee6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/it/conoscere_i_css/perché_usare_i_css
parent1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff)
downloadtranslated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz
translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2
translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip
initial commit
Diffstat (limited to 'files/it/conoscere_i_css/perché_usare_i_css')
-rw-r--r--files/it/conoscere_i_css/perché_usare_i_css/index.html106
1 files changed, 106 insertions, 0 deletions
diff --git a/files/it/conoscere_i_css/perché_usare_i_css/index.html b/files/it/conoscere_i_css/perché_usare_i_css/index.html
new file mode 100644
index 0000000000..b7d304c91f
--- /dev/null
+++ b/files/it/conoscere_i_css/perché_usare_i_css/index.html
@@ -0,0 +1,106 @@
+---
+title: Perché usare i CSS
+slug: Conoscere_i_CSS/Perché_usare_i_CSS
+tags:
+ - Conoscere_i_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p> </p>
+
+<p>Questa pagina spiega perché i documenti utilizzano i CSS. Utilizzerai i CSS per aggiungere un foglio di stile (stylesheet) al tuo documento di esempio.</p>
+
+<h3 id="Informazioni:_Perch.C3.A9_usare_i_CSS.3F" name="Informazioni:_Perch.C3.A9_usare_i_CSS.3F">Informazioni: Perché usare i CSS?</h3>
+
+<p>I CSS aiutano a mantenere le informazioni sul contenuto di un documento separate dai dettagli su come presentarlo. Le informazioni sulla presentazione del documento sono note come <em>stile</em>. Mantenere lo stile separato dal contenuto permette di:</p>
+
+<ul>
+ <li>Evitare duplicazioni</li>
+ <li>Rendere la modifica e la manutenzione più semplice</li>
+ <li>Applicare allo stesso contenuto stili diversi per diversi scopi</li>
+</ul>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Esempi</caption>
+ <tbody>
+ <tr>
+ <td>1) Il tuo sito web potrebbe avere migliaia di pagine che si assomigliano. Utilizzando i CSS si possono immagazzinare le informazioni sullo stile in dei file comuni che vengono condivisi da tutte le pagine.
+ <p>2) E' possibile creare differenti stili in modo che quando l'utente visualizza una pagina web, il browser carichi determinate informazioni sullo stile insieme al contenuto della pagina. Quando invece l'utente stampa la pagina web, venga fornito uno stile diverso che renda la pagina stampata più semplice da leggere.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>In linea di massima il linguaggio di markup è utilizzato per descrivere le informazioni sul contenuto di un documento, non il suo stile. I CSS, al contrario, definiscono lo stile, non il contenuto. (Più avanti nella guida vedremo qualche eccezione.)</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Di più...</caption>
+ <tbody>
+ <tr>
+ <td>Un linguaggio di marcatura come HTML fornisce qualche sistema per specificare lo stile, ad esempio l'uso del tag <code>&lt;b&gt;</code> per segnare un testo in grassetto o la definizione del colore di sfondo della pagina all'interno del tag <code>&lt;body&gt;</code> (questo secondo esempio è fortemente deprecato).
+ <p>Quando si utilizzano i CSS normalmente si evita di "sporcare" in questo modo il codice di markup, concentrando tutte le informazioni sullo stile in un solo posto, possibilmente separato.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Azione:_Creare_un_foglio_di_stile" name="Azione:_Creare_un_foglio_di_stile">Azione: Creare un foglio di stile</h3>
+
+<p>Crea un altro file di testo vuoto nella stessa directory utilizzata prima. Questo file sarà il foglio di stile. Nominalo come: <code>style1.css</code></p>
+
+<p>Nel file CSS, copia e incolla questa singola stringa, poi salva il file:</p>
+
+<div style="width: 40em;">
+<pre class="eval">strong {color: red;}
+</pre>
+</div>
+
+<h4 id="Collegare_il_foglio_di_stile_al_proprio_documento" name="Collegare_il_foglio_di_stile_al_proprio_documento">Collegare il foglio di stile al proprio documento</h4>
+
+<p>Per collegare il foglio di stile al tuo documento occorre modificare il file HTML. Aggiungi la linea segnalata in grassetto:</p>
+
+<div style="width: 40em; color: gray;">
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+ &lt;HEAD&gt;
+ &lt;TITLE&gt;Sample document&lt;/TITLE&gt;
+ <strong style="color: black;">&lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;</strong>
+ &lt;/HEAD&gt;
+ &lt;BODY&gt;
+ &lt;P&gt;
+ &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
+ &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
+ &lt;STRONG&gt;S&lt;/STRONG&gt;heets
+ &lt;/P&gt;
+ &lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+
+<p>Salva il file e ricarica la finestra del browser. Il foglio di stile renderà ora le lettere iniziali in rosso, come segue:</p>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+ <tr>
+ <td><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>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;">
+ <caption>Esercizi</caption>
+ <tbody>
+ <tr>
+ <td>Oltre al rosso ("red"), i CSS accettano altri nomi per indicare i colori (in inglese). Senza guardare una referenza, trova cinque o più nomi di colori che funzionino.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h4 id="Cos.27altro.3F" name="Cos.27altro.3F">Cos'altro?</h4>
+
+<p>Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di <a>Discussione</a>.</p>
+
+<p>Ora che hai un documento di esempio collegato ad un foglio di stile separato, sei pronto per saperne di più su come il browser li combina quando visualizza il documento: <strong><a href="it/Conoscere_i_CSS/Come_funzionano_i_CSS">Come funzionano i CSS</a></strong></p>
+
+<p>{{ languages( { "en": "en/CSS/Getting_Started/Why_use_CSS", "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS" } ) }}</p>