11.1 Cascading
Os princípios básicos do CSS incluem Cascading, inheritance e specificity. Entender esses princípios ajuda a controlar melhor o estilo e a aparência das páginas web.
Cascading
Cascading é o princípio básico do CSS que define como aplicar estilos quando várias regras entram em conflito. Durante o cascading, o navegador usa as seguintes regras para resolver conflitos:
- Ordem das fontes: os estilos podem ser definidos em diferentes lugares — folhas de estilo externas (arquivos CSS), folhas de estilo internas (dentro da tag
<style>) e estilos inline (no atributostyledo elemento HTML). As regras são aplicadas na ordem em que aparecem. - Specificity: cada seletor tem seu nível de especificidade. Quanto maior a especificidade do seletor, maior sua prioridade.
- Importância (Importance): regras com a diretiva
!importanttêm a mais alta prioridade e são aplicadas mesmo quando há outras regras conflitantes.
Exemplo de cascading:
Neste exemplo, a cor de fundo será amarela, pois o estilo inline tem prioridade sobre o estilo interno. A cor do texto será vermelha, já que o estilo inline tem prioridade sobre o interno.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de Cascading CSS</title>
<style>
body {
background-color: lightblue; /* Estilo interno */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- Estilo inline -->
<p style="color: red;">Exemplo de Cascading CSS</p>
</body>
</html>
11.2 Inheritance
Inheritance é o processo pelo qual elementos filhos assumem os estilos de seus elementos pais. Nem todas as propriedades CSS são herdadas. Propriedades herdáveis incluem cor do texto, família da fonte, espaçamento entre linhas e algumas outras.
Exemplo de inheritance:
Neste exemplo, o elemento <p> herda a fonte e a cor do elemento <body>, e o tamanho da fonte da classe .container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de Inheritance CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>Este texto herda a fonte e cor de body, e o tamanho da fonte de ".container".</p>
</div>
</body>
</html>
11.3 Specificity
Specificity determina qual regra CSS será aplicada a um elemento quando várias regras correspondem ao mesmo elemento. Specificity é calculada com base na quantidade e nos tipos de seletores na regra.
Regras de cálculo de specificity:
- Estilos inline têm a especificidade mais alta
- Identificadores (selectors by ID) têm mais especificidade que classes, pseudo-classes e atributos
- Classes, pseudo-classes e atributos têm mais especificidade que elementos e pseudo-elementos
- Elementos e pseudo-elementos têm a menor especificidade
Exemplo de cálculo de specificity:
Neste exemplo, o texto será vermelho, pois o seletor #unique tem a especificidade mais alta.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de Specificity CSS</title>
<style>
p {
color: blue; /* Specificity 0-0-0-1 */
}
.highlight {
color: green; /* Specificity 0-0-1-0 */
}
#unique {
color: red; /* Specificity 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">Este texto será vermelho.</p>
</body>
</html>
11.4 Importance
O CSS permite que os desenvolvedores especifiquem claramente a prioridade dos estilos usando a diretiva !important. As regras com essa diretiva serão aplicadas independentemente da especificidade de outras regras.
Exemplo de uso do !important:
Neste exemplo, o texto será azul, porque a regra com !important tem a prioridade mais alta.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de !important no CSS</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">Este texto será azul por causa do "!important".</p>
</body>
</html>
11.5 Exemplos de uso dos princípios do CSS
Exemplos de uso dos princípios do CSS em tarefas reais.
Exemplo de cascading e specificity:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de Cascading e Specificity CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">Este texto será vermelho, porque .important tem mais especificidade que "p".</p>
</body>
</html>
Exemplo de inheritance e specificity:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exemplo de Inheritance e Specificity CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* Sobrescreve a cor do body para todos elementos filhos */
}
.highlight {
color: red; /* Tem mais especificidade que .container */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">Este texto será vermelho por causa da especificidade da classe ".highlight".</p>
</div>
</body>
</html>
GO TO FULL VERSION