Esta página esboça como folhas de estilo interagem numa cascata, e como os elementos subordinados herdam o estilo do elementos primários.
Você alterará à sua folha de estilo de amostra, usando herança para mudar o estilo de muitas partes do seu documento em um passo.
Informação: Cascata e herança
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.
Três códigos principais de informação de estilo formam uma cascata. Eles são:
- O estilo padrão do navegador para a linguagem de marcação
- O estilo especificado por um usuário que está lendo o documento
- O estilo ligado ao documento pelo seu autor
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.
| Quando você lê este documento no seu navegador Mozilla, parte do estilo que você vê, vem do padrão do seu navegador para HTML.
Parte do estilo deve vir das configurações do seu navegador em Opções, ou de um arquivo Parte do seu estilo vem de folhas de estilo ligadas ao documento pelo server do wiki. |
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.
Os elementos STRONG são vermelhos, Isto vem da sua folha de estilo de amostra.
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.
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.
Para estilos em herança, um nó subordinado tem prioridade sobre o estilo que herdou do nó principal.
Estas não são as únicas propriedades que se aplicam. Uma página posterior neste turorial explicará mais.
CSS às vezes providencia um meio para o leitor anular o estilo do autor do documento, usando a palavra-chave !important.
Este meio é para o autor do documento, você não pode sempre predizer exatamente o que os leitores verão. Se você quer saber todos os detalhes sobre cascata e herança, veja Assigning property values, Cascading, and Inheritance na CSS Specification. |
Ação: Usando herança
Edite seu arquivo de amostra CSS.
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 {color: blue; text-decoration: underline;}
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.
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.
|
|
Mude sua folha de estilo deixando somente as letras vermelhas sublinhadas:
|
O que vem depois?
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 Discussão.
Sua folha de estilo de amostra especifica o estilo para os tags, P e STRONG, 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: Seletores