Categories: CSStodas

Declaração CSS com

Uma das diretrizes das CSS que decide qual a regra de estilo que deve ser aplicada em caso de conflito entre duas ou mais regras chama-se “efeito cascata”.
Se você, ao escrever sua folha de estilo declarar na segunda linha do arquivo uma regra assim:

Linha 2 – p {font-size:14px;}

a seguir continuar escrevendo outras regras e lá embaixo na trigésima linha escrever:

Linha 30 – p {font-size:12px;}

cria um conflito entre duas regras para o tamanho da fonte nos parágrafos.
Aí eu pergunto:
Qual será o tamanho da fonte nos parágrafos do documento?
Resposta: 12px. Por que?

Porque uma (existem várias) das diretrizes do efeito cascata estabelece que a regra de estilo escrita depois (ou posteriormente) no fluxo da folha de estilos, prevalece sobre aquelas escritas anteriormente. É isto o que acontece no exemplo acima, a regra escrita na trigésima linha prevalece sobre a anterior, escrita na segunda linha. Quer saber mais sobre efeito cascata? Leia: O efeito cascata e saiba também o que é especificidade para o efeito cascata

Toda esta introdução e exemplificação mostrada acima para dizer que uma declaração CSS com assume a prioridade mais alta na ordem da cascata e só perde para outra declaração com mais específica.

Suponha que no exemplo anterior tenha sido alterada a regra escrita na linha 2 conforme mostrado a seguir:

Linha 2 – p {font-size:14px ;}


Linha 30 – p {font-size:12px;}

Agora o tamanho da fonte nos parágrafos será 14px, pois a declaração que contém assume a prioridade, ‘quebrando’ o efeito cascata.
Notar que deve ser escrito logo após o valor da propriedade na declaração CSS (propriedade: valor), com ou sem espaço, (aconselho a deixar um espaço para maior legibilidade) e antes do ponto e vígula que termina a declaração.

Atenção: Ressalto que só perde para outra mais específica.
Assim, uma regra de estilo contida em uma folha de estilos externa e cuja declaração seja com , prevalece inclusive sobre um estilo inline (aquele declarado dentro da tag HTML com o atributo style)

Agora vem a pergunta natural: Mas afinal para que serve .? Basta eu escrever minhas regras de estilo de acordo com o efeito cascata e estarei tranqüilo.
Você cedo ou tarde, à medida que se aprofundar em projetos CSS vai descobrir por si só ‘para que serve’, contudo desde já adianto duas situações típicas:
É empregado por questões de acessibilidade, por usuários que escrevem folhas de estilos para navegar de acordo com suas necessidades especiais.
É empregado em folhas de estilo para mídias alternativas com a finalidade de sobrescrever regras de estilo de grande especificidade contidas em folhas de estilos gerais.

Eu costumo usar para “debugar” folhas de estilo muito longas quando ao criar uma regra CSS simples ela não funciona. Acresento , se funcionar é um indício que existe uma regra de maior especificidade do que a que eu acabo de escrever.

Agora é com você. Faça algumas experiências e comprove na prática como funciona uma declaração de estilo com .

Maujor

Exerci o magistério paralelamente a minha carreira profissional por toda uma vida e ao longo destes trinta anos aprendi tanto quanto ensinei. Sou um apaixonado por Web Standards e desenvolvo o site de tutoriais CSS para Web Design.

View Comments

  • Essa explicação foi extremamente eficiente e objetiva...
    Obrigado!!!

  • Ótima esplicação.
    Uma das alternativas pra colocar banners jQuery na pagina, e arrumar a bagunça que ele faz

  • Mew, eu agora no inicio de 2013, vendo comentários de 2006. Que loucura. hehehe.

    Ótimo post, claro, inciso e objetivo.

    Parabéns!!

    ;)

  • ótimo, acabei de descobrir na p´ratica e vim pesquisar sobre pra que servia exatamente, muito bom! e muito {;} essa peculiaridade da regra! :D

  • Uso para especificar regras das quais quero que sejam renderizadas primeiro pelo navegador. Geralmente uso quando quero que a borda ou cor de fundo de um box apareça primeiro durante o carregamento do site.

Share
Published by
Maujor

Recent Posts

Teste seu conhecimento #20

Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…

7 anos ago

Teste seu conhecimento #19

Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…

9 anos ago

JavaScript bubbling e capturing

Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…

10 anos ago

HTML5 – W3C versus WHATWG

HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…

10 anos ago

Seria esse o futuro das imagens responsivas?

Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…

10 anos ago

BrazilJS Conf 2013

Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…

11 anos ago