Questa pagina spiega il funzionamento dei CSS nel browser. Analizzeremo il documento di esempio, rivelando i dettagli del suo stile.
Informazioni: Come funzionano i CSS
Quando Mozilla visualizza un documento, deve combinare il suo contenuto con le informazioni sullo stile. Quindi elabora il documento in due fasi:
- Nella prima, Mozilla converte il linguaggio di markup e i CSS in un DOM (Document Object Model). Il DOM rappresenta il documento nella memoria del computer. Combina il contenuto del documento con il suo stile.
- Nella seconda fase Mozilla visualizza il DOM.
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.
Un DOM ha una struttura ad albero. Ogni tag e ogni blocco di testo nel linguaggio di marcatura diviene un nodo della struttura ad albero. I nodi del DOM non sono contenitori. Possono invece essere genitori (parent) dei nodi figli (child).
I nodi corrispondenti ai tag sono consociuti anche come elementi.
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Esempio </caption> Nel documento di esempio il tag <p> e il suo tag di chiusura </p> creano un contenitore:
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> Nel DOM, il nodo corrispondente P è un genitore. I suoi figli sono i nodi STRONG e i nodi di testo. I nodi STRONG sono a loro volta genitori dei nodi di testo (che ne sono quindi figli): P ├─STRONG │ │ │ └─"C" │ ├─"ascading" │ ├─STRONG │ │ │ └─"S" │ ├─"tyle" │ ├─STRONG │ │ │ └─"S" │ └─"heets" |
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.
Azione: Analizzare un DOM
Per analizzare il DOM occorre un software particolare. In questa guida si utilizza il DOM Inspector di Mozilla (o DOMi) per analizzare il DOM.
Apri il documento di esempio con il browser Mozilla.
Dalla barra dei menu del browser, seleziona Strumenti – DOM Inspector, oppure Strumenti – Sviluppo Web – DOM Inspector.
<caption style="font-weight:bold; text-align:left;">Di più... </caption>| Se il tuo browser Mozilla non possiede il DOMi, è sufficiente reinstallare il browser avendo cura di scegliere l'installazione dei componenti di sviluppo.
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. |
Nel DOMi, espandi i nodi del tuo documento cliccando sulle loro freccette.
Nota: Gli spazi nel file HTML potrebbero far sì che il DOM mostri alcuni nodi di testo vuoti, che possono essere ignorati.
Il risultato dovrebbe essere simile a questo, a seconda di quali nodi siano stati espansi:
│ ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ▶╴STRONG │ │ |
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.
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.
| Nel DOMi, fai clic su un nodo STRONG.
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. |
Cos'altro?
Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione.
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.
La prossima pagina spiega meglio queste interazioni: Cascata ed ereditarietà