Blog ComercialWeb - São Paulo - SP
E-mail: comercial2@comercialweb.com.br
Atualizado: 05/09/2019

Herança CSS

Introdução:
Herança apareceu para ajudar programadores a escreverem menos e produzirem mais.
Para entender a herança CSS é necessário que você saiba o que é árvore do documento ou DOM sigle em ingles:(Document Object Model).
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 atc atc.

Um documento HTML pode ser representado pelo que chamamos de árvore do documento ou DOM (Document Object Model), representação essa que estabelece o relacionamento entre os elementos da marcação de maneira idêntica como se relacionam os membros de uma família.
Existem elementos HTML pai, filho, irmão, ancestrais, descendente, etc. etc.



Considere um documento HTML com a seguinte marcação.
<!doctype html>
<html lang="pt-br">
<head>
  <title>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 HTML mostrada, está representada no diagrama a seguir.



Observe a seguir alguns "graus de parentesco" entre os elementos HTML do documento representado no diagrama.
html é pai de head e body
ul é pai de três li
title é filho de head

Os três elementos li 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 a regra CSS mostrada a seguir, destinada a definir a cor do texto de um elemento p (parágrafo) que contém um elemento em (ênfase).
Ou seja, o elemento em é filho do elemento p.

CSS
p {color: #990000;}

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

Fonte: Internet-Maujor

Comente esta matéria:


Compartilhe esta matéria




Veja Também