CSS Avançado

  

Efeito cascata

   Que estilo será aplicado, quando há conflito de estilos especificados (por exemplo: uma regra de estilo determina que os parágrafos serão na cor preta e outra que serão na cor azul) para um mesmo elemento HTML?

Aqui entra o efeito cascata, que nada mais é, do que o estabelecimento de uma prioridade para aplicação da regra de estilo ao elemento.
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:

1. folha de estilo padrão do navegador do usuário;
2. folha de estilo do usuário;
3. 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);
4. declarações do desenvolvedor com !important;
5. 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.

  Como herança e especialidade afetam as regras CSS

   Se você tem duas (ou mais) regras CSS conflitantes que se aplicam ao mesmo elemento, existem algumas regras básicas que o navegador segue para determinar qual é a mais específica e por isso a vencedora.

Isso pode não parecer importante, e na maioria dos casos você não vai encontrar conflito algum, mas à medida que seus arquivos CSS se tornam maiores e mais complexos, ou você passa a lidar com um número maior de arquivos, aumentam as chances de conflitos aparecerem.

   Se os seletores são os mesmos o último sempre tem prioridade. Por exemplo, se você tem:

p { color: red; }
p { color: blue; }

   Elementos p seriam coloridos de azul porque é a regra que vem por último.

De qualquer forma, você geralmente não vai ter seletores idênticos com declarações conflitantes (porque não faz muito sentido). Conflitos sempre aparecem, no entanto, quando você tem seletores aninhados. No exemplo seguinte:

