Herança
Resumo
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.
Propriedades herdadas
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).
Propriedades não herdadas
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
).
Notas
A palavra-chave inherit
permite aos autores especificar explicitamente a herança. Ela funciona tanto em propriedades herdadas como não herdadas.