A herança ocorre na vida real. Os filhos herdam as características dos pais: pais altos provavelmente terão filhos altos e vice-versa. Os filhos também herdam a riqueza e as propriedades dos pais.
A herança no desenvolvimento de software funciona da mesma maneira. Em linguagens OOP, as classes herdam as propriedades e métodos de sua classe pai. Isso é feito para evitar a repetição de código.
E no destino CSS, a linguagem de design da web ? A herança também acontece lá. Se você definir uma propriedade em um elemento pai, os filhos, por padrão, herdam as propriedades e seus valores sem definir explicitamente a propriedade. Uma propriedade como a cor é passada para os filhos de um elemento. Se um elemento é verde, todos os seus filhos ficam verdes.
Neste tutorial, vamos nos concentrar na herança em CSS. Vamos demonstrar como funciona a herança em CSS e revisar algumas propriedades CSS você pode usar para passar propriedades herdáveis para elementos filho.
Aqui está o que vamos cobrir:
O que é herança CSS? Quais propriedades CSS são herdadas? O que é herança CSS? inicial unset revert
O que é herança CSS?
Conjuntos de regras CSS em cascata no CSS hierarquia de seletores pais para seus seletores filhos. Esses conjuntos de regras CSS são herdados de seus seletores pais .
O elemento filho irá naturalmente herdar uma propriedade CSS com seu valor do elemento pai se a propriedade CSS não for especificada.
A saída é semelhante a:
Definimos apenas div # div1 para ter uma cor de texto vermelha, mas a regra CSS foi aplicada a seus dois divelementos filhos: div # div1Child e div # div2Child. Os dois elementos div filhos não tinham nenhum conjunto de regras CSS de cor: vermelho definido neles.
O que aconteceu? Os divs filhos herdaram a cor: vermelho de seu pai, div # div1. A cor: vermelho não foi especificada nos divs filhos, então eles a herdaram de seu elemento pai, div # div1.
Essa herança vai até o elemento pai mais próximo:
Temos div # div1ChildChild dentro de div # div1Child. Agora, temos color: blue definido em div1Child. div1Child não herdará a cor: vermelho de div1; ele usará sua cor: azul. Isso é chamado de especificidade. div # div1ChildChild herdará a cor azul de div # div1Child porque é seu pai.
Quais propriedades CSS são herdadas?
Embora nem todas as regras/propriedades CSS sejam herdadas, todas as fontes-* as propriedades são herdadas. Isso inclui:
font-size font-family font-weight
A propriedade color também é herdada.
A herança em CSS ocorre quando uma propriedade herdável não é definida em um elemento. Ele sobe em sua cadeia pai para definir o valor da propriedade como seu valor pai.
As propriedades CSS, como altura, largura, borda, margem, preenchimento, etc. não são herdadas. Podemos habilitar a herança em propriedades CSS não herdáveis usando o valor de herança.
O que é herança de CSS?
Quando você define a herança em uma propriedade CSS, a propriedade obtém o valor do elemento pai.
Isso se aplica não apenas a propriedades herdáveis, mas a todas as propriedades CSS.
Digamos que temos o seguinte:
O div1 tem uma altura definida como 100px e uma cor definida como vermelho. A cor será herdada pelos elementos filhos. A propriedade height não é herdável, portanto, os elementos filhos não a herdarão.
div1Child, por outro lado, tem sua propriedade height definida para herdar. Isso fará com que ele herde o valor de sua altura de seu elemento pai, div1. Portanto, a altura de div1Child será 100px.
O valor de herança habilita a herança em todas as propriedades CSS. Com a herança, o elemento especificado obterá o valor da propriedade especificada de seu elemento pai.
Apenas elementos filhos diretos podem herdar uma propriedade CSS de seu elemento pai usando o valor de herança se a propriedade CSS for definida por o elemento pai do elemento. Isso é para garantir que a propriedade CSS a ser herdada seja uma propriedade herdável.
Aqui está um exemplo:
O div1 tem uma altura definida para 100 px. div1ChildChild. Um neto de div1 (um elemento filho de div1, mas não um filho direto) tem sua propriedade height definida para herdar. O CSS tentará obter o valor do pai de div1ChildChild (div1Child), mas não tem nenhuma propriedade de altura definida. Portanto, o CSS vai recorrer ao seu valor inicial.
O CSS não vai subir na cadeia dos pais div1ChildChild (avós, bisavós, tataravós etc.) para verificar se algum a tem a propriedade height definida para div1ChildChild de.
Portanto, div1ChildChild não terá uma altura de 100 px; em vez disso, ele recorrerá à altura calculada do navegador.
inicial
De acordo com MDN :
inicial Define o valor da propriedade aplicado a um elemento selecionado para ser o mesmo que o valor definido para essa propriedade naquele elemento na folha de estilo padrão do navegador. Se nenhum valor for definido pela folha de estilo padrão do navegador e a propriedade for herdada naturalmente, o valor da propriedade será definido como herdado.
initial é um valor de propriedade CSS usado para definir o valor inicial de uma propriedade CSS de um elemento. Este se torna o valor padrão da propriedade CSS. Cada propriedade CSS tem um valor padrão para quando não há nenhum valor explicitamente atribuído a ela.
Por exemplo, o valor inicial da propriedade CSS de exibição é embutido. Existe o que é chamado de estilo de navegador do agente do usuário, que é o estilo que o navegador fornece aos elementos HTML. Eles não têm nada a ver com os valores iniciais das propriedades CSS.
Um div vem com uma propriedade display definida como block. Isso vem dos estilos do navegador. Defina a propriedade display como initial e o elemento div se transformará em elemento embutido.
Aqui está um exemplo sem inicial:
O elemento div.div é um elemento de bloco. Agora, vamos definir a propriedade de exibição do elemento div.div como inicial.
Abaixo está um exemplo com inicial;
A exibição CSS é definida no elemento div.div com o valor inicial. Isso faz com que o elemento div.div obtenha o valor inicial da propriedade display, que é embutido. Portanto, o div.div se torna um elemento embutido.
O valor inicial da propriedade CSS da cor é preto. Se a propriedade color não for especificada, a cor de um nó de texto do elemento torna-se preta.
Abaixo está um exemplo com o valor da cor:
O valor da propriedade color do elemento div.div é definido como verde, portanto, o texto a cor será verde.
Aqui está um exemplo com cor: inicial:
A propriedade color do elemento div.div é definida como inicial, portanto, a propriedade color terá seu valor padrão (preto). O nó de texto Hello no elemento div.div estará em preto.
unset
O propriedade unset funciona na natureza herdada e não herdada das propriedades CSS.
Propriedades herdadas
Estas são propriedades que são calculadas a partir do elemento pai por padrão. As propriedades herdadas afetam os filhos do elemento. A maioria das propriedades CSS que afetam o nó de texto são propriedades herdadas, como cor, tamanho da fonte, família da fonte, etc.
Se definirmos uma cor no elemento html para verde, ele cairá em cascata para todos os filhos do elemento html, de forma que a página inteira terá uma cor de texto verde.
Propriedades não herdadas
Essas são propriedades que não são herdadas ou calculadas do pai do elemento. Seu valor é definido explicitamente ou por seu valor inicial. A maioria das propriedades CSS que afetam o nó do elemento são propriedades não herdadas
O valor não definido funciona de maneira diferente em propriedades CSS herdadas e não herdadas. Quando o valor não definido é definido em uma propriedade herdada, ele redefine o valor da propriedade para seu valor herdado. O valor não definido redefine uma propriedade não herdada para seu valor inicial.
Abaixo está um exemplo de u“nset em uma propriedade herdada:
O elemento div tem uma propriedade color definida como verde, o html tem uma propriedade color definida para vermelho e a propriedade de cor de div.div é definida como não definida. A propriedade color é uma propriedade CSS herdada, portanto, o não definido redefinirá a cor de div.div para a cor de seu pai (html), vermelho.
O elemento div.div deveria ser verde, mas por causa do valor não definido, a cor foi obtida de seu pai, html.
Vemos que não definido funciona em propriedades herdadas, assim como a palavra-chave herdar. Poderíamos apenas ter definido a propriedade de herdar para a propriedade de cor de div.div e funcionaria da mesma forma que usar não definido.
Aqui está um exemplo de não definido em propriedades não herdadas:
Normalmente, o navegador carrega páginas com seus estilos de página. Por padrão, a propriedade de exibição de div é definida para bloquear. Esse não é o valor padrão da propriedade display; seu valor padrão é embutido.
No código acima, o div.div tem sua propriedade display definida como não definida. Este div.div deveria ser um elemento de bloco, mas por causa do valor não definido em sua propriedade de exibição, ele é redefinido para embutido.
Portanto, o valor não definido funciona em propriedades não herdadas exatamente como o valor inicial.
reverter
Discutimos os estilos de base CSS e os estilos de agente do usuário do navegador. Estilos básicos CSS são valores padrão das propriedades CSS. Esses são os valores padrão naturais que vêm com as propriedades.
Os estilos de agente do usuário do navegador são os valores definidos pelo navegador. Quando uma página é carregada, o navegador tem seu estilo para algumas propriedades CSS.
Por exemplo, a propriedade display tem um valor base CSS, que é embutido. Este é seu valor natural do mecanismo CSS. Agora, o navegador reformula a propriedade de exibição para bloquear.
O estilo do navegador consiste apenas em adicionar seus próprios arquivos.css que contêm seu código. A palavra-chave revert reverte os valores padrão CSS para os estilos de agente do usuário do navegador.
Aqui está um exemplo:
Aqui, os elementos div são configurados para serem exibidos: flex. Observe que o valor do agente do usuário do navegador da tela é block. A propriedade de exibição de div.div está definida para reverter. Isso redefinirá a propriedade de exibição do elemento div.div para bloquear. div.div será um elemento de bloco.
Conclusão
Neste tutorial, aprendemos tudo sobre herança CSS e exploramos quatro palavras-chave principais em CSS que você pode usar para alternar a herança: herança , initial, unset e revert.
