Neste artigo
Uma parte importante do estilo de um site com CSS é entender o conceito de herança. A herança CSS é definida automaticamente pelo estilo da propriedade que está sendo usada. Ao pesquisar a cor de fundo da propriedade de estilo, você verá uma seção intitulada “Herança”. Se você é como a maioria dos web designers, você ignorou essa seção, mas ela serve a um propósito.
O que é herança CSS?
Cada elemento em um documento HTML é parte de uma árvore e todos os elementos, exceto o inicial. Por exemplo, este código HTML abaixo tem um
etiqueta envolvendo um
marcação:
Olá
Lifewire
O elemento é filho de
elemento e qualquer estilo no
que são herdados serão repassados para o texto também. Por exemplo:
Como a propriedade font-size é herdada, o texto que diz “Lifewire” (que é o que está dentro do tags) terão o mesmo tamanho que o resto das
. Isso ocorre porque ele herda o valor definido na propriedade CSS.
Como usar herança CSS
A maneira mais fácil de usá-lo é se familiarizar com as propriedades CSS que são e não são herdadas. Se a propriedade for herdada, você saberá que o valor permanecerá o mesmo para cada elemento filho no documento. A melhor maneira de usar isso é definir seus estilos básicos em um elemento de nível muito alto, como o
. Se você definir o corpo da sua família de fontes {
família da fonte: sans-serif;
cor: # 121212;
tamanho da fonte: 1.rem;
alinhamento de texto: esquerda;
}
h1, h2, h3, h4, h5 {
intensidade da fonte: Negrito;
família da fonte: serif;
alinhamento de texto: centro;
}
h1 {
tamanho da fonte: 2,5 rem;
}
h2 {
tamanho da fonte: 2rem;
}
h3 {
tamanho da fonte: 1,75rem;
}
h4, h5 {
tamanho da fonte: 1.25rem;
}
p.callout {
intensidade da fonte: Negrito;
alinhamento de texto: centro;
}
uma {
cor: # 00F;
decoração de texto: nenhum;
}
Use o valor de estilo herdado
Cada propriedade CSS inclui o valor “herdar” como uma opção possível. Isso informa ao navegador da web que, mesmo que a propriedade não seja herdada normalmente, ela deve ter o mesmo valor do pai. Se você definir um estilo, como uma margem que não é herdada, poderá usar o valor herdado nas propriedades subsequentes para dar a elas a mesma margem que o pai. Por exemplo:
Herança usa valores calculados
Isso é importante para valores herdados, como tamanhos de fonte que usam comprimentos. Um valor calculado é um valor relativo a algum outro valor na página da web. Se você definir um tamanho de fonte de 1em em seu
elemento, sua página inteira não terá apenas 1em de tamanho. Isso ocorre porque elementos como títulos (
–
) e outros elementos (alguns navegadores calculam as propriedades da tabela de maneira diferente) têm um tamanho relativo no navegador da web. Na ausência de outras informações sobre o tamanho da fonte, o navegador da web sempre fará um
título o maior texto da página, seguido por
e assim por diante. Quando você define o seu
Olá
Lifewire
Dê uma olhada no exemplo. O tamanho da base é definido em 1em. Isso é aproximadamente 16 px na maioria dos navegadores. Então o
está definido para 2,25em. Uma vez que a base é 1em, que geralmente é o padrão de qualquer maneira, o
é calculado em 2,25 vezes esse valor, cerca de 16 px. Isso torna o
Agora, você pode esperar que o elemento ficará menor. É definido apenas em 1.25em. Mas não é esse o caso. Porque é filho de
, o tamanho da fonte é calculado em 1,25 vezes o
valor. Então, o texto dentro do a tag sairá em cerca de 45px.
Uma observação sobre herança e propriedades de fundo
Existem vários estilos listados como não herdados em CSS no W3C, mas os navegadores da web ainda herdam os valores. Por exemplo, se você escreveu o seguinte HTML e CSS:
Grande Cabeçalho A palavra “Grande” ainda teria um fundo amarelo, embora a propriedade background-color não deva ser herdada. Isso ocorre porque o valor inicial de uma propriedade de fundo é “transparente”. Então você não está vendo a cor de fundo no mas sim que a cor está brilhando do
pai.