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
126
127
|
---
title: Cascata e herança
slug: Web/CSS/Getting_Started/Cascading_and_inheritance
tags:
- Guía
- Iniciante
translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">Primeiros Passos (Tutorial CSS)</a>; Ela descreve como folhas de estilos interagem em cascata e como elementos herdam os estilos dos seus pais. Você pode usar herança para alterar o estilo de varios elementos da sua página de uma unica vez.</span></p>
<h2 class="clearLeft" id="Informação_Cascata_e_Herança">Informação: Cascata e Herança</h2>
<p>O estilo final de um elemento pode ser setado em varios locais diferentes, que interagem entre si de uma forma complexa. Está forma de interação torna o CSS poderoso, mas pode torna-lo confuso e dificil de depurar.</p>
<p>Existem três fontes principais de estilos que constituem a cascata. São elas:</p>
<ul>
<li>Os estilos padrões do navegador;</li>
<li>Os estilos especificados pelos usarios que estão lendo o documento;</li>
<li>Os estilos criados pelo desenvolvedor. Que podem ser incluidos em três locais:
<ul>
<li>Em um arquivo externo: Este tutorial utiliza principalmente este método de definição de estilos</li>
<li>No inico do documento: Este método é usado apenes para estilos que se aplicam a uma única página.</li>
<li>Em um elemento específico: Este método é pouco recomendado, mas pode ser utilizado para testes.</li>
</ul>
</li>
</ul>
<p>O estilo do usuario modificam o estilo padão do navegador e o estilo do desenvolvedor da página modifica ambos os outros estilos. Neste tutorial você estará desenvolvendo as folhas de estilos.</p>
<div class="tuto_example">
<div class="tuto_type">Exemplo</div>
<p>Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.</p>
<p>Parte pode ser definida em configurações personanizadas no navegador. No Firefox, esta configurações podem ser personalizadas na janela de preferências, ou você pode especificar os estilos no arquivo <code>userContent.css</code> do seu navegador.</p>
<p>Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.</p>
</div>
<p>Quando você abre o documento de exemplo em seu navegador, alguns elementos {{ HTMLElement("strong") }} vem em negrito. Isto vem das configurações padrão do seu navegador.</p>
<p>Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).</p>
<p>Os {{HTMLElement ("strong")}} elementos também herdam muito do {{HTMLElement ("p")}} estilo do elemento, porque eles são seus filhos. Da mesma forma, o {{HTMLElement ("p")}} elemento herda grande parte da {{HTMLElement ("body")}} estilo do elemento.</p>
<p>Para os estilos em cascata, as folhas de estilo do autor têm prioridade, depois as folhas de estilo leitor, e enfim os padrões do navegador.</p>
<p>Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.</p>
<p>Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.</p>
<p>Mais detalhes</p>
<div class="tuto_details">
<p>CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. </p>
<p>Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.</p>
<p>Se você quiser saber todos os detalhes da cascata e herança, consulte <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> na especificação do CSS</p>
</div>
<h2 id="Ação_Usando_herança">Ação: Usando herança</h2>
<ol>
<li>Edite o seu arquivo CSS.</li>
<li>Adicione esta linha, copiando e colando-lo. Realmente não importa se você adicioná-lo acima ou abaixo da linha que já está lá. No entanto, adicionando-o no topo é mais lógico, porque em seu documento a {{ HTMLElement("p") }} elemento pai do {{ HTMLElement("strong") }} element:
<pre class="brush:css">p {color: blue; text-decoration: underline;}
</pre>
</li>
<li>Agora atualize seu navegador para ver o efeito no seu documento de amostra. O subjacente afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos {{ HTMLElement("strong") }} herdaram o estilo sublinhado a partir de seu elemento pai {{ HTMLElement("p") }}.<br>
<p>Mas os elementos {{ HTMLElement("strong") }} ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu elemento pai {{ HTMLElement("p") }}.</p>
</li>
</ol>
<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
</table>
<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;">
<caption>Antes</caption>
<tbody>
<tr>
<td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
<table style="border: 2px outset #3366bb; padding: 1em;">
<caption>Depois</caption>
<tbody>
<tr>
<td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
<div class="tuto_example">
<div class="tuto_type">Desafio</div>
Mude o seu estilo de modo que somente as letras vermelhas sublinhadas:
<table style="border: 2px outset #3366bb; padding: 1em;">
<tbody>
<tr>
<td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
</tr>
</tbody>
</table>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Possible solution</div>
<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p>
<pre class="brush: css">p {color: blue; }
strong {color: red; text-decoration: underline;}
</pre>
<p> </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 do desafio.</a></div>
<h2 id="Qual_o_próximo">Qual o próximo?</h2>
<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}} Sua folha de estilo de amostra especifica estilos para as tags, <p> e <strong>, mudando o estilo dos elementos correspondentes em todo o documento. A próxima seção descreve como especificar mais <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seletores</a>.</p>
|
