Herança no CSS

Tempo de leitura: 2 minutos

Herança no CSS: A herança é um conceito fundamental no CSS que permite que propriedades de estilo sejam passadas de elementos pais para elementos filhos.

Neste artigo, vamos explorar a herança no CSS, entender quais propriedades são herdadas, como forçar ou prevenir a herança e discutir alguns valores especiais.

Propriedades que Herdam

No CSS, algumas propriedades são herdadas por padrão, enquanto outras não são. Propriedades como `color`, `font-family`, `font-size`, `text-align`, e muitas outras são herdadas por padrão. Isso significa que se você definir uma dessas propriedades em um elemento pai, o valor será passado para os elementos filhos.

Por exemplo, se você definir a cor do texto de um elemento `<div>` para azul, todos os elementos filhos desse `<div>` terão o texto azul, a menos que você especifique o contrário.

<style>
    div {
        color: blue;
    }
</style>

<div>
    <span>Texto dentro do span </span>
    <p>Texto do parágrafo</p>
</div>

Forçando Propriedades a Herdar

Se uma propriedade não é herdada por padrão, você pode forçá-la a herdar o valor do elemento pai usando o valor inherit. Por exemplo, a propriedade border não é herdada por padrão, mas você pode forçá-la a herdar o valor do elemento pai da seguinte maneira:

p {
    border: inherit;
}

Neste exemplo, o elemento <p> herdará o valor da propriedade border do seu elemento pai.

Prevenindo a Herança

Se uma propriedade é herdada por padrão, mas você não quer que um elemento filho herde o valor do elemento pai, você pode usar o valor initial para resetar a propriedade ao seu valor padrão. Por exemplo, se você NÃO quer que um elemento <p> herde a cor do texto do seu elemento pai, você pode fazer o seguinte:

p {
    color: initial;
}

Neste exemplo, o elemento <p> terá a cor do texto padrão do navegador, independentemente da cor do texto do elemento pai.

Valores Especiais

Além de inherit e initial, o CSS também fornece alguns outros valores especiais que você pode usar para controlar a herança. Estes incluem:

• unset: Este valor age como inherit se a propriedade é normalmente herdada e como initial se não é.
• revert: Este valor reverte a propriedade ao seu valor anterior, seja ele herdado ou o valor padrão do navegador.

Conclusão

A herança é uma característica poderosa do CSS que permite que você escreva código mais eficiente e fácil de manter. Compreender como a herança funciona, quais propriedades são herdadas e como você pode controlar a herança é essencial para se tornar um desenvolvedor web eficaz.

E para você validar seus códigos você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger!!!