Lecture 04 –
Precedencia
As vezes nos deparamos com situações
em que tentamos aplicar um estilo CSS em um elemento e não funciona e ficamos
preocupados. Isso as vezes acontece porque aplicamos dois ou mais estilos ao mesmo elemento, e CSS acaba dando prioridade
a um determinado elemento. No entanto como saber qual é o estililo que tem mais precedência. O CSS utiliza três regras principais: Cálculo de Especificidade, herança
e cascata.
«« Cálculo
de Especificidade
Considere que o seu documento html contém um parágrafo com
uma classe "loja" aplicando as
seguintes regras de css:
p {
font-size: 12 px;
}
p.loja {
font-size: 14px;
}
Qual será o estilo a ser aplicado?
O tamanho do texto no parágrafo será 14px ou 12px?
Para este cenário, será aplicado 14px. A
segunda linha de css (p.loja) é mais específica que a primeira quando se trata
de seu parágrafo de classe = "loja". No entanto, às vezes a
especificidade não é tão fácil de identificar.
Por
exemplo, considere o seguinte html e css
<div id
= "barra lateral">
<p class
= "loja"> texto aqui </p>
</div>
div p.loja {font-size: 14px}
#sidebar p {font-size: 12px}
A primeira linha de css pode parecer mais específica à
primeira vista, mas na verdade é a segunda linha acima que seria mais
específica ao tamanho da fonte do seu parágrafo. Por que?
Para responder à pergunta, precisamos considerar as regras de
especificidade.
A especificidade é calculada contando vários
componentes do seu css e expressando-os de uma forma (a, b, c, d). Isso
ficará mais claro com um exemplo, mas primeiro os componentes.
•
Elemento,
pseudo elemento: d = 1 - (0,0,0,1)
•
Classe,
pseudo classe, atributo: c = 1 - (0,0,1,0)
•
Id: b = 1 -
(0,1,0,0)
• Estilo
embutido: a = 1 - (1,0,0,0)
Um ID é mais específico que uma classe é mais específico que
um elemento.
Você calcula a especificidade contando cada uma das opções
acima e adicionando 1 a, b, c ou d. Também é importante observar que 0,0,1,0 é
mais específico que 0,0,0,15. Vejamos alguns exemplos para tornar o cálculo
mais claro.
• p: 1
elemento - (0,0,0,1)
• div: 1
elemento - (0,0,0,1)
• #sidebar:
1 id - (0,1,0,0)
• barra
lateral div #: 1 elemento, 1 id - (0,1,0,1)
• div #
barra lateral p: 2 elementos, 1 id - (0,1,0,2)
• div #
sidebar p.bio: 2 elementos, 1 classe, 1 id - (0,1,1,2)
Vamos ver
novamente o exemplo acima
div p.loja
{tamanho da fonte: 14px} - (0,0,1,2)
#sidebar p {font-size: 12px} - (0,1,0,1)
O segundo tem maior especificidade e, portanto, tem
precedência.
Um último ponto antes de seguirmos em frente. A importância
supera a especificidade. Quando você marca uma propriedade css com! Importante,
você substitui as regras de especificidade e, portanto,
div p.loja {font-size: 14px !important}
#sidebar p {font-size: 12px}
significa que a primeira linha de css acima tem precedência
em vez da segunda. ! important ainda é principalmente um truque em torno das
regras básicas e é algo que você nunca deve precisar se entender como as regras
funcionam.
Herança
Os elementos herdam estilos de seu
container. Se você definir a tag body para usar color: red, o texto de todos os
elementos dentro do corpo também ficará vermelho, a menos que seja especificado
de outra forma.
Porém, nem todas as propriedades de
css são herdadas. Por exemplo, margens e preenchimentos. Se você definir uma
margem ou preenchimento em uma div, os parágrafos dentro dessa div não herdarão
a margem e o preenchimento que você definir na div. O parágrafo usará a margem
e o preenchimento padrão do navegador até que você declare o contrário.
Você pode definir explicitamente
uma propriedade para herdar estilos do container. Por exemplo, você pode
declarar
p
{margin: inherit; padding: inherit}
Cascata
No nível mais alto, a cascata é o que controla toda a
precedência de css e funciona da seguinte maneira.
- Encontre
todas as declarações css que se aplicam ao elemento e propriedade em questão.
- Classifique
por origem e peso. Origem refere-se à fonte da declaração (estilos de autor, estilos
de usuário, padrões do navegador) e peso refere-se à importância da declaração.
(o autor tem mais peso que o usuário que tem mais peso que o padrão.!
importância tem mais peso que as declarações normais)
- Calcular
especificidade
- Se duas
regras são iguais em todas as opções acima, a última declaração tera precedência. CSS incorporado no html sempre tem mais precedência, mais que as
folhas de estilo externas, independentemente da ordem no html.
Exercicios
- Considere o seguinte trechos de código CSS: p {cor: azul}, p {cor: laranja}
Aplicando CSS, o que você pode prever sobre a cor do parágrafo?
2. Considere o código a seguir, o mesmo que vimos acima:
p p { color: blue; font-size: 15px; color: green;}
3. Considere o seguinte HTML e CSS. .para é a classe do
elemento p.
.para {cor: laranja}
p {cor: verde}
Qual é a côr que sera aplicado no parágrafo.
4 . Considerando o trecho CS:
# p1 {cor: verde}
.para {cor: amarelo}
Mais uma vez, decida qual cor será dada ao parágrafo.
5 . Considere o código
HTML e CSS abaixo:
<p id = "p1" class = "para" style =
"color: blue"> Um parágrafo </p>
p {cor: laranja}
Qual é a formatação que será aplicada?
6. Crie uma página HTML e com base nas regras CSS aqui abordadas(Cálculo de especificidade, Herança e Cascata), efectue a estilização da página .
Referencias
