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
128
129
130
131
132
133
134
|
---
title: Cascata e herança
slug: Web/CSS/Como_começar/Cascata_e_herança
tags:
- 'CSS:Como_começar'
translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
---
<p>{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}</p>
<p>Esta página esboça como folhas de estilo interagem numa cascata, e como os elementos subordinados herdam o estilo do elementos primários.</p>
<p>Você alterará à sua folha de estilo de amostra, usando herança para mudar o estilo de muitas partes do seu documento em um passo.</p>
<h2 id="Informa.C3.A7.C3.A3o:_Cascata_e_heran.C3.A7a" name="Informa.C3.A7.C3.A3o:_Cascata_e_heran.C3.A7a">Informação: Cascata e herança</h2>
<p>O estilo final para um elemento pode ser especificado em muitos lugares diferentes, que pode interagir num meio complexo. Esta interação complexa faz CSS poderoso, mas às vezes isto pode deixar confuso e difícil de depurar.</p>
<p>Três códigos principais de informação de estilo formam uma cascata. Eles são:</p>
<ul>
<li>O estilo padrão do navegador para a linguagem de marcação</li>
<li>O estilo especificado por um usuário que está lendo o documento</li>
<li>O estilo ligado ao documento pelo seu autor</li>
</ul>
<p>O estilo do usuário modifica o estilo padrão do navegador. O estilo do autor do documento então modifica algum outro estilo. Neste tutorial, você é o autor do seu documeto de amostra, e você trabalha somente com folhas de estilo do autor.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
<caption>Exemplo</caption>
<tbody>
<tr>
<td>Quando você lê este documento no seu navegador Mozilla, parte do estilo que você vê, vem do padrão do seu navegador para HTML.
<p>Parte do estilo deve vir das configurações do seu navegador em Opções, ou de um arquivo <code>userConten.css</code> no seu perfil no navegador.</p>
<p>Parte do seu estilo vem de folhas de estilo ligadas ao documento pelo server do wiki.</p>
</td>
</tr>
</tbody>
</table>
<p><br>
Quando você abre seu documento de amostra no seu navegador, os elementos STRONG são mais fortes do que o resto do texto. Isto vem do estilo padrão do seu navegador para o HTML.</p>
<p>Os elementos STRONG são vermelhos, Isto vem da sua folha de estilo de amostra.</p>
<p>Os elementos STRONG as vezes também herdam muito do estilo de elemento P, pois eles são subordinados. No mesmo caminho, o elemento P herda muito do estilo do elemento BODY.</p>
<p>Para estilos em cascata, o autor das folhas de estilo tem prioridade, depois o leitor das folhas de estilo, e por último o padrão do navegador.</p>
<p>Para estilos em herança, um nó subordinado tem prioridade sobre o estilo que herdou do nó principal.</p>
<p>Estas não são as únicas propriedades que se aplicam. Uma página posterior neste turorial explicará mais.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;">
<caption>Mais detalhes</caption>
<tbody>
<tr>
<td>CSS às vezes providencia um meio para o leitor anular o estilo do autor do documento, usando a palavra-chave <code>!important</code>.
<p>Este meio é para o autor do documento, você não pode sempre predizer exatamente o que os leitores verão.</p>
<p>Se você quer saber todos os detalhes sobre cascata e herança, veja <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> na CSS Specification.</p>
</td>
</tr>
</tbody>
</table>
<h2 id="A.C3.A7.C3.A3o:_Usando_heran.C3.A7a" name="A.C3.A7.C3.A3o:_Usando_heran.C3.A7a">Ação: Usando herança</h2>
<p>Edite seu arquivo de amostra CSS.</p>
<p>Adicione esta linha copiando e colando isto. Não importa realmente se você adicionar a linha antes ou depois da que já está lá. Entretando, adicionar isto no topo é mais lógico pois no seu documento o elemento P é primário ao elemento STRONG:</p>
<pre class="brush: css">p {color: blue; text-decoration: underline;}
</pre>
<p>Agora atualize seu navegador para ver o efeito no seu documento de amostra. O sublinhado afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos STRONG herdaram o estilo sublinhado do elemento primário P.</p>
<p>Mas os elementos STRONG ainda são vermelhos. A cor vermelha é própria do estilo, então isto tem prioridade sobre a cor azul do seu elemento primário P.</p>
<table>
<tbody>
<tr>
<td>
<table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;">
<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>
</td>
<td>
<table style="border: 2px outset #36b; 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>
</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
<caption>Desafio</caption>
<tbody>
<tr>
<td>Mude sua folha de estilo deixando somente as letras vermelhas sublinhadas:
<table style="border: 2px outset #36b; 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>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h2>
<p>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 <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Cascata_e_heran%C3%A7a" title="Talk:pt/CSS/Como_começar/Cascata_e_herança">Discussão</a>.</p>
<p>Sua folha de estilo de amostra especifica o estilo para os tags, <code>P</code> e <code>STRONG</code>, mudando o estilo dos elementos correspondentes em todo o seu documento original. A próxima página descreve como espeficar estilos em meios mais seletivos: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Seletores" title="pt/CSS/Como_começar/Seletores">Seletores</a></strong></p>
<p>{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}</p>
|
