Por que Meu CSS Parece Ignorar as Regras? Explorando a Prioridade de Estilização
27/10/2023Na aula de hoje aprenderemos um pouco mais sobre as prioridades de estilização dentro do CSS e verificar como a folha de estilo em cascata se comporta em relação a class, id, inline e !important.
Prioridades no CSS 3
index.html
Vamos começar criando o html que receberá o estilo CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Prioridade 2-->
<!--Estilização inline -->
<div class="box box-red" id="box" style="background: gray; text-align: right;">
Teste
</div>
</body>
</html>style.css
Vamos agora fazer as estilizações no arquivo externo CSS:
/*Prioridade 0*/
/*Classe num arquivo externo*/
.box{
width: 50%;
height: 200px;
background: red;
/*Priorirdade 3*/
/*!important*/
text-align: center!important;
}
/*Prioridade 1*/
/*ID num arquivo externo*/
#box{
background: blue;
}
.box-red{background: pink!important;}Chegamos a conclusão então que o CSS dará importância a estilização na seguinte ordem:
1 - tag !important
2 - estilo inline no html
3 - id em arquivo externo
4- classe em arquivo externo
Então é isso pessoal, espero que tenham gostado de mais essa aula. Fiquem todos com Deus! Sucesso nos códigos e na vida!
Precisa de um professor? webdesignemfoco@gmail.com
"Quando o Filho do homem vier em sua glória, com todos os anjos, ele se assentará em seu trono na glória celestial. Todas as nações serão reunidas diante dele, e ele separará as pessoas umas das outras, como o pastor separa as ovelhas dos bodes. Ele porá as ovelhas à sua direita e os bodes à sua esquerda." Mateus 25:31-46
Posts Relacionados
