Herança CSS

Publicado em: 14/03/2011
Atualizado em: 26/04/2014

Introdução

Para se entender a herança CSS é necessário que se saiba o que é árvore do documento. O conceito de árvore do documento é melhor entendido quando fazemos uma analogia com a árvore genealágica de uma família, que é uma noção bem entendida pela maioria das pessoas.

Em uma família o relacionamento entre seus membros é expresso pelo grau de parentesco. Assim, temos indivíduos que são filhos, pais, avós, irmãos, primos, ancestrais, descendentes etc.

Um documento HTML cria o que chamamos de árvore do documento no qual os elementos da marcação se relacionam entre si de maneira idêntica como se relacionam os membros de uma família. Existem elementos HTML pai, filho, irmãos, ancestrais, descendentes, etc.

Considere um documento HTML com a seguinte marcação.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
	<title>Tutorial CSS - Herança CSS</title>
</head>
<body>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>
</body>
</html>

A árvore do documento criada pela marcação XHTML mostrada, esta representada no diagrama a seguir.

diagrama arvore documento

Alguns "graus de parentesco" entre os elementos HTML do documento representados no diagrama são expressos como listado a seguir.

  • HTML é pai de HEAD e BODY
  • UL é pai de três LI
  • TITLE é filho de HEAD
  • Os três LIs são irmãos
  • UL, BODY e HTML são ancestrais de LI
  • TITLE e UL são descendentes de HTML

Tal como ocorre em uma família quando um filho herda uma característica de seu pai ou avô, as propriedades CSS são também herdadas de seus ancestrais, pelos elementos HTML.

Herança

Considere, como mostrado a seguir, uma regra CSS para definição da cor de um elemento P (parágrafo) que contém um elemento EM (ênfase). Ou seja EM é filho de P.

p {color: red;}
<p>Texto do parágrafo com um <em>elemento EM</em> nele contido.</p>

A renderização do parágrafo se dá como mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Notar que embora não tenhamos definido explicitamente uma cor para o elemento EM ele foi renderizado na cor vermelha. Isso se deu devido a herança CSS. O que ocorreu foi que o elemento EM herdou a propriedade color de seu elemento-pai P.

E, se quiséssemos que o elemento EM fosse na cor azul? Nesse caso teríamos que anular o efeito da herança, definindo explicitamente a cor azul para EM, como mostrado a seguir.

p {color: red;}
p em {color: blue;}
<p>Texto do parágrafo com um <em>elemento EM</em> nele contido.</p>

A renderização do parágrafo se dá como mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Mas, uma propriedade CSS não está restrita a ser herdada somente do elemento-pai. Ela pode ser herdada de um elemento ancestral. O exemplo a seguir esclarece essa herança.

<div>
	<p>Texto do parágrafo com um <em>elemento EM</em> nele contido.</p>
</div>

A renderização do parágrafo se dá como mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Nesse exemplo a cor vermelha foi definida para o elemento DIV. O elemento EM herdou a cor vermelha definida para seu elemento ancestral DIV. O elemento P, por ser filho de DIV também herdou a cor.
Poderíamos dizer: "A cor passou de avô para pai e de pai para filho".

Mas afinal, qual é a vantagem da herança CSS?
A grande vantagem da herança CSS reside na redução drástica da quantidade de regras de estilos que teremos que escrever diminuindo, e muito, o tamanho e tempo de carregamento da folha de estilos.

Uma marcação HTML sem uma folha de estilos a ela associada será renderizada de acordo com a folha de estilo nativa do navegador, que infelizmente varia de acordo com o navegador. Contudo algumas propriedades CSS são estilizadas nativamente de forma consistente por todos os navegadores, por exemplo, a cor dos textos é a preta, a família das fontes é a serif e o tamanho da fonte é igual a 16px.

Se não houvesse a herança teríamos que escrever uma regra CSS para cada elemento da página, pois aqueles não contemplados por regra CSS renderizariam de acordo com a folha de estilos nativa do navegador. Observe a regra CSS a seguir.

