01 - EFEITO CASCATA
É o estabelecimento de uma prioridade para aplicação da regra de estilo ao elemento.
Também é controlado pela especificidade e pela herança das propriedades.
Para determinar a prioridade são considerados diversos fatores, entre eles, o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo.
A prioridade para o efeito cascata em ordem crescente é a seguinte:
- folha de estilo padrão do navegador do usuário;
- folha de estilo do usuário;
- folha de estilo do desenvolvedor;
- estilo externo (importado ou linkado).
- estilo incorporado (definido na seção head do documento);
- estilo inline (dentro de um elemento HTML);
- declarações do desenvolvedor com !important;
- declarações do usuário com !important;
Assim, uma declaração de estilo com !important definido pelo usuário prevalece sobre todas as demais, é a de mais alta prioridade. Entre as folhas de estilo definidas pelo desenvolvedor do site, os estilos inline (dentro de um elemento HTML) tem a prioridade mais elevada, isto é, prevalecerá sobre a folha de estilo definida na seção head, e, esta prevalecerá sobre uma folha de estilo externa. A prioridade mais baixa é para estilos padrão do navegador.
HERANÇA
Existem algumas propriedades do CSS que quando aplicadas aos “elementos pais”, os “elementos filhos” herdam a característica aplicada no pai. Um exemplo disso é a propriedade color. Quando aplicamos a propriedade color em um elemento div, o texto dos elementos contidos no div são coloridos de acordo com a propriedade.
[cc lang="css" line="1"]
div {
color: green;
}
[/cc]
O texto que há dentro deste div irá ter a cor verde, independente se este texto está “solto” dentro do div ou se ele está dentro de um parágrafo, por exemplo. Ou seja, os filhos herdaram o resultado desta propriedade. A mesma coisa acontece para, por exemplo, a propriedade font-size.
Há também as propriedades não herdadas pelos “filhos”. Estas propriedades geralmente são propriedades referentes a formatação da caixa, como por exemplo a propriedade width, height, margin, padding e assim por diante.
Essa herança é responsável por uma parte da cascata. É aí que está uma das primeiras vantagens de se utilizar o CSS no desenvolvimento com padrões. A vantagem da herança é exatamente podermos modificar poucas linhas do CSS para fazer alterações no site inteiro, sem ter que caçar elemento por elemento e modificando suas propriedades.
A herança é largamente utilizada em frameworks de CSS ou até mesmo em técnicas para que a customização de layouts seja explorada de forma automática ou manual pelo cliente, como homes de portais, e-commerce etc. Assim, o controle fica mais genérico, e é aí que entra a especificidade do CSS para controlar o detalhe.
VALOR INHERIT
O valor inherit é utilizada em propriedades destinadas aos elementos filhos. Suponha que você tem um elemento div. Este elemento div tem uma borda e você quer que seus filhos tenham a mesma borda. Veja o código:
[cc lang="css" line="1"]
um filho
outro filho
[/cc]
No CSS, o normal seria fazer isso:
[cc lang="css" line="1"]
div#pai {
border: 2px solid black;
}
div#pai div {
border: 2px solid black;
}
[/cc]
Se você quisesse modificar a borda do pai e mesmo assim manter a borda do filho, teria que fazer das alterações no código. O valor inherit serve para que o filho sempre herde um determinado valor de uma determinada propriedade do pai. Quando o valor do pai muda, o valor do filho também. Veja o código abaixo:
[
cc lang="css" line="1"]
div#pai {
border: 2px solid black;
}
div#pai div {
border: inherit;
}
[/cc]
Veja o resultado do código acima.
ESPECIFICIDADE
A especificidade define os detalhes. Quando você define no body as propriedades font-family, font-size, essas propriedades são herdadas por toda árvore de elementos do documento. Isso tráz uma uniformidade para o texto, mas nem todos os elementos terão esse valor genérico de font, logo você terá que ser mais específico e definir valores diferentes de font para estes elementos. É aí que a mágica acontece.
Observe o trecho de documento HTML abaixo:
...<head>
...
<style type="text/css">
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 9px;
}
#conteudo p.nivelc {
color: #0f0; /* Cor verde */
}
#conteudo p {
color: #00f; /* Cor azul */
font-size: 18px;
}
p {
color: #f00; /* Cor vermelha */
font-size: 26px;
}
</style>
</head>
<body>
<div id="conteudo">
<p class="nivelc">
Texto do primeiro parágrafo, blá...blá..
</p>
<p>
Texto do segundo parágrafo, blá...blá...
</p>
</div>
<p>
Texto do terceiro parágrafo, blá...blá...
</p>
</body>
</html>
O documento é rederizado e apresentado na tela como mostrado abaixo.
Note que foram declaradas 03 (três) regras CSS, todas elas, aplicáveis ao elemento p.
- o primeiro parágrafo está dentro da div conteudo e lhe foi atribuida a classe nivelc;-
- o segundo parágrafo está dentro da div conteudo;
- o terceiro parágrafo está fora da div conteudo dentro da tag <body>
Diz-se que para aplicação no parágrafo, a regra #conteudo p.nivelc {... é mais específica que p.nivelc {... que por sua vez é mais específica que p {....
O VALOR IMPORTANT
A especificidade apresenta muitos problemas quando a equipe é grande e o código CSS está gigante. Você tenta fazer uma alteração em um determinado objeto, e nada funciona. Isso acontece porque alguém já definiu um seletor mais específico que o seu e definiu um valor diferente para sua propriedade, e isso te impede de fazer a alteração que precisa. Essa seria uma cena clássica, mas há outros cenários cujo o uso do valor !important.
Note que foram declaradas 03 (três) regras CSS, todas elas, aplicáveis ao elemento p.
- o primeiro parágrafo está dentro da div conteudo e lhe foi atribuida a classe nivelc;-
- o segundo parágrafo está dentro da div conteudo;
- o terceiro parágrafo está fora da div conteudo dentro da tag <body>
Diz-se que para aplicação no parágrafo, a regra #conteudo p.nivelc {... é mais específica que p.nivelc {... que por sua vez é mais específica que p {....
O VALOR IMPORTANT
A especificidade apresenta muitos problemas quando a equipe é grande e o código CSS está gigante. Você tenta fazer uma alteração em um determinado objeto, e nada funciona. Isso acontece porque alguém já definiu um seletor mais específico que o seu e definiu um valor diferente para sua propriedade, e isso te impede de fazer a alteração que precisa. Essa seria uma cena clássica, mas há outros cenários cujo o uso do valor !important.
O !important indica que aquela propriedade sempre será a principal, e que nunca será substituída mesmo que o seletor seja mais complexo. Veja:
[cc lang="css" line="1"]
p {
color: black;
}
div p {
color: red;
}
[/cc]
p {
color: black;
}
div p {
color: red;
}
[/cc]
No código acima, o parágrafo terá a cor vermelha por conta do seletor div p ser mais específico.
[cc lang="css" line="1"]
p {
color: black !important;
}
div p {
color: red;
}
[/cc]
Agora, mesmo o seletor div p sendo mais específico, ele não controlará o elemento. O !important está jogando toda a relevancia para o color: black;.
Use com cuidado. Se você colocar muitos !important no seu código, a utilidade deste valor se perderá. Veja o exemplo.
[cc lang="css" line="1"]
p {
color: black !important;
}
div p {
color: red;
}
[/cc]
Agora, mesmo o seletor div p sendo mais específico, ele não controlará o elemento. O !important está jogando toda a relevancia para o color: black;.
Use com cuidado. Se você colocar muitos !important no seu código, a utilidade deste valor se perderá. Veja o exemplo.
LINK 1: http://maujor.com/tutorial/especificidade.php
LINK 2: http://tableless.com.br/efeito-cascata-e-especificidade-do-css/#.UaOgJ9KThBE
Nenhum comentário:
Postar um comentário