Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 336621 of CSS

  • Slug della versione: CSS
  • Titolo della versione: CSS
  • ID versione: 336621
  • Data di creazione
  • Autore: Grino
  • Versione corrente? No
  • Commento The article has been updated to the English version

Contenuto della versione

Cascading Style Sheets, spesso abbreviato in CSS, è un linguaggio per sfogli di stile utilizzato per descrivere la presentazione di un documento scritto in HTML o XML (inclusi vari linguaggi XML quali SVG o XHTML).

CSS è uno dei liguaggi fondamentali dell' open web ed ha una specifica W3C standardizzata. Sviluppato a livelli, CSS1 è ora obsoleto, CSS2.1 raccomandato e CSS3, ora scisso in moduli più piccoli, sta avanzando sulla via dello standard. Le prime bozze dei moduli di CSS4 sono in fase di scrittura.

Riferimento su CSS

Un riferimento esaustivo per sviluppatori Web esperti che descrive tutte le proprietà ed i concetti di CSS.

Esecitazione su CSS

Un'introduzione passo-passo per aiutare i principianti assoluti ad iniziare. Presenta tutte le basi di cui si necessita.

Esempi CSS3

Una collezione di esempi che mostrano le più recenti tecnologie CSS3 in azione: un impulso alla creatività.

Documentazione ed esercitazioni su CSS

Concetti chiave del CSS
Descrive la sintassi del linguaggio e introduce a elementi fondamentali quali specificità ed ereditarietà, il modello a box ed il collasso dei margini, impilamento e contesti di formattazione dei blocchi, o i valori iniziali, calcolati, utilizzati ed attuali. Sono anche definite entità quali le proprietà scorciatoia di CSS.
Scrivere CSS efficienti
Spiega come i motori dei fogli di stile realizzano il riscontro dei selettori e descrive le regole per la scrittura di CSS più efficienti.
Utilizzare le trasformazioni di CSS
Illustra le operazioni 2D che possono essere applicate a ogni elemento al fine di ruotarlo, inclinarlo o traslarlo.
Utilizzare le transizioni di CSS
Spiega come cambiare l'aspetto di un elemento utilizzado un'animazione graduale tra lo stato iniziale e il finale.
Utilizzare le animazioni di CSS
Descrive come definire le animazioni di un elemento ma anche come rilevare con Javascript se il browser le supporta.
Utilizzare i gadienti di CSS
Spiega come definire i gradienti, immagini composte di graduali variazioni dei colori.
Utilizzare l'impaginazione multicolonna di CSS
Illustra come effettuare l'impostazione di pagine a colonne multiple utilizzando l'impaginazione multicolonna di CSS Livello 3.
Utilizzare sfondi multipli di CSS
Descrive come definire parecchi sfondi sullo stesso elemento.
Scalare immagini di sfondo
Mostra come controllare il comportamento delle immagini di sfondo quando queste non riscontrano esattamente la dimensione del loro contenitore.
Utilizzare l'interrogazione del media di CSS
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.
Utilizzare i contatori di CSS
Spiega come utilizzare numerazione e contatori automatici, essenzialmente utilizzati come contatori d'elenco.
Font e Tipografia
Informa sulla gestione dei propri font utilizzando {{ cssxref("@font-face") }} e il formato font WOFF.
Utilizzare i box flessibili di CSS
Descrive come utilizzare i box felssibili per la progettazione dell'impaginazione.
Il Rientro Coerente degli Elenchi
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. Scopri come metterli tutti in riga.
 
Utilizzare le informazioni di stile dinamiche
Come ottenere informazioni sullo stile e manipolarlo via DOM.

Vedi Tutto...

Ottentere aiuto dalla comunità

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

  • Controlla le domande comuni su CSS che danno suggerimenti per risolvere i problemi comuni.
  • Vai su Stack Overflow, un sito collaborativo di Q&A in cui cercare risposte alla tue domande o, se non ne trovi, porre lì le tue domande.
  • Consulta il forum layout, che tratta CSS e HTML: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}

Non dimenticare la netiquette...

Strumenti che semplificano lo sviluppo in CSS

  • Il  Servizio di Validazione di CSS del W3Cce controlla se un dato CSS è valido. E' un'insetimabile strumento di debug.
  • L'esensione Firebug di FireFox, una popolare estensione che permette di modificare il CSS in uso sul sito che si sta visualizzando. Molto pratica per testare quanche cambiamento, sebbene questa estensione faccia molto di più.
  • L'esenzione Web Developer di FireFox permette anche di vedere e editare il CSS in uso sul sito visualizzato. Più semplice di Firebug, sebbene meno potente.
  • L'estenzione EditCSS di FireFox permette di editare il CSS nella barra laterale.

Vedi Tutto...

 

 

Sorgente della versione

 
<div class="boxed translate-display">
  <p><strong>Cascading Style Sheets</strong>, spesso abbreviato in CSS, è un linguaggio per&nbsp;<a href="https://developer.mozilla.org/en-US/docs/DOM/stylesheet">sfogli 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>).</p>
  <p>CSS è uno dei liguaggi fondamentali dell' <em>open web</em> ed ha una <a class="external" href="https://w3.org/Style/CSS/#specs">specifica W3C</a> standardizzata. Sviluppato a livelli, CSS1 è ora obsoleto, CSS2.1 raccomandato e CSS3, ora scisso in moduli più piccoli, sta avanzando sulla via dello standard. Le prime bozze dei moduli di CSS4 sono in fase di scrittura.</p>
  <div style="margin:auto;text-align:center;">
    <div class="callout-box action-driven">
      <div>
        Riferimento su CSS</div>
      <p>Un <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference" title="en-US/docs/CSS/CSS_Reference">riferimento esaustivo</a> per <u>sviluppatori Web esperti</u> che descrive tutte le proprietà ed i concetti di CSS.</p>
    </div>
    <div class="callout-box action-driven">
      <div>
        Esecitazione su CSS</div>
      <p>Un'<a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">introduzione passo-passo</a> per aiutare i <em>principianti assoluti</em> ad iniziare. Presenta tutte le basi di cui si necessita.</p>
    </div>
    <div class="callout-box action-driven">
      <div>
        Esempi CSS3</div>
      <p>Una <a href="https://developer.mozilla.org/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collezione di esempi</a> che mostrano <u>le più recenti tecnologie CSS3</u> in azione: un impulso alla creatività.</p>
    </div>
  </div>
  <div class="row topicpage-table">
    <div class="section">
      <h2 class="Documentation" id="Documentation_and_tutorials_about_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 gadienti 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>
          &nbsp;</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="https://stackoverflow.com/questions/tagged/css" title="https://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: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}
          <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&nbsp; <a class="external" href="https://www.css-discuss.org/">lista e sito CSS-Discuss</a></li>
          </ul>
        </li>
      </ul>
      <p><span class="alllinks"><a class="external" href="https://www.catb.org/%7Eesr/faqs/smart-questions.html" title="https://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&nbsp; </span><a class="external" href="https://jigsaw.w3.org/css-validator/">Servizio di Validazione di CSS del W3Cce</a> controlla se un dato CSS è valido. E' un'insetimabile strumento di debug.</li>
        <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">L'esensione 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 quanche cambiamento, 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'esenzione 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'estenzione 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>
  <p>&nbsp;</p>
</div>
<p>&nbsp;</p>
Ripristina questa versione