Digamos que você acabou de escrever algum CSS para fazer com que os elementos pareçam um botão.
<a href="http://example.com" class="my-button">Eu sou um link botão</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
Então você adiciona um link em um article
,
com uma classe .my-button
. No entanto, há um problema,
o texto não tem a cor que você esperava. Como isso aconteceu?
Algumas propriedades CSS são herdadas se você não especificar um valor para elas.
No caso desse botão, ele herdou a color
deste CSS:
article a {
color: maroon;
}
Nesta lição, você aprenderá por que isso acontece e como a herança é um recurso poderoso para ajudá-lo a escrever menos CSS.
Fluxo da Herança
Vamos dar uma olhada em como a herança funciona, usando este trecho de HTML:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
O elemento raiz (<html>
) não herdará nada porque é o primeiro elemento do documento.
Adicione um pouco de CSS no elemento HTML,
e ele começará a se propagar pelo documento.
html {
color: lightslategray;
}
A propriedade color
é herdada por outros elementos.
O elemento html
tem color: lightslategray
,
portanto, todos os elementos que podem herdar cores agora terão a cor lightslategray
.
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
Apenas o <p>
terá texto em itálico porque é o elemento aninhado mais profundo.
A herança propaga apenas para baixo, e não para cima, para os elementos pai.
Quais propriedades são herdáveis?
Nem todas as propriedades CSS são herdáveis, mas há muitas que são. Para referência, aqui está a lista completa de propriedades herdáveis, retirado da referência W3 de todas as propriedades CSS:
- azimuth
- border-collapse
- border-spacing
- caption-side
- color
- cursor
- direction
- empty-cells
- font-family
- font-size
- font-style
- font-variant
- font-weight
- font
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- orphans
- quotes
- text-align
- text-indent
- text-transform
- visibility
- white-space
- widows
- word-spacing
Como a herença funciona
Cada elemento HTML tem propriedades CSS definidas com um valor inicial por padrão. Um valor inicial é uma propriedade que não é herdada e aparece como padrão caso a cascata não compute um valor para esse elemento.
Propriedades podem ser herdadas em sua propagação para baixo,
e os elementos filho obterão um valor computado que representa o valor de seu pai.
Isso significa que, se um pai tiver font-weight
definido como bold
, todos os elementos filho estarão em negrito,
a menos que o font-weight
seja definido com um valor diferente,
ou o user agent stylesheet
tenha um valor de font-weight
para esse elemento.
Como herdar e controlar explicitamente a herança
A herança pode afetar os elementos de maneiras inesperadas, então o CSS tem ferramentas para ajudar nisso.
A palavra-chave inherit
Você pode fazer qualquer propriedade herdar o valor computado de seu pai com a palavra-chave inherit
.
Uma maneira útil de usar essa palavra-chave é criar exceções.
strong {
font-weight: 900;
}
Esse trecho CSS define para todos os elementos <strong>
ter um font-weight
de 900
,
em vez do valor padrão bold
, que seria o equivalente a font-weight: 700
.
.my-component {
font-weight: 500;
}
A classe .my-component
define o font-weight
como 500.
Para definir os elementos <strong>
dentro de .my-component
como font-weight: 500
, adicione:
.my-component strong {
font-weight: inherit;
}
Agora, os elementos <strong>
dentro de .my-component
terão um font-weight
de 500
.
Você pode definir explicitamente esse valor,
mas se você usar inherit
e o CSS de .my-component
mudar futuramente,
você pode garantir que seu <strong>
automaticamente se manterá atualizado.
A palavra-chave initial
A herança pode causar problemas com seus elementos e initial
fornece uma poderosa opção de reset.
Você aprendeu anteriormente que toda propriedade CSS tem um valor padrão.
A palavra-chave initial
define o valor inicial padrão de uma propriedade.
aside strong {
font-weight: initial;
}
Esse trecho removerá o negrito de todos os elementos <strong>
dentro de um elemento <aside>
e, em vez disso,
tornará todos em normal, que é o valor inicial.
A palavra-chave unset
A propriedade unset
se comporta de forma diferente se uma propriedade é herdável ou não.
Se uma propriedade é herdável,
a palavra-chave unset
será a mesma que inherit
.
Se a propriedade não for herdável, unset
será igual a initial
.
Lembrar quais propriedades CSS são herdáveis pode ser difícil,
unset
pode ser útil nesse contexto.
Por exemplo, color
é herdável,
mas margin
não é, então você pode escrever isso:
/* Estilos de cores globais para parágrafo em CSS autoral */
p {
margin-top: 2em;
color: goldenrod;
}
/* O p precisa ser resetado nos asides, então você pode usar unset */
aside p {
margin: unset;
color: unset;
}
Agora, o margin
é removido e a color
volta a ser o valor computado herdado.
Você também pode usar o valor unset
com a propriedade all
.
Voltando ao exemplo acima,
o que acontece se os estilos globais p
obtiverem algumas propriedades adicionais?
Apenas a regra que foi definida para margin
e color
será aplicada.
/* Estilos de cores globais para parágrafo em CSS autoral */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Nem todas as propriedades são computadas */
aside p {
margin: unset;
color: unset;
}
Se você alterar a regra aside p
para all: unset
,
não importa quais estilos globais serão aplicados a p
no futuro,
eles sempre serão unset.
aside p {
margin: unset;
color: unset;
all: unset;
}
Check your understanding
Teste seu conhecimento sobre herança
Quais das seguintes propriedades são herdáveis?
line-height
animation
text-align
font-size
color
Qual valor se comporta como inherit
e quando não há nada para herdar se comporta como initial
?
unset
reset
superset