{{ CSSTutorialTOC() }}
{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "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.
Quando um navegador exibe um documento, ele deve combinar o conteúdo do documento com as informações de estilo. Ele processa o documento em duas etapas:
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.
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
http://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"
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).
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.
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.
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.
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.
Raio-X Goggles da Web exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.
{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}Se 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.