Herança

Algumas propriedades escorrem dos pais para os filhos. No Belavista, color e font-family no body vestem o manifesto inteiro — até você cortar a herança de propósito.

O exemplo deste capítulo é 26-heranca, no pacote que acompanha o volume. Mude a cor no body, preveja o parágrafo e o botão, recarregue e confira.

O que você vai aprender

• Reconhecer propriedades que herdam por padrão.
• Usar inherit, initial, unset e revert.
• Entender por que margem e padding não herdam.
• Controlar tipografia a partir da raiz.
• Evitar “reset” cego que quebra a herança útil.

O que herda

Em geral herdam: color, font, font-family, font-size, line-height, letter-spacing, text-align, visibility, cursor, entre outras de texto e algumas de lista.

Não herdam (por padrão): margin, padding, border, width, height, background, display.

body {
  color: #1a1a1a;
  font-family: Georgia, "Times New Roman", serif;
}

.botao {
  /* color herdaria, mas o navegador/estilo de botão pode sobrescrever */
  color: #fff;
  background: #1a1a1a;
  border: 0;
  padding: 0.5rem 1rem;
}

Palavras-chave de controle

.aside {
  color: #555;
}

.aside a {
  color: inherit; /* força a cor do pai */
}

.aviso {
  all: unset; /* cuidado: zera muita coisa */
}

.bloco {
  font-size: initial; /* valor inicial da propriedade */
  color: revert; /* volta ao que a cascata do user agent daria */
}

inherit puxa do pai. initial vai ao valor inicial da propriedade. unset age como inherit se a propriedade for herdável, senão como initial. revert volta um degrau na origem da cascata.

Fluxo prático

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Herança — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <h1>Tipografia da casa</h1>
      <p>Este parágrafo herda cor e família tipográfica.</p>
      <p class="nota">Nota com cor própria.</p>
    </main>
  </body>
</html>

body {
  color: #1a1a1a;
  font-family: Georgia, serif;
  line-height: 1.5;
}

.nota {
  color: #8b1e1e;
}

Erro comum: esperar que margin do body “passe” para os p. Margem não herda; cada caixa tem a sua.

Critério para avançar

Você avança se: lista três propriedades herdáveis; usa inherit num link dentro de um aside; explica unset em uma frase.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. font-family no html chega ao button? E padding?
2. Para que serve color: inherit num link?
3. initial e revert são a mesma coisa?

Respostas comentadas

1. font-family pode herdar (salvo estilo do user agent no botão). padding não herda.
2. Faz o link usar a cor do pai em vez da cor padrão de link do navegador.
3. Não. initial é o valor inicial da propriedade; revert devolve o controle à cascata anterior (em geral o user agent, no autor).