Articles
Introdução ao CSS
Herança no CSS

Herança no CSS

Este artigo explica a herança no CSS.

Você pode verificar propriedades representativas herdadas e não herdadas.

YouTube Video

HTML para Visualização

css-inheritance.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

Herança no CSS

No CSS, algumas propriedades são automaticamente herdadas dos elementos pai para os elementos filhos. Este é um mecanismo útil porque, uma vez que você define uma propriedade específica, os elementos filhos também terão o mesmo estilo, eliminando a necessidade de defini-la repetidamente. No entanto, nem todas as propriedades são herdadas; algumas propriedades são herdadas enquanto outras não são. Por exemplo, color e font-family são herdados, mas propriedades do modelo de caixa como margin e padding não são.

Propriedades Herdadas

As propriedades herdáveis são principalmente aquelas relacionadas a texto e fontes.

Propriedades comumente herdadas

  1. color: Cor do Texto
1body {
2    color: black;
3}
  • Nesse caso, todos os elementos filhos dentro de body terão a cor do texto preta.
  1. font-family: Família de Fontes
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Todos os elementos filhos usam a fonte Arial.
  1. font-size: Tamanho do texto
1body {
2    font-size: 16px;
3}
  • Todo o texto dentro do body será 16px por padrão.
  1. line-height: Espaçamento entre linhas
1p {
2    line-height: 1.5;
3}
  • O texto dentro de um elemento <p> será exibido com altura de linha de 1,5 vezes, afetando também seus elementos filhos.
  1. text-align: Alinhamento do texto
1div {
2    text-align: center;
3}
  • Texto e elementos em linha dentro de um elemento div são exibidos centralizados.
  1. visibility: Visibilidade do elemento
1div {
2    visibility: hidden;
3}
  • visibility é uma propriedade que controla a visibilidade de um elemento. Quando configurado para oculto, o elemento se torna invisível.
  • Nesse caso, os elementos filhos dentro do div também ficarão ocultos.
  1. list-style: Estilo de lista (marcadores de lista para <ul> e <ol>)
1ul {
2    list-style: square;
3}
  • Nesse caso, os itens de lista dentro da tag ul serão exibidos com marcadores quadrados.

Exemplo:

Propriedades não herdadas

Propriedades relacionadas ao layout e ao modelo de caixa geralmente não são herdadas. Essas propriedades precisam ser definidas individualmente para cada elemento.

Propriedades Comuns Não Herdadas

  1. margin, padding: Margens externas e internas de um elemento
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Mesmo se você definir margens externas ou internas para um elemento div, isso não afeta seus elementos filhos.
  1. border: Borda do elemento
1div {
2    border: 1px solid black;
3}
  • Mesmo que uma borda seja definida em um elemento pai, ela não afeta os elementos filhos.
  1. width, height: Largura e altura do elemento
1div {
2    width: 100px;
3    height: 50px;
4}
  • A largura e a altura de um elemento pai não afetam automaticamente os elementos filhos.
  1. background: Estilo de fundo
1body {
2    background-color: lightblue;
3}
  • A cor de fundo definida no body não afeta diretamente os elementos filhos. No entanto, se um elemento filho tiver um fundo transparente, a cor de fundo do elemento pai pode ficar visível através dele.

Exemplo:

Controle de herança

A herança pode ser controlada usando as palavras-chave inherit, initial ou unset.

  • Se você quiser ativar a herança: Você pode forçar explicitamente a herança usando a palavra-chave inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Se você não quiser a herança: Você pode redefinir a propriedade para seu valor inicial usando as palavras-chave initial ou unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Exemplo:

A propriedade all

A propriedade all é uma propriedade que pode redefinir quase todas as propriedades CSS, incluindo aquelas que podem ser herdadas, para um elemento especificado de uma só vez. Especificamente, você pode usar as três palavras-chave a seguir para definir as propriedades de um elemento:.

  • initial: Redefine todas as propriedades para seus valores iniciais.
  • inherit: Herda todas as propriedades do elemento pai.
  • unset: Herda a propriedade se ela for herdável; caso contrário, redefine para o valor inicial.