body { color: red;
	font-family: arial, sans-serif;
	}

O elemento body é ancestral de TODOS os elementos que renderizam em uma página web. Assim, eles herdarão do seu ancestral body a cor vermelha (red) e a fonte arial ou, alternativamente, sans-serif.

É claro que você não ficará preso à herança na sua página, pois como vimos anteriomente ao declarar uma regra CSS específica para um elemento da página ela sobrescreve (ou prevalece sobre) a herança.

Propriedades herdadas

Considere a folha de estilo e marcação HTML mostradas a seguir.

p {border:1px solid red;}
<p>Texto do parágrafo com um <em>elemento EM</em> nele contido.</p>

Aplicando os conceitos de herança mostrados no item anterior poderíamos afirmar que o elemento EM por ser filho de P receberá por herança uma borda vermelha, conforme mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Imagine que o designer do seu site previu uma borda em torno de toda a página do site e você pretende criar um DIV container para a página e definir para ele a borda prevista. TODOS os elementos da página herdariam a borda e você pode imaginar o caos e tamanho da folha de estilos se tivéssemos que retirar as bordas uma a uma de todos os elementos descendentes.

Não são todas as propriedades CSS que são herdáveis.

Felizmente, o que foi mostrado e afirmado acima não acontece na prática pelo simples fato de que nem todas as propriedades CSS se transmitem por herança.

As seguintes propriedades CSS não são herdadas pelos elementos descendentes: background, border (exceto: border-collapse e border-spacing), clip, content, counter, clue, display, float, height, left, margin, outline, overflow, padding, page-break, pause, play-during, position, right, table-layout, text-decoration, top, unicode-bidi, vertical-align, width, z-index.

Como você pode constatar na listagem mostrada a propriedade border não é herdada. Assim, o exemplo mostrado no início desse item não é real pois o elemento EM não herdará a borda definida para seu elemento-pai P.

Herança para font-size

A herança funciona para a propriedade font-size? Sim, funciona, mas de uma maneira diferente da maneira como estudamos anteriormente. Se o valor do tamanho de fonte for definido em porcentagem ou em unidade CSS em em lugar de se tomar o valor especificado para herança, toma-se o valor calculado.

Considere a folha de estilo e marcação HTML mostradas a seguir.

p {font-size: 150%;}
<p>Texto do parágrafo com um <em>elemento EM</em> nele contido.</p>

O tamanho da fonte para os elementos P foi especificado (valor especificado) em 150%. Mas, 150% de quê? Unidade de medida CSS expressa em porcentagem se refere à medida definida para o elemento-pai ou se não houver um elemento-pai, para o elemento ancestral mais próximo. Assim font-size: 150% significa um tamanho de fonte igual a 1,5 vezes o tamanho da fonte do elemento ancestral mais próximo (valor calculado).

Não havendo elemento ancestral com tamanho de fonte definido toma-se o tamanho de fonte padrão do elemento body que é o ancestral mais distante e por padrão, nos navegadores, esse tamanho é igual a 16px.

Assim, no nosso exemplo, o tamanho de fonte para o parágrafo será de 16px x 1,5 = 24px. Como o elemento EM é filho do parágrafo, se herdar a propriedade font-size seu tamanho de fonte será 150% x 24px = 36px. nessas condições obteríamos uma renderização como mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Contudo não é isso que acontece. A renderização é com tamanho de fonte constante igual a 24px como mostrado a seguir.

Texto do parágrafo com um elemento EM nele contido.

Isso porque, como dissemos no início desse item, para tamanho de fonte o valor herdado é o valor calculado e não o valor especificado e nesse caso o valor calculado foi 24px.

O mesmo conceito se aplica para definição do tamanho de fonte em unidade CSS em.

Isso é tudo. É assim que funciona a herança CSS. Antes do desenvolvimento de suas folhas de estilo faça um estudo do seu projeto e tire o máximo proveito da herança CSS.