Esta página explica como o CSS trabalha no seu navegador. Você analiza seu documento de amostra, reavaliando os detalhes do seu estilo.
Informação: Como o CSS trabalha
Quando o Mozilla exibe um documento, é necessário combinar o conteúdo do documento com seu estilo de informação. Então o documento é processado em dois estágios:
- No primeiro estágio, o Mozilla converte a linguagem de marcação e o CSS em DOM (Document Object Model - Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Isto combina o conteúdo do documento com seu estilo.
- No segundo estágio, o Mozilla exibe o DOM.
Uma linguagem de marcação usa tags para definir a estrutura do documento. Uma tag pode armazenar outras tags entre seu início e fim.
Um DOM tem a estrutura como a de uma árvore. Cada tag e período do texto na linguagem de marcação torna-se um nó na estrutura da árvore. Os nós do DOM não são armazenadores. Em substituição, eles são primários aos nós subordinados.
Os nós que correspondem a tags também são conhecidos por elementos.
No seu documento de amostra, a tag <p> e seu fim </p> criam um armazenamento:
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> No DOM, o corespondente ao nó P é um primário. Os subordinados são os nós STRONG e os nós do texto. Os nós STRONG são os primários, e os nós do texto são os subordinados. P ├─STRONG │ │ │ └─"C" |
O entendimento do DOM ajuda-o a projetar, depurar e manter seu CSS, pois o DOM é onde o seu CSS e o conteúdo do documento se unem.
Ação: Analizando um DOM
Para analizar um DOM, você precisa de um software especial. Aqui, você usa o DOM Inspector (DOMi) da Mozilla para analizar um DOM.
Use seu navegador Mozilla para abrir seu documento simples.
Na barra de menu do seu navegador, escolha Ferramentas – DOM Inspector, ou talvez Ferramentas – Desenvolvimento Web – DOM Inspector.
| Se seu navegador Mozilla não tem o DOMi, você pode reinstalá-lo assegurando-se de escolher para instalar o componente de ferramentas da web. Então retorne a este tutorial.
Se você não quiser instalar o DOMi, você pode pular esta seção e ir diretamente para a próxima página. Pulando esta seção você não interfere com o resto deste tutorial. |
No DOMi, expanda os nós do seu documento clicando em suas flechas.
Nota: O espaçamento em seu arquivo HTML faz com que o DOMi mostre alguns nós de texto vazios, que você pode ignorar.
O resultado deve ser parecido com isto, dependendo do que você tenha expandido:
|
│ |
Quando você seleciona algum nó, você pode usar o painel direito do DOMi para achar mais sobre ele. Por exemplo, quando você seleciona um nó do texto, DOMi mostra para você o texto no painel da direita.
Quando você seleciona um elemento nó, DOMi o analiza e fornece uma enorme quantidade de informações no seu painel direito. A informação sobre estilo é somente uma parte das informações que ele fornece.
| No DOMi, clique no nó STRONG.
Use o painel direito do DOMi para achar onde fica a cor do nó (vermelho) e onde sua aparência é mais forte que o texto normal (negrito). |
O que vem depois?
Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.
Se você tomou o desafio, você viu o estilo da informação em mais de um lugar interagir para criar o estilo final para um elemento.
A próxima página explica mais sobre estas interações: Cascata e herança