diff options
Diffstat (limited to 'files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html')
| -rw-r--r-- | files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html new file mode 100644 index 0000000000..90723ea85c --- /dev/null +++ b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html @@ -0,0 +1,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> |