MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Essa é a quarta seção do  Primeiros Passos (Tutorial CSS); 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.

Informação: Cascata e Herança

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.

Existem três fontes principais de estilos que constituem a cascata. São elas:

  • Os estilos padrões do navegador;
  • Os estilos especificados pelos usarios que estão lendo o documento;
  • Os estilos criados pelo desenvolvedor. Que podem ser incluidos em três locais:
    • Em um arquivo externo: Este tutorial utiliza principalmente este método de definição de estilos
    • No inico do documento: Este método é usado apenes para estilos que se aplicam a uma única página.
    • Em um elemento específico: Este método é pouco recomendado, mas pode ser utilizado para testes.

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.

Exemplo

Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.

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 userContent.css do seu navegador.

Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.

Quando você abre o documento de exemplo em seu navegador, alguns elementos <strong>  vem em negrito. Isto vem das configurações padrão do seu navegador.

Os <strong> são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).

Os <strong> elementos também herdam muito do <p> estilo do elemento, porque eles são seus filhos. Da mesma forma, o <p> elemento herda grande parte da <body> estilo do elemento.

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.

Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.

Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.

Mais detalhes

CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. 

Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.

Se você quiser saber todos os detalhes da cascata e herança, consulte  Assigning property values, Cascading, and Inheritance na especificação do CSS

Ação: Usando herança

  1. Edite o seu arquivo CSS.
  2. 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 <p> elemento pai do <strong> element:
    p {color: blue; text-decoration: underline;}
    
  3. 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 <strong> herdaram o estilo sublinhado a partir de seu elemento pai <p>.
     

    Mas os elementos <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 <p>.

Antes
Cascading Style Sheets
Depois
Cascading Style Sheets
Desafio
Mude o seu estilo de modo que somente as letras vermelhas sublinhadas:
Cascading Style Sheets
Possible solution

Move the declaration for underlining from the rule for <p> to the one for <strong>. The resulting file looks like this:

p {color: blue; }
strong {color: red; text-decoration: underline;}

 

Hide solution
Veja a solução do desafio.

Qual o próximo?

 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 seletores.

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores desta página: agathasilva28, RafaelRNunes, Gregory, dhaack
 Última atualização por: agathasilva28,