div p { color: red; }
p { color: blue; }

   Pode parecer que um elemento p dentro de uma div vai ser colorida de azul, já que a regra de colorir elementos p de azul vem por último, mas na verdade ele vai ser colorido de vermelho devido a especificade do primeiro seletor. Basicamente, quanto mais específico for um seletor maior prioridade ele vai ter quando aparecerem estilos conflitantes.

   A especifidade real de um grupo de seletores aninhados precisa de alguns cálculos. Basicamente, você atribui a cada seletor de id (“#qualquercoisa”) um valor de 100, a cada seletor de classe (“.qualquercoisa”) um valor de 10 e a cada seletor HTML (“qualquercoisa”) um valor de 1. Aí você soma tudo e que rápido!, você tem o valor da especificidade.

• p tem especifidade de 1 (1 seletor HTML)
• div p tem especifidade de 2 (2 seletores HTML; 1+1)
• .tree tem especifidade de 10 (1 seletor de classe)
• div p.tree tem especifidade de 12 (2 seletores HTML e um seletor de classe; 1+1+10)
• #obaoba tem especifidade de 100 (1 seletor de id)
• body #content .alternative p tem especifidade de 112 (seletor HTML, seletor de id, seletor de classe, seletor HTML; 1+100+10+1)

   Então de todos os exemplos usados, div p.tree (com especificidade de 10) venceria div p (com especificidade de 2) e body #content .alternative p venceria de todos eles, independente da ordem.

 Diferença entre o uso de link e @import.

   Sob os conceitos das CSS, um link poderá ser estilizado de qutros maneiras distintas, correspondendo cada uma delas a um dos estados do link.

1. Estado UP: corresponde a situação inicial do link, isto é, o aspecto do link quando a página é carregada no browser do usuário;
2. Estado OVER: é o aspecto que o link assume quando o usuário passa o ponteiro do mouse sobre o link;
3. Estado VISITED: é o aspecto do link depois que foi visitado pelo usuário;
4. Estado ACTIVE: é o aspecto do link ativo, isto é, aquele que foi clicado pelo usuário.

   Os browsers são fabricados de modo a renderizar cores default para os estados UP e VISITED. Em geral, não há estilização default para os estados HOVER e ACTIVE.
E, links são sublinhados por default.

Normalmente cor azul (#0000FF) para estado UP e cor púrpura (#990099) para estado VISITED, conforme mostrado abaixo: As pseudo classes para links

Estado UP ==>

Estado VISITED ==>

As pseudo classes para links

Cada um dos 4 estados dos links poderá ser estilizado por regras CSS aplicadas em 4 pseudo classes, conforme mostradas abaixo: As pseudo classes para links

1. a:link estiliza o estado UP;
2. a:visited estiliza o estado VISITED;
3. a:hover estiliza o estado OVER;
4. a:active estiliza o estado link ativo;                    

Retirando o sublinhado default dos links

Está é primeira pergunta de iniciantes em manipulação de links com CSS.

A propriedade CSS que retira o sublinhado dos links é text-decoration e o valor é none. Assim a declaração text-decoration: none retira o sublinhado na pseudo classe onde for aplicada.

Mas, e se eu quiser a:hover com sublinhado ?

Você terá que definir para aquele estado uma regra CSS que recoloque o sublinhado de volta! E, felizmente text-decoration admite outros valores além do none.

• text-decoration: none ==> retira o sublinhado;
• text-decoration: underline ==> coloca um sublinhado;
• text-decoration: overline ==> coloca um sobrelinhado;
• text-decoration: underline overline ==> coloca sobre e sublinhado juntos;
• text-decoration: line-through ==> coloca uma linha em cima do texto.

Então se você fizer:

a:link {text-decoration: none;}

a:hover {text-decoration: underline;}

terá estado UP sem o sublinhado e estado OVER com o sublinhado.

O efeito cascata nas pseudo classes para links

   Importante: a sequência em que você escreve as regras CSS para as pseudo classes dos links é determinante para o perfeito funcionamento do seu projeto para links .

Você deve saber que uma das diretrizes que determinam o efeito cascata das CSS diz que regras escritas posteriormente no fluxo do documento têm precedência sobre aquelas anteriores. (mais detalhes)

Assim, se você ao escrever suas regras CSS para as pseudo classes dos links colocar a:link em último lugar, estará dando a esta pseudo classe a mais alta prioridade no efeito cascata e seua links seguirão sempre esta regra e nada do que você projetou para a:hover, a:visited e a:active vai funcionar. :-(

Agora pense no funcionamento de um link em uma página web e responda:

Qual é a sequência de escrita das regras CSS para estilizar as pseudo classes dos links ?

a:link é o estado UP inicial em consequência é a primeira regra a escrever;

a:visited não deve prevalecer sobre a:hover e nem a:active, é a segunda;

a:hover não deve prevalecer sobre a:active, é a terceira;

a:active é a última.

Esta é a sequência recomendada e adotada em projetos CSS para links.

Links com Comportamentos diferentes na mesma página

   Para obtenção de links com comportamentos diferentes em uma mesma página, você deverá criar classes. e aplicá-las aos links.

Considere que criamos uma classe chamada linque1 e veja abaixo a sintaxe para escrita da regra CSS para esta classe:

a.linque1:hover {text-decoration: underline overline;}

Esta regra coloca um sublinhado e um sobrelinhado nos links da página quando no estado OVER e que pertencem a classe linque1.

Uma página para as suas experiências e estudos

Vá para uma página web contendo vários links estilizados, para você copiar-colar o código fonte e fazer seus estudos offline, quer alterando as propriedades CSS, quer invertendo a sequência das declarações para constatar o efeito cascata em ação quer observando como foram escritas as regras CSS. E ainda constatar como funcionam as classes em links em uma mesma página.

   A regra @import adiciona outra folha de estilo. Por exemplo, se você quiser adicionar os estilos de uma outra folha de estilo para a sua existente, você pode adicionar algo como:

@import url(estilosadicionais.css);

Isso é muitas vezes usado no lugar do elemento link para ligar um arquivo CSS a uma página HTML, essencialmente para ter uma folha de estilo interna, algo como isso:

<style type="text/css" media="all">
  @import url(macaco.css);
</style>

   O benefício disso é o fato de que navegadores mais antigos, como o Netscape 4.x, por não terem idéia das regras @, não vão ligar a folha de estilos, o que, se você tiver uma marcação bem-estrurada, vai deixar o HTML puro funcional (embora sem estilo).




http://maujor.com/tutorial/especificidade.php

Post Relacionados