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.

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

  1. Pingback: Bail Bonds Los Angeles

  2. Pingback: Nba Throwback Jerseys

  3. Pingback: Printable Coupons For Great Clips

  4. Pingback: Best Apps For Ipad 2

  5. Pingback: How Can I Get Rid Of My Acne

  6. Pingback: Swiffer Wetjet

  7. Pingback: Solar Flood Lights Outdoor

  8. Pingback: Haircut Coupons

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*


*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>