---
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
translation_of_original: Web/Guide/CSS/Getting_started/Cascading_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, &lt;p&gt; e &lt;strong&gt;, 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>