Iniziare (Esercitazione di CSS)

  • Revision slug: Conoscere_i_CSS
  • Revision title: Conoscere i CSS
  • Revision id: 194416
  • Created:
  • Creator: Indigo
  • Is current revision? No
  • Comment /* What do you need before you start? */

Revision Content

Introduzione

Questa guida serve a introdurre nel mondo dei Fogli di stile a cascata, in inglese "Cascading Style Sheets" (CSS).

Saranno analizzate le caratteristiche base dei CSS anche tramite degli esempi pratici che potrai provare da solo sul tuo computer. E' composta da due parti.

  • Prima parte: illustra le caratteristiche standard che funzionano sia sui browser Mozilla che sulla maggior parte dei browser moderni.
  • Seconda parte: contiene alcuni esempi di caratteristiche speciali che funzionano su Mozilla, ma non è detto che funzionino in altri ambienti.

La guida è basata sulle specifiche CSS 2.1(EN).

Chi dovrebbe leggere questo tutorial?

Questa guida è stata pensata soprattutto per coloro che iniziano con i CSS, ma può essere utile anche se si posseggono già delle conoscenze in materia.

Se sei un principiante, leggi la prima parte della guida per comprendere i CSS e per imparare ad utilizzarli. Quindi leggi la seconda parte per osservare la portata che i CSS hanno su Mozilla.

Se hai giusto qualche conoscenza dei CSS, puoi saltare la parte che già conosci e concentrarti solo sulla parte che ti interessa.

Se sei esperto di CSS ma non del loro utilizzo in Mozilla, salta subito alla seconda parte.

Di cosa ho bisogno prima di iniziare?

Per ottenere il massimo da questa guida, è necessario un editor per i file di testo e un browser Mozilla (Firefox o Mozilla Suite). Occorre anche conoscerne le funzionalità base.

Se non hai intenzione di modificare i file, puoi anche limitarti a leggere la guida e guardare le figure, ma è un modo meno efficace per imparare.

Alcune parti della guida potrebbero richiedere altro software di Mozilla. Quelle parti sono facoltative. Se non vuoi scaricare altro software di Mozilla, saltale.

Nota:  Datoché i CSS sono utilizzati anche per gestire i colori, alcune parti della guida dipenderanno dai colori. Tali parti possono essere seguite in modo agevole solo se si dispone di uno schermo a colori e di una normale capacità di distinguere i colori.

How to use this tutorial

To use this tutorial, read the pages carefully and in sequence. If you miss a page, then you might find it difficult to understand later pages.

On each page, use the Information section to understand how CSS works. Use the Action section to try using CSS on your own computer.

To test your understanding, take the challenge at the end of each page. Solutions to some of the challenges are revealed on later pages in the tutorial.

To understand CSS in more depth, read the information that you find in boxes captioned More details. Use the links there to find reference information about CSS.

Tutorial Part I

A basic step-by-step guide to CSS.

  1. What is CSS
  2. Why use CSS
  3. How CSS works
  4. Cascading and inheritance
  5. Selectors
  6. Readable CSS
  7. Text styles
  8. Color
  9. Content
  10. Lists
  11. Boxes
  12. Layout
  13. Tables
  14. Media

Tutorial Part II

Examples that show the scope of CSS in Mozilla.

  1. JavaScript
  2. XBL bindings
  3. XUL user interfaces
  4. SVG graphics
  5. XML data
{{ wiki.languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "ja": "ja/CSS/Getting_Started", "pl": "pl/CSS/Na_pocz\u0105tek", "nl": "nl/CSS/Voor_Beginners" } ) }}

Revision Source

