1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
---
title: Como o CSS funciona
slug: Web/CSS/Getting_Started/Como_CSS_funciona
tags:
- 'CSS:PrimeirosPassos'
- Guía
- Iniciante
- Web
translation_of: Learn/CSS/First_steps/How_CSS_works
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> 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. </span></p>
<h2 class="clearLeft" id="Informação_Como_o_CSS_funciona">Informação: Como o CSS funciona</h2>
<p>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:</p>
<ol>
<li>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.</li>
<li>O navegador exibe o conteúdo do DOM.</li>
</ol>
<p>Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando <em>tags</em>, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui <em>tags </em>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.</p>
<p>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.</p>
<p>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.</p>
<p>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>
<div class="tuto_example">
<div class="tuto_type">Exemplo</div>
No seu documento de exemplo, a tag <p> e seu final </p> criam um recipiente:
<pre class="brush:html"><p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</pre>
<h2 id="Exemplo_em_tempo_real">Exemplo em tempo real</h2>
<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p>
<p>No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós '<em>strongs</em>' e os nós de texto. Os nós <em>'strong'</em> são eles próprios pais, com nós de texto como filhos.</p>
<pre><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>"</pre>
</div>
<h2 id="Ação_Analisando_um_DOM">Ação: Analisando um DOM</h2>
<h3 id="Utilizando_Inspetor_DOM">Utilizando Inspetor DOM</h3>
<p>Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on <a href="/en/DOM_Inspector" title="en/DOM_Inspector">Inspetor DOM</a> do Mozilla (DOMi) para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).</p>
<ol>
<li>Use seu navegador Mozilla para abrir seu documento HTML de exemplo.</li>
<li>Na barra de menu do seu navegador, escolha <strong>Ferramentas > Inspetor DOM</strong>, ou <strong>Ferramentas > Desenvolvimento Web > Inspetor DOM</strong>.
<div class="tuto_details">
<div class="tuto_type">Mais detalhes</div>
<p>Se o seu navegador Mozilla não ter o DOMi, você pode <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">instalá-lo a partir do site de Add-ons </a> e reiniciar seu navegador. Depois, retorne para esse tutorial.</p>
<p>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.</p>
</div>
</li>
<li>No DOMi, expanda o nó do seu documento clicando em suas flechas.
<p><strong>Nota: </strong> Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.</p>
<p>Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:</p>
<pre>│ ▼╴<span style="color: black;">P</span>
│ │ │ ▼╴<span style="color: black;">STRONG</span>
│ │ └<span style="color: darkblue;">#text</span>
│ ├╴<span style="color: darkblue;">#text</span>
│ ►╴<span style="color: black;">STRONG</span>
│ │</pre>
<p>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.</p>
<p>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.</p>
</li>
</ol>
<div class="tuto_example">
<div class="tuto_type">Desafio</div>
<p>No DOMi, clique em um nó <em><strong><small>STRONG</small></strong></em>.</p>
<p>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.</p>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Possible solution</div>
<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
<a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para o desafio.</a></div>
<h3 id="Usando_Raio-X_Goggles_da_Web">Usando Raio-X Goggles da Web</h3>
<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web </a>exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.</p>
<ol>
<li>Vá para a página inicial do <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web</a>.</li>
<li>Arraste o link do <em>bookmarklet </em>na página para a barra de ferramentas do seu navegador.</li>
<li>Abra o seu documento HTML de exemplo.</li>
<li>Ative o Raio-X Goggles da Web clicando no <em>bookmarklet </em>na sua barra de ferramentas.</li>
<li>Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.</li>
</ol>
<h2 id="O_que_vem_depois">O que vem depois?</h2>
<p>{{ 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 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">próxima página</a> explica mais sobre essas interações.</p>
|