all é muito útil quando você deseja redefinir ou configurar várias propriedades em massa, ao invés de definir apenas propriedades específicas individualmente.

Exemplo de redefinição para valores iniciais 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • Quando você quiser redefinir todos os estilos previamente configurados para um elemento específico e retorná-lo ao seu estado inicial, use all: initial desta maneira.

  • Neste exemplo, todas as propriedades do elemento <div> com a classe .all-initial são redefinidas para os valores iniciais padrão do navegador.

Exemplo de Herança 

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • Usar all: inherit faz com que todas as propriedades sejam herdadas do elemento pai.
  • Neste exemplo, os elementos com a classe .all-inherit herdam todas as propriedades, como color e font-size, do elemento pai.

Exemplo de Determinação de Valor Inicial ou Herança Baseada em Condições 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Usar all: unset faz com que as propriedades sejam herdadas, se possível; caso contrário, elas são redefinidas para seus valores iniciais.
  • Neste caso, color é herdado, enquanto font-weight é redefinido para seu valor inicial, tipicamente normal.

Relação com Especificidade (Prioridade) 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • A propriedade all é um mecanismo de redefinição poderoso, mas é afetada pela especificidade do CSS. Se um elemento específico tiver especificações de estilo fortes, a propriedade all pode não conseguir sobrescrever esses estilos. Por exemplo, propriedades especificadas com !important não podem ser afetadas.

  • Neste exemplo, mesmo que você tente redefinir o estilo com all: initial, a propriedade color não será redefinida devido à especificação color: red !important.

Elementos de nível de bloco e elementos inline

Elementos de nível de bloco

  • Exemplo: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Características:
    • Eles sempre aparecem em uma nova linha e se expandem para preencher toda a largura do elemento pai.
    • A largura (width) e a altura (height) podem ser definidas livremente.
    • As margens (margin) e o espaçamento interno (padding) podem ser definidos em todas as direções e afetarão todos os lados.
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

Elementos inline

  • Exemplo: <span>, <a>, <strong>, <em>, <img>, <label>
  • Características:
    • Eles aparecem ao lado de outros elementos inline na mesma linha.
    • A largura (width) e a altura (height) não podem ser definidas diretamente (a menos que display: block seja aplicado).
    • Definir margens (margin) ou espaçamento interno (padding) verticalmente tem efeito limitado (margens e espaçamento horizontal são efetivos).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Diferenças entre os elementos de nível de bloco e os elementos inline

  • Configurações de largura e altura:

    • Elementos de nível de bloco: Largura e altura podem ser definidos.
    • Elementos inline: Largura e altura geralmente não podem ser definidas.

  • Margem e Preenchimento:

    • Elementos de nível de bloco: Margem e espaçamento interno são aplicados a todos os lados.
    • Elementos inline: Margem e espaçamento interno na parte superior e inferior são ineficazes ou têm efeito limitado.

  • Método de Disposição:

    • Elementos de nível de bloco: Automaticamente posicionados em uma nova linha.
    • Elementos inline: Alinhados na mesma linha com outros elementos inline.

Como você pode ver, há diferenças na forma como os estilos CSS são aplicados a elementos de nível de bloco e elementos em linha. Em elementos de nível de bloco, propriedades CSS relacionadas ao layout, como largura, altura, margem e preenchimento, são aplicadas conforme especificado. Por outro lado, para elementos inline, definir propriedades CSS relacionadas ao layout, como largura, altura, margem ou espaçamento interno, pode não ser aplicado ou ser aplicado de forma limitada.

Manipulação CSS de elementos de nível de bloco e elementos inline 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

No entanto, ao definir a propriedade display como block ou inline-block, você pode ajustar estilos, como largura e altura, para elementos inline como se fossem elementos de bloco.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Noções básicas de CSSDetalhes dos Seletores de Atributos no CSS