path: root/files/it/conoscere_i_css/come_funzionano_i_css/index.html

---
title: Come funzionano i CSS
slug: Conoscere_i_CSS/Come_funzionano_i_CSS
tags:
  - Conoscere_i_CSS
  - DOM
  - Tutte_le_categorie
translation_of: Learn/CSS/First_steps/How_CSS_works
translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works
---
<p>
</p><p>Questa pagina spiega il funzionamento dei CSS nel browser.
Analizzeremo il documento di esempio, rivelando i dettagli del suo stile.
</p>
<h3 id="Informazioni:_Come_funzionano_i_CSS" name="Informazioni:_Come_funzionano_i_CSS"> Informazioni: Come funzionano i CSS </h3>
<p>Quando Mozilla visualizza un documento, deve combinare il suo contenuto con le informazioni sullo stile. Quindi elabora il documento in due fasi:
</p>
<ul><li>Nella prima, Mozilla converte il linguaggio di markup e i CSS in un <i><a href="it/DOM">DOM</a></i> (Document Object Model). Il DOM rappresenta il documento nella memoria del computer. Combina il contenuto del documento con il suo stile.
</li></ul>
<ul><li>Nella seconda fase Mozilla visualizza il DOM.
</li></ul>
<p>Un linguaggio di marcatura utilizza i tag per definire la struttura del documento. Un tag può anche essere un contenitore, con altri tag tra il suo inizio e la sua fine.
</p><p>Un DOM ha una struttura ad albero. Ogni tag e ogni blocco di testo nel linguaggio di marcatura diviene un <i>nodo</i> della struttura ad albero. I nodi del DOM non sono contenitori. Possono invece essere genitori (parent) dei nodi figli (child).
</p><p>I nodi corrispondenti ai tag sono consociuti anche come <i>elementi</i>.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
<caption>Esempio
</caption><tbody><tr>
<td> Nel documento di esempio il tag <code>&lt;p&gt;</code> e il suo tag di chiusura <code>&lt;/p&gt;</code> creano un contenitore:
<div style="width: 24em;">
<pre class="eval">&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;
</pre>
</div>
<p>Nel DOM, il nodo corrispondente P è un genitore.
I suoi figli sono i nodi <small>STRONG</small> e i nodi di testo.
I nodi <small>STRONG</small> sono a loro volta genitori dei nodi di testo (che ne sono quindi figli):
</p>
<div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;">
<p><span style="color: black;">P</span>
├─<span style="color: black;">STRONG</span>
│ │
│ └─"<span style="color: black;">C</span>"
│
├─"<span style="color: black;">ascading</span>"
│
├─<span style="color: black;">STRONG</span>
│ │
│ └─"<span style="color: black;">S</span>"
│
├─"<span style="color: black;">tyle</span>"
│
├─<span style="color: black;">STRONG</span>
│ │
│ └─"<span style="color: black;">S</span>"
│
└─"<span style="color: black;">heets</span>"
</p>
</div>
</td></tr></tbody></table>
<p>Comprendere il DOM aiuta nel progettare, correggere e manutenere il CSS, poiché il DOM è il luogo in cui si incontrano CSS e contenuto del documento.
</p>
<h3 id="Azione:_Analizzare_un_DOM" name="Azione:_Analizzare_un_DOM"> Azione: Analizzare un DOM </h3>
<p>Per analizzare il DOM occorre un software particolare.
In questa guida si utilizza il <a href="it/DOM_Inspector">DOM Inspector</a> di Mozilla (o DOMi) per analizzare il DOM.
</p><p>Apri il documento di esempio con il browser Mozilla.
</p><p>Dalla barra dei menu del browser, seleziona Strumenti – DOM Inspector, oppure Strumenti – Sviluppo Web – DOM Inspector.
</p>
<table style="border: 1px solid #36b; background-color: #f4f4f4; padding: 1em;">
<caption>Di più...
</caption><tbody><tr>
<td> Se il tuo browser Mozilla non possiede il DOMi, è sufficiente reinstallare il browser avendo cura di scegliere l'installazione dei componenti di sviluppo.
<p>Se non hai intenzione di installare il DOMi, puoi saltare questa parte e andare direttamente alla prossima pagina.
Saltare questa sezione non interferisce con la comprensione del resto della guida.
</p>
</td></tr></tbody></table>
<p><br>
Nel DOMi, espandi i nodi del tuo documento cliccando sulle loro freccette.
</p><p><b>Nota: </b> Gli spazi nel file HTML potrebbero far sì che il DOM mostri alcuni nodi di testo vuoti, che possono essere ignorati.
</p><p>Il risultato dovrebbe essere simile a questo, a seconda di quali nodi siano stati espansi:
</p>
<table style="border: 2px outset #36b; padding: 0 0 0 2em;">
<tbody><tr>
<td><div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;">
<p>│
<span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span>
│ │
│ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span>
│ │ └<span style="color: darkblue;">#text</span>
│ ├╴<span style="color: darkblue;">#text</span>
│ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span>
│ │
</p>
</div>
</td></tr></tbody></table>
<p>Quando si seleziona un nodo, nel pannello di destra del DOMi vengono mostrate informazioni ulteriori a proposito di quel nodo.
Per esempio quando si seleziona un nodo di testo, il DOMi mostra il testo nel pannello di destra.
</p><p>Quando viene selezionato il nodo di un elemento, il DOMi lo analizza e fornisce una grande quantità di informazioni nel pannello di destra. Le informazioni sullo stile non sono che una parte di quelle fornite.
</p><p><br>
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
<caption>Esercizi
</caption><tbody><tr>
<td> Nel DOMi, fai clic su un nodo <small>STRONG</small>.
<p>Utilizza il pannello di destra del DOMi per trovare in quale punto viene definito il colore rosso del nodo e dove il suo aspetto viene reso più marcato del testo normale.
</p>
</td></tr></tbody></table>
<p><br>
</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>Se hai eseguito gli esercizi, hai potuto vedere come le informazioni sullo stile siano presenti in diversi posti ed interagiscano per rendere lo stile finale dell'elemento.
</p><p>La prossima pagina spiega meglio queste interazioni:
<b><a href="it/Conoscere_i_CSS/Cascata_ed_ereditariet%c3%a0">Cascata ed ereditarietà</a></b>
</p>{{ languages( { "en": "en/CSS/Getting_Started/How_CSS_works", "fr": "fr/CSS/Premiers_pas/Fonctionnement_de_CSS", "ja": "ja/CSS/Getting_Started/How_CSS_works", "pl": "pl/CSS/Na_pocz\u0105tek/Jak_dzia\u0142a_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Como_o_CSS_trabalha" } ) }}