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.



Notícias - Games

Atari VCS é finalmente lançado e surpreende

O Atari VCS foi lançado recentemente e trouxe suporte a praticamente todos os serviços de streaming de jogos já disponíveis. A única exceção foi por conta do Playstation Now, cujo suporte nativo não é oferecido, mas ele pode ser acessado através do modo PC do VCS, já que o console possui Googl...

Ler Notícia Completa

The King of Fighters XV já tem data para chegar

A SNK finalmente definiu uma data para lançamento do tão esperando The King Of Fighters XV. Segundo comunicado recente, o game de luta deve chegar em 17 de fevereiro de 2022 para os consoles Playstation 4, Playstation 5, Xbox Series X e S, além de PCs. O título contará com 39 personagens e mante...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!