Esta tradução está incompleta. Ajude atraduzir este artigo.
Go to Previous Section:
How CSS works.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 elemtos 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.
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
- Edite o seu arquivo CSS.
- 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;} - 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. O
<strong>elementos herdaram o estilo sublinhado a partir de seu pai<p>elemento.
Mas os
<strong>lementos ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu pai<p>elementos.
| Cascading Style Sheets |
| Cascading Style Sheets |
| Cascading Style Sheets |
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
Qual o próximo?
Go to Next Section:
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 seletores.