CSS Academy · Aula

Herança e a Propriedade all

Compreenda as regras de herança do CSS e use a propriedade all para redefinir estilos herdados.

Herança e a Propriedade all é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que é herança

Algumas propriedades CSS transferem automaticamente seu valor calculado para os elementos filhos. Isso é herança. Ela evita escrever a mesma regra para cada elemento de um componente.

Propriedades herdadas

Normalmente herdadas: propriedades tipográficas e de texto:

font-family, font-size, font-weight, font-style
color
line-height
letter-spacing
text-align
visibility
Propriedades personalizadas de CSS

Propriedades não herdadas

Normalmente NOT herdadas: propriedades do modelo de caixa e do layout:

margin, padding, border
width, height
background
display, position
box-shadow, transform

Palavra-chave inherit

Force a herança explicitamente com a palavra-chave inherit — útil para elementos de formulário que não herdam a fonte por padrão:

<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
  <input type="text" placeholder="Inherits font/color" />
  <button>Button inherits too</button>
  <textarea>Inherits</textarea>
  <select><option>Option A</option></select>
</div>

Palavra-chave initial

A palavra-chave initial redefine uma propriedade para seu valor inicial padrão do navegador, conforme definido pela especificação do CSS — ignorando a herança e os estilos do agente do usuário.

<div style="font-size: 30px; color: tomato;">
  <p>Normal text inherits large tomato-colored style from its parent.</p>
  <p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>

Palavra-chave unset

unset depende do contexto:

Para propriedades herdadas: funciona como inherit
Para propriedades não herdadas: funciona como initial

Na prática, ele "limpa" uma propriedade, retornando-a ao seu estado natural.

<div style="color: tomato;">
  <p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
  <p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>

Palavra-chave revert

revert retorna ao valor da folha de estilos do agente do usuário do navegador, restaurando o que o navegador exibiria por padrão, sem nenhum estilo do autor. É útil para widgets incorporados de terceiros.

<div style="color: tomato; font-family: Georgia, serif;">
  Ancestor style is tomato serif text.
  <div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>

A propriedade all

A propriedade all é uma abreviação que aplica uma palavra-chave a todas as propriedades CSS simultaneamente, exceto direction e unicode-bidi.

<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
  <div class="isolated-widget">all: initial — resets everything to spec defaults</div>
  <div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>

all: initial na prática

Utilize all: initial quando precisar criar um componente completamente isolado, que não seja afetado pelos estilos globais ou dos elementos-pai:

<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
  Page context — large serif tomato text
  <div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>

Padrão all: unset

Remova os estilos de botão do navegador para criar botões personalizados sem precisar conhecer todas as propriedades relevantes:

<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>

Herança e propriedades personalizadas

As propriedades personalizadas do CSS são herdadas por padrão. É isso que as torna poderosas: uma variável definida em :root fica disponível em todos os lugares. Utilize @property { inherits: false } para tornar uma propriedade personalizada não herdável.

Verificação rápida

Qual palavra-chave redefine uma propriedade para o padrão do agente do usuário do navegador, em vez do valor inicial da especificação CSS?

Recapitulação

As propriedades herdadas passam valores aos descendentes; as propriedades não herdadas não fazem isso. As palavras-chave inherit, initial, unset e revert oferecem controle explícito. A propriedade all redefine todas as propriedades de uma só vez, sendo poderosa para componentes isolados e elementos de formulário personalizados.

Perguntas Frequentes

A aula “Herança e a Propriedade all” é grátis?

Sim — o texto completo de “Herança e a Propriedade all” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Herança e a Propriedade all”?

Compreenda as regras de herança do CSS e use a propriedade all para redefinir estilos herdados. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Herança e a Propriedade all”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Cálculo de Especificidade: Estilo Inline, ID, Classe e Elemento
A Cascata: Origem e Ordem
!important: Quando Usar e Por Que Evitar
Herança e a Propriedade all

← Voltar para CSS Academy