Herança

O resumo de cada definição de propriedade do CSS diz se tal propriedade é herdada por padrão ("Inherited": sim) ou é não herdada por padrão ("Inherited": não). Isso controla o que ocorre quando nenhum valor é especificado para uma propriedade em um elemento.

Quando nenhum valor de uma propriedade herdada foi especificado em um elemento, o elemento obtém o valor computado desta propriedade em seu elemento pai. Apenas o elemento raiz do documento obtém o valor inicial dado no resumo da propriedade.

Um exemplo típico de uma propriedade herdada é a propriedade color. Dadas as seguintes regras de estilo:

p {
  color: green;
}

e o markup:

<p>Este paragrafo tem <em>texto enfatizado</em> dentro dele.</p>

As palavras "texto enfatizado" vão aparecer em verde, já que o elemento em herdou o valor da propriedade color do elemento p. Ele não obtém o valor inicial da propriedade (o qual é a cor usada pelo elemento raiz quando a página não especifica nenhuma cor).

Quando nenhum valor para uma propriedade não herdada (algumas vezes chamada de reset property em código Mozilla) é especificado em um elemento, o elemento obtém o valor inicial desta propriedade (como especificado no resumo da propriedade).

Um exemplo típico de uma propriedade não herdada é a propriedade border. Dadas as seguintes regras de estilo:

p {
  border: medium solid;
}

e o markup

<p>Este paragrafo tem <em>texto enfatizado</em> dentro dele.</p>

As palavras "texto enfatizado" não vão ter uma borda (já que o valor inicial de border-style é none).

A palavra-chave inherit permite aos autores especificar explicitamente a herança. Ela funciona tanto em propriedades herdadas como não herdadas.

• Referência CSS
• inherit