CSS: Usando herança com o valor INHERIT

O CSS permite o uso de herança entre os elementos “parentes” possibilitando assim que os filho herdem o estilo do pai.
Em casos de não sobrescrever o estilo padrão o estilo é herdado automaticamente pelos filhos, caso deseje forçar a herança de atributos que não se herdam automaticamente isso pode ser feito através do valor inherit no CSS.

Exemplo, temos esse código HTML

<div id="pai">
    <div>Filho 1</div>
    <div>Filho 2</div>
</div>

e queremos que a div pai tenha uma borda e todos as div’s filhas também tenham uma borda cada igual a do pai. O CSS ficaria assim:

div#pai { border:1px dashed black; }
div#pai div { border:1px dashed black; }

Dessa maneira teremos atingido o planejado, porém ser realmente usar herança pois tivemos que especificar o estilo para cada atributo, no caso se o estilo da borda do pai mudar precisaremos mudar o estilo do filho também. Para resolver esse problema, basta usarmos o valor inherit no estilo que queremos herdar e pronto, caso mude algo no estilo do pai o filho muda automaticamente, o novo CSS ficaria assim:

div#pai { border:1px dashed black; }
div#pai div { border:inherit; }

Com esse valor é possível usar herança de modo mais simples deixando o código mais legível e com maior manutenibilidade.

6 ideias sobre “CSS: Usando herança com o valor INHERIT

  1. Ariane, vocea ne3o tenha ide9ia de como este1 me ajudando! Essa sua se9rie e9 rtamlenee perfeita, vocea explica de um jeito fe1cil de se entender e enquanto esperamos novos posts vocea nos deixa umas tarefinhas que nos fazem aprender sozinhos ao inve9s de esperar tudo pronto. Acompanho este blog quase todos os dias e passo horas por aqui. Muito obrigada pela ajuda!Ah e aproveitando, gostaria de dar uma sugeste3o (que e9 mais um interesse prf3prio) que e9, se poderia postar um tutorial de como adicionar um calende1rio no blog, um simples como o deste site , se puder agradeceria muito, se ne3o, espero pelo prf3ximo Como Fazer um Template para o Blogger. Muito obrigada e ate9!

  2. Pingback: pret personnel sans justificatif

  3. Pingback: devis assurance auto