Como o CSS funciona

Go to Previous Section:
Why use CSS? Essa terceira seção do tutorial CSS Getting Started mostra como o CSS funciona no seu navegador e a finalidade do Modelo de Objeto de Documento (DOM). Você vai aprender também como analizar seu documento de exemplo.

Informação: Como o CSS funciona

Quando um navegador exibe um documento, ele deve combinar o conteúdo do doumento com as informações de estilo. Ele processa o documento em duas etapas:

O navegador converte a linguagem de marcação e o CSS no DOM (Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com seu estilo.
O navegador exibe o conteúdo do DOM.

Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando tags, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui tags emparelhadas, uma tag de início e uma tag final. Para a tag inicial, coloque o elemento entre '<' e '>'. Para a tag final, coloque um '/' depois do '<' e antes do nome do elemento.

Dependendo da linguagem de marcação, alguns elementos possuem apenas uma tag de início, ou uma única tag em que '/' vem após o nome do elemento. Um elemento pode também ser um recipiente e incluir outros elementos entre sua tag inicial e final. Lembre-se de sempre fechar as tags dentro do recipiente.

O DOM tem uma estrutura de árvore. Cada elemento, atributo e execução de texto na linguagem de marcação se torna um nó na estrutura da árvore. Os nós são definidos pelas suas relações com outros nós do DOM. Alguns elementos são pais de nós filhos, e nós filhos possuem irmãos.

Entender o DOM ajuda você no design, na depuração e manutenção do seu CSS, porque o DOM é onde o CSS e o conteúdo do documento se encontram.

Exemplo

No seu documento de exemplo, a tag <p> e seu final </p> criam um recipiente:

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

Exemplo em tempo real

https://jsfiddle.net/djaniketster/6jbpS/

No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós 'strongs' e os nós de texto. Os nós 'strong' são eles próprios pais, com nós de texto como filhos.

P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

Ação: Analisando um DOM

Utilizando Inspetor DOM

Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on Inspetor DOM do Mozilla (DOMi) para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).

Use seu navegador Mozilla para abrir seu documento HTML de exemplo.
Na barra de menu do seu navegador, escolha Ferramentas > Inspetor DOM, ou Ferramentas > Desenvolvimento Web > Inspetor DOM.

Mais detalhes

Se o seu navegador Mozilla não ter o DOMi, você pode instalá-lo a partir do site de Add-ons e reiniciar seu navegador. Depois, retorne para esse tutorial.

Se você não quiser instalar o DOMi ( ou você está usuando um navegador que não seja Mozilla), você pode usar Raio-X Goggles na Web, conforme descrito na próxima seção. Ou você pode pular essa seção e ir direto para a próxima página. Ignorar essa seção não interfere no restante do tutorial.
No DOMi, expanda o nó do seu documento clicando em suas flechas.
Nota: Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.

Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:
```
│ ▼╴P
│ │ │ ▼╴STRONG
│ │ └#text
│ ├╴#text
│ ►╴STRONG
│ │
```
Ao selecionar qualquer nó, você pode usar o painel do lado direito do DOMi para saber mais sobre o nó. Por exemplo, quando você seleciona um nó de texto, DOMi exibe o texto no painel do lado direito.

Quando você seleciona um nó de elemento, DOMi analisa e fornece uma enorme quantidade de informações em seu painel do lado direito. Informação de estilo é apenas parte da informação que ele fornece.

Desafio

No DOMi, clique em um nó STRONG.

Use o painel do lado direito do DOMi para descobrir onde a cor do nó está definida como vermelho, e onde sua aparência é mais arrojada do que um texto normal.

Possible solution

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

Hide solution

Veja a solução para o desafio.

Usando Raio-X Goggles da Web

Raio-X Goggles da Web exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.

Vá para a página inicial do Raio-X Goggles da Web.
Arraste o link do bookmarklet na página para a barra de ferramentas do seu navegador.
Abra o seu documento HTML de exemplo.
Ative o Raio-X Goggles da Web clicando no bookmarklet na sua barra de ferramentas.
Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.

O que vem depois?

Go to Next Section:
Cascading & InheritanceSe você aceitou o desafio, você viu que as informações de estilo de mais de um ligar interagem para criar o estilo final para um elemento. A próxima página explica mais sobre essas interações.