!important
Por: Henrique C. Pereira
Publicado em Sunday 16 October 2005 às 16:21Categoria: HTML/CSS/JScript
O princípio do CSS é o famoso efeito em cascata que permitir aplicar um determinado estilo a um elemento no código e esperar que todos os outros elementos similares e nas mesmas condições especificadas pelo CSS, possam obter as mesmas características por herança. Ou seja, você determina estilos para a tag <p> em um site, e todos os parágrafos no site inteiro e dentro de qualquer outro elemento poderá ter exatamente as mesmas características por herança. Isso vai depender de como você declara e organiza seus seletores.
Certamente haverá circunstâncias em que você não vai querer que certo elemento herde as características de outro. Para contornar isso a W3C especificou uma regra que deve ser inserida após a declaração em uma folha de estilos que é chamado de !important. Esta regra é declarada da seguinte maneira:
seletor { propriedade: declaração !important }
Esta regra inserida logo após a declaração sobrepõe as declarações anteriores ou posteriormente herdadas como neste exemplo. Ou seja, a regra !important, sempre vai fazer com que uma declaração perca a herança sobre outra declaração e adquira as sua próprias.
As utilizações deste operador são diversas e depende do resultado que você quer obter. Isso pode facilitar a vida de quem usa folha de estilos alternativas onde você pode inserir !important para sobrescrever valores da folha de estilos principal. Você pode corrigir facilmente folhas de estilos extensas, sobrescrevendo declarações para elementos específicos em circunstancias específicas etc. Se você compreende como funciona a criatividade de onde você pode utilizar fica por sua conta. Faça seus próprios experimentos e me escreva.
Comentários dos leitores
Este artigo possui 6 comentários
Gostei muito… eu não sabia exatamente como funcionava esse !inportant.. agora facilita muito mesmo em casos específicos..
Seus posts cada vez melhor.. parabens!
Cara muito sux, bom mesmo isso vai me ajudar muito, sou meio maluco e gosto de usar varios estilos e sempre tenho problemas com isso.
Parabéns cara.
Pingback: As Dicas de CSS que você não deve deixar de saber » Revolução
primeiramente parabens pelo site muito instrutivo…
bom artigo já conhecia a declaração !important. mas o duro é quando você mesmo usando a declaração, parece que o site não sofre qualquer mudança, recentemente fiz um site que renderizou bem no ie e opera, só que no firefox ficou quebrado ele não obedece direito as declarações de css,e o atributo alt ele não reconhece. apesar de várias aclamações de elogios ao firefox deixo meu recado aos desenvolvedores textar também no firefox se não quizer ouvir queixas dos crientes………
té mais mariano
Mariano Barbosa,
O atributo ALT é usado de uma forma errada no IE e renderizado de acordo com os padrões no Firefox.
Este atributo é para ser exibido caso a imagem não apareça ou para efeitos de acessibilidade.
Caso você queria que apareça aquele texto na imagem, use o atributo TITLE. ex:
Fazendo isto você estará dentro dos padrões.
E uma citação: "[...] firefox ficou quebrado ele não obedece direito as declarações de css [...]"
Você está certo disso? O Firefox segue bem os padrões, o IEca que foge completamente deles :)
Abs!
Olá sempre acompanho o blog, muito boa a dica do !importante..
Acrescentando ai o coments do Thiago, ele está corretíssimo, costumo desenvolver todo o site vizualizando pelo firefox e depois só acrescento hacks ou "meios" para que fique igual ou parecido no IECA…Abraços!