Iniziare (Esercitazione di CSS)

  • Slug della versione: Conoscere_i_CSS
  • Titolo della versione: Conoscere i CSS
  • ID versione: 194414
  • Data di creazione
  • Autore: Indigo
  • Versione corrente? No
  • Commento

Contenuto della versione

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).

Who should use this tutorial?

This tutorial is mostly for beginners in CSS, but you can also use it if you have some experience in CSS.

If you are a beginner in CSS, use Part I of this tutorial to understand CSS and learn how to use it. Then use Part II to understand the scope of CSS in Mozilla.

If you know some CSS, you can skip the parts of the tutorial that you already know, and only use the parts that interest you.

If you are experienced in CSS but not in Mozilla, you can skip to Part II.

What do you need before you start?

To get the most from this tutorial, you need an editor for text files and a Mozilla browser (Firefox or Mozilla Suite). You must also know how to use them in basic ways.

If you do not want to edit files, then you can just read the tutorial and look at the pictures, but that is a less effective way for you to learn.

A few parts of the tutorial might require other Mozilla software. Those parts are optional. If you do not want to download other Mozilla software, then you can skip them.

Note:  CSS provides ways to work with color, so parts of this tutorial depend on color. You can only use these parts of the tutorial easily if you have a color display and normal color vision.

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" } ) }}

Sorgente della versione

<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="Who_should_use_this_tutorial.3F"> Who should use this tutorial? </h4>
<p>This tutorial is mostly for beginners in CSS, but you can also use it if you have some experience in CSS.
</p><p>If you are a beginner in CSS, use Part I of this tutorial to understand CSS and learn how to use it.  Then use Part II to understand the scope of CSS in Mozilla.
</p><p>If you know some CSS, you can skip the parts of the tutorial that you already know, and only use the parts that interest you.
</p><p>If you are experienced in CSS but not in Mozilla, you can skip to Part II.
</p>
<h4 name="What_do_you_need_before_you_start.3F"> What do you need before you start? </h4>
<p>To get the most from this tutorial, you need an editor for text files and a Mozilla browser (Firefox or Mozilla Suite).  You must also know how to use them in basic ways.
</p><p>If you do not want to edit files, then you can just read the tutorial and look at the pictures, but that is a less effective way for you to learn.
</p><p>A few parts of the tutorial might require other Mozilla software.  Those parts are optional.  If you do not want to download other Mozilla software, then you can skip them.
</p><p><strong>Note: </strong>
CSS provides ways to work with color, so parts of this tutorial depend on color.
You can only use these parts of the tutorial easily if you have a color display and normal color vision.
</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" } ) }}
Ripristina questa versione