<p>
</p>
<h3 name="Introduzione"> Introduzione </h3>
<p>Questa guida serve a introdurre nel mondo dei Fogli di stile a cascata, in inglese "Cascading Style Sheets" (CSS).
</p><p>Saranno analizzate le caratteristiche base dei CSS anche tramite degli esempi pratici che potrai provare da solo sul tuo computer.  E' composta da due parti.
</p>
<ul><li>Prima parte: illustra le caratteristiche standard che funzionano sia sui browser Mozilla che sulla maggior parte dei browser moderni.
</li></ul>
<ul><li>Seconda parte: contiene alcuni esempi di caratteristiche speciali che funzionano su Mozilla, ma non è detto che funzionino in altri ambienti.
</li></ul>
<p>La guida è basata sulle <a class="external" href="http://www.w3.org/TR/CSS21/">specifiche CSS 2.1</a>(EN).
</p>
<h4 name="Chi_dovrebbe_leggere_questo_tutorial.3F"> Chi dovrebbe leggere questo tutorial? </h4>
<p>Questa guida è stata pensata soprattutto per coloro che iniziano con i CSS, ma può essere utile anche se si posseggono già delle conoscenze in materia.
</p><p>Se sei un principiante, leggi la prima parte della guida per comprendere i CSS e per imparare ad utilizzarli.  Quindi leggi la seconda parte per osservare la portata che i CSS hanno su Mozilla.
</p><p>Se hai giusto qualche conoscenza dei CSS, puoi saltare la parte che già conosci e concentrarti solo sulla parte che ti interessa.
</p><p>Se sei esperto di CSS ma non del loro utilizzo in Mozilla, salta subito alla seconda parte.
</p>
<h4 name="Di_cosa_ho_bisogno_prima_di_iniziare.3F"> Di cosa ho bisogno prima di iniziare? </h4>
<p>Per ottenere il massimo da questa guida, è necessario un editor per i file di testo e un browser Mozilla (Firefox o Mozilla Suite).  Occorre anche conoscerne le funzionalità base.
</p><p>Se non hai intenzione di modificare i file, puoi anche limitarti a leggere la guida e guardare le figure, ma è un modo meno efficace per imparare.
</p><p>Alcune parti della guida potrebbero richiedere altro software di Mozilla. Quelle parti sono facoltative.  Se non vuoi scaricare altro software di Mozilla, saltale.
</p><p><strong>Nota: </strong>
Datoché i CSS sono utilizzati anche per gestire i colori, alcune parti della guida dipenderanno dai colori. Tali parti possono essere seguite in modo agevole solo se si dispone di uno schermo a colori e di una normale capacità di distinguere i colori.
</p>
<h4 name="How_to_use_this_tutorial"> How to use this tutorial </h4>
<p>To use this tutorial, read the pages carefully and in sequence.
If you miss a page, then you might find it difficult to understand later pages.
</p><p>On each page, use the <i>Information</i> section to understand how CSS works.
Use the <i>Action</i> section to try using CSS on your own computer.
</p><p>To test your understanding, take the challenge at the end of each page.
Solutions to some of the challenges are revealed on later pages in the tutorial.
</p><p>To understand CSS in more depth, read the information that you find in boxes captioned <i>More details</i>.
Use the links there to find reference information about CSS.
</p>
<h3 name="Tutorial_Part_I"> Tutorial Part I </h3>
<p>A basic step-by-step guide to CSS.
</p>
<ol><li><b><a href="it/CSS/Getting_Started/What_is_CSS">What is CSS</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Why_use_CSS">Why use CSS</a></b>
</li><li><b><a href="it/CSS/Getting_Started/How_CSS_works">How CSS works</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Cascading_and_inheritance">Cascading and inheritance</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Selectors">Selectors</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Readable_CSS">Readable CSS</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Text_styles">Text styles</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Color">Color</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Content">Content</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Lists">Lists</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Boxes">Boxes</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Layout">Layout</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Tables">Tables</a></b>
</li><li><b><a href="it/CSS/Getting_Started/Media">Media</a></b>
</li></ol>
<h3 name="Tutorial_Part_II"> Tutorial Part II </h3>
<p>Examples that show the scope of CSS in Mozilla.
</p>
<ol><li><b><a href="it/CSS/Getting_Started/JavaScript">JavaScript</a></b>
</li><li><b><a href="it/CSS/Getting_Started/XBL_bindings">XBL bindings</a></b>
</li><li><b><a href="it/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></b>
</li><li><b><a href="it/CSS/Getting_Started/SVG_graphics">SVG graphics</a></b>
</li><li><b><a href="it/CSS/Getting_Started/XML_data">XML data</a></b>
</li></ol>
{{ wiki.languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "ja": "ja/CSS/Getting_Started", "pl": "pl/CSS/Na_pocz\u0105tek", "nl": "nl/CSS/Voor_Beginners" } ) }}
Revert to this revision