Compreender as regras de herança em CSS3 ajuda a criar locais interessantes que requerem um mínimo de manutenção. Seguindo essas regras, quando a manutenção é necessária, normalmente você tem que fazer apenas uma mudança, em vez de alterar centenas de itens individualmente. Vale a pena experimentar, embora, para que possa compreender os efeitos completos de herança e os efeitos do uso de vários estilos juntos.

1. Criar um novo arquivo HTML5 com o seu editor de texto.

   Seu editor pode não suportar arquivos HTML5. Qualquer arquivo de texto vai fazer.

2. Digite o seguinte código para a página HTML.

   Um Exemplo de Herança CSS
   Um parágrafo fora de um.
   Um parágrafo dentro de um recipiente.

   Esta página contém uma série de estilos inline, e sempre têm a precedência mais alta herança. Por exemplo, a proporciona um font-family of monospace para o

   tag parte da frase. Você poderia fazer a mesma coisa, atribuindo o
   um atributo de classe para o código, mas este exemplo usa o estilo de linha em vez disso.

   o

   usa um estilo inline para definir o estilo text-align para a esquerda. Porque o estilo padrão define o alinhamento para a esquerda, você não vai ver nenhuma diferença. No entanto, se outra mudança de estilo modifica o alinhamento do texto, este estilo terá efeito e evitar o movimento do presente número.

   As modificações de estilo internas todos aparecem dentro do

   tag. Observe que o estilo define especificamente o estilo da fonte para itálico e o tamanho da fonte para médio.

   O segundo estilo é mais específico. Ele define as características para

   tags que aparecem como um filho de um

   . Consequentemente, as regras de herança dizer que este estilo terá prioridade quando as regras de herança são cumpridas, o que significa que os estilos de estilo da fonte e tamanho da fonte será diferente neste caso.

3. Salve o arquivo como Inheritance.HTML.

4. Carregar o exemplo Herança em seu navegador.

   Você vê o papel que a herança e em cascata estilos jogar.

   

5. Criar um novo arquivo CSS com o seu editor de texto.

   Seu editor pode não suportar arquivos CSS. Qualquer arquivo de texto vai fazer.

6. Digite o seguinte informações de estilo CSS.

   body {text-align: center-color: darkred-background-color: Khaki-border: inserida-border-color: Green-} h1 {border: início-border-color: Brown-} p {text-decoration: underline- font-family: "Times New Roman", Times, serif-font-style:-font-size oblíqua: xx-larga}

   o tag aparece como o objeto de nível superior em uma página, para que as alterações observadas no estilo de corpo deve afetar tudo, não especificamente substituído mais tarde. Neste caso, o exemplo altera o alinhamento do texto ao centro e coloca uma borda vermelha escura ao redor de qualquer conteúdo. A cor de fundo também é alterado. Finalmente, o estilo adiciona uma borda verde em torno de cada objeto.

   O estilo h1 substitui quaisquer estilos de corpo. Neste caso, o que significa modificar os estilos de borda.

   O estilo de p também substitui quaisquer estilos de corpo. No entanto, não existem quaisquer propriedades que são o mesmo neste caso, de modo que os estilos p melhorar os estilos herdados do estilo de corpo.

7. Salve o arquivo como Inheritance.CSS.

8. Adicione o seguinte código para o área do arquivo HTML.

   Este código cria o vínculo entre o arquivo HTML eo arquivo CSS.

9. Salve o arquivo HTML e recarregue a página.

   

   Observe que todas as mudanças esperadas estão no lugar. Por exemplo, o texto é centrado, exceto para o um parágrafo que tem um estilo inline substituindo o texto centralizado. O texto do título está agora em vermelho escuro - o texto do parágrafo substitui que a seleção de cores, por isso continua a ser azul. Mesmo que haja um estilo p externo para o tamanho do texto, o estilo interna substitui-lo.

   Você deve observar algo mais sobre o exemplo. O corpo contém uma fronteira de inserção da cor correta eo cabeçalho contém uma fronteira início da cor correta, porque ele tem substituído o padrão.

   No entanto, os números não têm fronteira. De uma vez, mudanças tag afetado todo o documento e alguns deles ainda o fazem. No entanto, outras mudanças afetam apenas o corpo e não outros elementos de bloco. elementos de bloco não herdam algumas configurações do estilo de corpo.

10. Excluir o estilo h1 a partir da folha de estilo Inheritance.CSS.

    Você também pode comentar o estilo h1, adicionando a partida (/ *) e final (* /) comment símbolos a ele assim:

    / * Comentada para mostrar bloco settings.h1 {border: início-border-color: Brown -} * /

11. Salve o arquivo CSS e recarregue a página.

    

    Repare que o título agora carece de uma fronteira. Acontece que o título não estava substituindo o border-nível do corpo - foi a adição de uma nova fronteira. Nunca assuma que um estilo de corpo vai levar a cabo a outros estilos em nível de bloco - algumas configurações simplesmente não. Quando você achar que sua página não olha como você esperava que ele procure, tente configurar a configuração em um nível inferior do bloco.

    Você também pode ver algumas folhas de estilo que acessam o estilo html, o que afeta o etiqueta que contém o tag. É verdade: Você pode trabalhar com o estilo html para conseguir alguns efeitos.

12. Adicione o estilo html mostrado aqui para a folha de estilo Inheritance.CSS.

    html {border: início-border-color: Green-background-color: White-}

13. Salve o arquivo CSS e recarregue a página.

    

    Você raramente tem que contar com o estilo html, porque simplesmente não é necessário. O bloco de html é um nível acima do bloco do corpo, como mostra este exemplo. O bloco de html não lhe dá acesso a qualquer coisa que o bloco corpo não pode mudar na maioria dos casos, com exceção de efeitos especiais, como a mostrada aqui.