Minicursos - CSS

Herança


O conceito de herança de regras é de fundamental importância para a criação de folhas de estilo. Ele é bem teórico, então se você está começando a estudar CSS, ainda não verá comandos ou definições de propriedades aqui, mas recomendo que leia tudo com atenção. Trata-se de um conceito bastante simples, mas importante, veja:

Alguns elementos HTML sempre contêm outros elementos dentro deles. Podemos pegar como exemplo o elemento principal, chamado <body>, que pode possuir elementos <p> dentro dele e estes podem conter elementos <i>, e assim por diante. Dessa forma, algumas regras aplicadas ao elemento <body> serão herdadas pelos elementos <p>, ou regras criadas para o elemento <p> serão herdadas pelos elementos <i>.

Para essa estrutura descrita, a tag <body>, seria chamada de elemento-pai e as tags <p> e <i> os elementos-filho.

Para entender como montar suas folhas de estilo é importante lembrar que a regra mais específica ou mais próxima do elemento em questão prevalecerá.

Se para as tags descritas acima criássemos as seguintes regras css:

body
{
color:brown;
}

i
{
color:red;
}

Agora criamos um documento HTML com a seguinte estrutura:

<head>
<link href="exemplo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
Esse texto faz parte de uma tag <p>, que não possui regra na folha de estilo, mas pelo fato dela estar contida no elemento <body>, ela aparecerá com o texto na cor marrom, pois herdará essa regra. Na verdade, todos os elementos contidos em <body> herdarão, a menos que exista uma regra específica para eles, como no trecho abaixo:

<i> Exemplo de texto contido na tag <i>, que possui uma regra específica alterando a cor do seu texto para vermelho </i>
</p>
</body>

A exibição desse arquivo seria:

Herança CSS

Percebam que o texto estava contido em um elemento <p> e não havia qualquer referência à sua cor no arquivo css, mas ainda assim ele foi exibido com cor marrom, já que seu elemento-pai, o <body>, possuía essa propriedade. Já o elemento <i>, apesar de também estar contido em <body>, tinha uma regra específica alterando sua cor para vermelho, portanto o navegador priorizou essa regra. Parece confuso, mas é um conceito bastante inteligente e que os navegadores obedecem. Sempre que um elemento não possuir regra específica, como no caso do elemento <p>, ele vai herdar as regras do elemento no qual estiver contido. É importante destacar que se existirem regras não conflitantes, um elemento, mesmo possuindo regras específicas, herda as outras regras do elemento-pai, por exemplo:

Se o elemento <body> do nosso exemplo possuísse uma propriedade alterando o tamanho de sua fonte para 24px, o texto contido em <i> também seria exibido com esse tamanho de fonte, pois embora exista uma regra para ele, ela não faz qualquer referência ao tamanho dos textos. Neste caso a cor do texto do elemento <i> seria vermelha, mas com tamanho 24px.

Então, finalizando, basta lembrar que os elementos-filho herdam as propriedades do elemento-pai, menos o que estiver explicitamente declarado em regras específicas.

Vale lembrar também que não são todas as propriedades que podem ser herdadas. Elementos de definição de fontes e textos, como tamanhos, cores, famílias de fontes, alinhamentos, recuos e espaçamento entre palavras, letras ou linhas poderão ser herdados por elementos-filho. Já elementos de margem, de definição de bordas ou backgrounds (falaremos sobre eles nos próximos tópicos) nunca serão herdados.

No tópico seguinte falarei sobre as cores.



Algumas notícias

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa
Você gostará destes vídeos: