CURSO HTML / CSS - PARTE III

Como é determinada a ordem para o efeito cascata?

A ordem para o efeito cascata é a ordenação das regras CSS de acordo com critérios pré-estabelecidos, com a finalidade de resolver eventuais conflitos entre regras. E estes critérios são os abaixo enumerados:

1. Localizadas todas as regras CSS aplicáveis ao seletor/propriedade, determina-se a especificidade de cada uma delas. A regra mais especifica entre as conflitantes será aplicada. Se não for encontra uma (ou mais) regra aplicável ao elemento HTML, este herdará as propriedades de estilo de seu elemento pai. Não havendo elemento pai será aplicado o valor inicial default de estilo para aquele elemento
2. Regras com declaração importante (! important) tem prioridade sobre aquelas sem a declaração. Se o autor e o usuário declaram regras conflitantes com !important, as do usuário têm prioridade sobre as do autor.
3. Regras com mesmo peso (sem !important) e conflitantes, declaradas pelo autor têm prioridade sobre aquelas declaradas pelo usuário. Regras do usuário com maior especificidade que aquelas do autor têm a prioridade. Regras com igual especificidade declaradas pelo autor têm prioridade sobre as do usuário. Regras do autor e do usuário têm prioridade sobre as regras default das aplicações do usuário (p.ex.: o browser)
4. Regras mais específicas têm a prioridade sobre as menos específicas.
5. Entre regras de mesmo pêso, têm prioridade aquelas declaradas por último na sequência das regras na folha de estilos. Folhas de estilo inline, incorporadas, lincadas e importadas (@import) nesta ordem, têm do maior para o menor pêso (estilos inline têm o maior pêso). Entre várias folhas de estilo lincadas têm maior prioridade aquela importada por último (mais próxima da tag </head>. O mesmo ocorre entre as folhas importadas (@import)

O que é declaração CSS?

Declaração CSS e o fragmento de uma regra CSS dentro dos colchetes { }. A declaração CSS compõe-se de duas partes: a propriedade e o valor e uma regra CSS pode conter várias declarações separadas por um ponto-e-vírgula.

Por exemplo:

h1 {

color: #000; /* essa linha contém a declaração CSS */

}

 

Posso atribuir mais de uma declaração a um seletor?

 

Sim, as declarações devem ser separadas por ponto-e-vírgula.

Por exemplo:

p {

background: #FFFFFF;

color: #000;

}

 

O que é declaração com uso de '!important' ?

Usa-se !important em uma declaração CSS para incrementar o pêso (ou prioridade) da declaração no efeito cascata das regras de estilo. Convém ressaltar que CSS2 mudou o conceito para declarações com !important do autor e do usuário. A recomendação atual determina que !important do usuário prevaleça sobre o autor.

h3 {

font-size:120% !important;

color: #000;

}

  

Esta regra aumenta o peso para o tamanho de letra do elemento h3

 

 

 Aguarde a próxima aula