path: root/files/it/web/css/index.html

---
title: CSS
slug: Web/CSS
tags:
  - CSS
  - Design
  - Stile
translation_of: Web/CSS
---
<p>Il <strong>Cascading Style Sheets (CSS)</strong> è un linguaggio per <a href="https://developer.mozilla.org/en-US/docs/DOM/stylesheet">fogli di stile</a> utilizzato per descrivere la presentazione di un documento scritto in <a href="https://developer.mozilla.org/en-US/docs/HTML" title="The HyperText Mark-up Language">HTML</a> o <a href="https://developer.mozilla.org/en-US/docs/XML" title="en-US/docs/XML">XML</a> (inclusi vari linguaggi XML quali <a href="https://developer.mozilla.org/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a> o <a href="https://developer.mozilla.org/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>). Il CSS descrive come gli elementi dovrebbero apparire su schermo, su carta, nel parlato o in altri media.</p>

<p>Il CSS è uno dei linguaggi fondamentali dell'<strong>open Web</strong> ed è standardizzato nei browser web secondo la <a class="external" href="http://w3.org/Style/CSS/#specs">specifica W3C</a>. Sviluppato a livelli, il CSS1 è ora obsoleto, il CSS2.1 è raccomandato, e CSS3, ora diviso in moduli più piccoli, sta progredendo sulla via della standardizzazione.</p>

<section id="sect1">
<ul class="card-grid">
 <li><span>Introduzione al CSS</span>

  <p>Se sei nuovo nello sviluppo web, assicurati di leggere il nostro articolo sulle <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics">basi del CSS</a> per imparare cos'è il CSS e come usarlo.</p>
 </li>
 <li><span>Tutorial CSS</span>
  <p>La nostra <a href="https://wiki.developer.mozilla.org/it/docs/Learn/CSS">area di apprendimento CSS</a> contiene una vasta gamma di tutorial per portarti da un livello principiante a competente, coprendo tutti i fondamenti.</p>
 </li>
 <li><span>Guida di Riferimento</span>
  <p>La nostra esaustiva <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Reference">guida di riferimento CSS</a> per sviluppatori esperti descrive ogni proprietà e concetto CSS.</p>
 </li>
</ul>
</section>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Documentazione_ed_esercitazioni_su_CSS">Documentazione ed esercitazioni su CSS</h2>

<dl>
 <dt>Concetti chiave del CSS</dt>
 <dd>Descrive la <a href="https://developer.mozilla.org/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">sintassi del linguaggio </a>e introduce a elementi fondamentali quali <a href="https://developer.mozilla.org/en-US/docs/CSS/Specificity" title="Specificity">specificità</a> ed <a href="https://developer.mozilla.org/en-US/docs/CSS/inheritance" title="inheritance">ereditarietà</a>, il <a href="https://developer.mozilla.org/en-US/docs/CSS/box_model" title="Box model">modello a box</a> ed il <a href="https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">collasso dei margini</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">impilamento</a> e contesti di <a href="https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context" title="block formatting context">formattazione dei blocchi</a>, o i valori <a href="https://developer.mozilla.org/en-US/docs/CSS/initial_value" title="initial value">iniziali</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value" title="computed value">calcolati</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/used_value" title="used value">utilizzati</a> ed <a href="https://developer.mozilla.org/en-US/docs/CSS/actual_value" title="actual value">attuali</a>. Sono anche definite entità quali le <a href="https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">proprietà scorciatoia di CSS</a>.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS" title="CSS/Writing_Efficient_CSS">Scrivere CSS efficienti</a></dt>
 <dd>Spiega come i motori dei fogli di stile realizzano il riscontro dei selettori e descrive le regole per la scrittura di CSS più efficienti.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms" title="How to use CSS3 Transforms (2D and 3D)">Utilizzare le trasformazioni di CSS</a></dt>
 <dd>Illustra le operazioni 2D che possono essere applicate a ogni elemento al fine di ruotarlo, inclinarlo o traslarlo.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="How to use CSS3 Transitions">Utilizzare le transizioni di CSS</a></dt>
 <dd>Spiega come cambiare l'aspetto di un elemento utilizzado un'animazione graduale tra lo stato iniziale e il finale.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="How to use CSS3 Animations">Utilizzare le animazioni di CSS</a></dt>
 <dd>Descrive come definire le animazioni di un elemento ma anche come <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support">rilevare</a> con Javascript se il browser le supporta.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients" title="How to use CSS3 Gradients">Utilizzare i gradienti di CSS</a></dt>
 <dd>Spiega come definire i gradienti, immagini composte di graduali variazioni dei colori.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="How to use CSS3 Multicol layout">Utilizzare l'impaginazione multicolonna di CSS</a></dt>
 <dd>Illustra come effettuare l'impostazione di pagine a colonne multiple utilizzando l'impaginazione multicolonna di CSS Livello 3.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="How to use the CSS3 multiple background feature">Utilizzare sfondi multipli di CSS</a></dt>
 <dd>Descrive come definire parecchi sfondi sullo stesso elemento.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scalare immagini di sfondo</a></dt>
 <dd>Mostra come controllare il comportamento delle immagini di sfondo quando queste non riscontrano esattamente la dimensione del loro contenitore.</dd>
 <dt><a class="internal" href="https://developer.mozilla.org/en-US/docs/CSS/Media_queries" title="How to use CSS3 Media Queries">Utilizzare l'interrogazione del media di CSS</a></dt>
 <dd>Presenta come selezionare i fogli di stile in base a dettagli del dispositivo di visualizzazione, come la dimensione dell'area disponibile, la sua risoluzione o se ha un touchscreen.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS_Counters" title="CSS Counters">Utilizzare i contatori di CSS</a></dt>
 <dd>Spiega come utilizzare numerazione e contatori automatici, essenzialmente utilizzati come contatori d'elenco.</dd>
 <dt>Font e Tipografia</dt>
 <dd>Informa sulla gestione dei propri <a href="https://developer.mozilla.org/en-US/docs/CSS/font" title="font">font</a> utilizzando {{ cssxref("@font-face") }} e il formato <a href="https://developer.mozilla.org/en-US/docs/WOFF" title="About_WOFF">font WOFF</a>.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" title="Using CSS flexible boxes">Utilizzare i box flessibili di CSS</a></dt>
 <dd>Descrive come utilizzare i box felssibili per la progettazione dell'impaginazione.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Consistent_List_Indentation" title="Consistent_List_Indentation">Il Rientro Coerente degli Elenchi</a></dt>
 <dd>Cercare di cambiare il rientro delle liste con i CSS è più complicato di quanto sembri, ma solo perchè i browser conformi a CSS hanno intrapreso strade diverse sul rientro predefinito. <span id="result_box" lang="it"><span class="hps">Scopri</span> <span class="hps">come metterli tutti</span><span class="hps"> in</span> <span class="hps">riga.</span></span></dd>
 <dt></dt>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_dynamic_styling_information" title="DOM/Using_dynamic_styling_information">Utilizzare le informazioni di stile dinamiche</a></dt>
 <dd>Come ottenere informazioni sullo stile e manipolarlo via DOM.</dd>
</dl>

<p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/CSS" title="/en-US/docs/tag/CSS">Vedi Tutto...</a></span></p>
</div>

<div class="section">
<h2 class="Community" id="Community" name="Community">Ottentere aiuto dalla comunità</h2>

<p>Hai bisogno di aiuto su problemi relativi a CSS e non trovi la soluzione nella documentazione?</p>

<ul>
 <li><span id="result_box" lang="it"><span class="hps">Controlla le</span> </span><a href="https://developer.mozilla.org/en-US/docs/CSS/Common_CSS_Questions" title="en-US/docs/CSS/Common_CSS_Questions">domande comuni su CSS</a><span id="result_box" lang="it"> <span class="hps">che danno suggerimenti</span> <span class="hps">per risolvere i</span> <span class="hps">problemi</span> comuni<span>.</span></span></li>
 <li>Vai su <a href="http://stackoverflow.com/questions/tagged/css" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>, un sito collaborativo di Q&amp;A in cui cercare risposte alla tue domande o, se non ne trovi, porre lì le tue domande.</li>
 <li>Consulta il forum layout, che tratta CSS e HTML:
  <ul>
   <li>Poni le tue domande sul canare IRC di Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a></li>
   <li>Poni le tue domande sulla  <a class="external" href="http://www.css-discuss.org/">lista e sito CSS-Discuss</a></li>
  </ul>
 </li>
</ul>

<p><span class="alllinks"><a class="external" href="http://www.catb.org/%7Eesr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Non dimenticare la <em>netiquette</em>...</a></span></p>

<h2 class="Tools" id="Tools" name="Tools">Strumenti che semplificano lo sviluppo in CSS</h2>

<ul>
 <li><span class="external">Il </span><a class="external" href="http://jigsaw.w3.org/css-validator/">Servizio di Validazione di CSS del W3C</a> controlla se un dato CSS è valido. E' un'inestimabile strumento di debug.</li>
 <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">L'estensione Firebug</a><span class="external"> di FireFox, una popolare estensione che permette di modificare il CSS in uso sul sito che si sta visualizzando. Molto pratica per testare i cambiamenti, sebbene questa estensione faccia molto di più</span>.</li>
 <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">L'estensione Web Developer</a> di FireFox permette anche di vedere e editare il CSS in uso sul sito visualizzato. Più semplice di Firebug, sebbene meno potente.</li>
 <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">L'estensione EditCSS</a> di FireFox permette di editare il CSS nella barra laterale.</li>
</ul>

<p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/CSS:Tools" title="/en-US/docs/tag/CSS:Tools">Vedi Tutto...</a></span></p>

<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2>

<ul>
 <li>Mozilla Learn, <a href="https://developer.mozilla.org/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">risorse su CSS</a>.</li>
 <li>I linguaggi Open Web a cui CSS è spesso applicato: <a href="https://developer.mozilla.org/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/SVG" title="SVG">SVG</a>, <a href="https://developer.mozilla.org/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="https://developer.mozilla.org/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li>
 <li>Le tecnologie di Mozilla che fanno esteso uso di CSS: <a href="https://developer.mozilla.org/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, <a href="https://developer.mozilla.org/en-US/docs/Extensions" title="en-US/docs/Extensions">estensioni</a> e <a href="https://developer.mozilla.org/en-US/docs/Themes" title="en-US/docs/Themes">temi</a> di Firefox e Thunderbird.</li>
</ul>
</div>
</div>