Sempre que começo a escrever meu CSS, eu inicio colocando um * (asterísco) e zero algumas propriedades. Esse técnica se chama CSS Reset.
Alguns elementos do HTML já tem um valor de margin, padding, borda e outros tipos de formatação definidos como padrão. O que acontece é que esses valores pré-definidos são necessários para que quando o site seja visto sem CSS algum, o usuário conseguirá ter um mínimo de legibilidade na visita.
Quando você vai implementar o CSS, esses valores atrapalham um bocado. Por isso, usamos essa técnica para zerar todas esses valores pré-definidos e inserir os valores que realmente usaremos para reproduzir o layout.
O asterísco é um seletor de CSS. Muito útil por sinal. A função dele é simples: selecionar todos os elementos.
div#geral #texto * {
color:red;
}
Neste caso, o asterísco irá “selecionar” todos os elementos que estão dentro do objeto #texto que está dentro do div #geral. Não importa quais elementos eles sejam, o * captura todos.
Infelizmente, não funciona no IE6.
Eu reseto meu CSS desta maneira:
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}
Não se preocupe, usar o asterísco sozinho no seletor funciona em todos os browsers.
Se você tiver a necessidade de zerar mais propriedades, fique à vontade. O Eric Meyer já é mais violento e faz um reset geral em seu CSS, note que ele não usou asterísco.
Não acho necessário tanta coisa. Mas isso vai da maneira de trabalho de cada um. O código que mostrei aqui é simples resolve meus problemas e é isso que importa. Você vai adaptá-lo com sua maneira de desenvolvimento.
27 Comentários
Jader Rubini 13/09/2007 às 12:37
Como não funciona no IE6? Funciona sim.
Também sempre ouvi dizer que margin:0 auto não funciona no IE6, mas, pelo comigo, sempre funcionou.
Nunca precisei do body {text-align:center} #geral {text-align:left}.
ROBERTO 13/09/2007 às 12:43
Mais infelizmente ainda, se não funciona no IE é um elefante branco!!!
Camilo 13/09/2007 às 13:12
Jader,
O que não funciona no IE 6 é o primeiro exemplo.
Usar o * pra selecionar elementos de divs ou classes específicas.
Pra selecionar todos os elementos da página (* sozinho) funciona sim.
Eu uso bastante isso também.
Pedro Rogério 13/09/2007 às 13:26
Se não me engano o margin:0 auto não funciona nos IEs menores que o 6. Eu também costumo utilizar o * pra zerar tudo logo no início, bem melhor do que ficar zerando item por item depois.
Cid Andrade 13/09/2007 às 14:50
Muito bom, passarei a sempre tomar este cuidado
Jader Rubini 13/09/2007 às 15:08
Camilo, o que eu disse é justamente sobre o primeiro exemplo.
CSS Reset | Prof. Cid R. Andrade - TI e Educação 13/09/2007 às 15:13
[...] Diego Elis, do Tableless, escreveu um excelente artigo sobre a importância de redefinir o padrão de certas propriedades com o CSS. [...]
Leonardo Klück 13/09/2007 às 15:23
Ambos os exemplos funcionam no IE6 sim! Não é a primeira vc menciona isso no blog Diego, mas tá errado. É só fazer o teste para comprovar.
Igor Escobar 13/09/2007 às 15:28
Legal, valeu a dica
Realmente os valores default atrapalham um bocado.
Aguinelo Pedroso 13/09/2007 às 16:36
Muito bom, bem mais fácil do que setar propriedade a 1 por 1, e como sempre o IE não suporta
Rael B. Riolino 13/09/2007 às 18:20
Eu tb uso o CSS Reset, que por sinal ajuda de uma maneira absurda….
eu costumo usar margin, padding, border e font-family na maioria dos casos! font-size as vezes quebra um galho tb hehe
Isso sempre me poupa tempo e algumas linhas de css!
blackrose 13/09/2007 às 18:29
nossa! Valew mesmo, essa dica é mesmo muiiiiito útil!!!
Mickele 13/09/2007 às 21:06
Pessoal, margin:0 auto funciona no IE 6 sim, basta usar um doctype decente
Dizem que é mais interessante resetar os estilos específicos de cada tag pois utiliza menos recursos do pc quando está aplicanto o css em tags específicas ao invéz de todas
Tem também o framework css do yahoo, bem interessante
Joabe 13/09/2007 às 22:15
“Margin 0 auto” só funcionado no IE 6 em Standards compliance mode, em Quirks mode não funciona, se o seu xhtml possui declaração XML (como deveria) ele será Quirks para o IE 6 (um Bug maldito), então margem automática e outras coisas não funcionam.
Agora sobre o asterisco depois de outras elementos eu testei no IE 6 e funcionou!
Carlos Eduardo 13/09/2007 às 22:47
Sim, eu também utilizo o seletor * { propriedade: valor; } e funciona no IE6 também
Ah, o reset que utilizo é somente margin e padding.
Richard Barros 14/09/2007 às 01:32
Opa! Só não conhecia por CSS Reset.. mas já costumava fazer isso também. Meu reset é sempre com Padding e Margin, para evitar diferença de layout entre browsers, né? Muito bom. Abraços!
Matheus 14/09/2007 às 02:02
É verdade, Diego, já vi você afirmando o mesmo, se não me angano no vídeo tutorial 10, mas é possível sim, até mesmo no Internet Explorer 5, utilizar #geral * {propriedade:valor;}. Só para confirmar mesmo. O CSS reset é muito útil, mas muito útil mesmo!
Abraços!
Rodrigo Fante 14/09/2007 às 05:36
Também já usei muito esse tipo de “reset”
#geral * {propriedade:valor;}
nunca tive problemas com IE6 não.
Helder Santana 14/09/2007 às 09:48
O Eric tem problema? ou ele ama escrever seletor??? auhauhauhauha
Daniel Accorsi 14/09/2007 às 10:09
Olá Diego, legal a dica!
Já sofremos com esse tipo de coisa! muitas vezes reduz consideravelmente o código mas principalmente traz uma boa consequencia: um código limpo e com menos “correções” de magens.
Rafael Dourado 14/09/2007 às 11:29
E o CSS Reset do Yahoo YUI?
Vitor 14/09/2007 às 14:59
Também testei o exemplo dado acima:
div#geral #texto * {
color:red;
}
FUNCIONOU NO IE5.5 E IE6 PERFEITAMENTE!
Marcos Auélio 19/09/2007 às 14:02
Eu tenho uma dúvida. E se eu quiser reabilitar esta tag, em um determinado local, com os valores padrão originais?
Supondo que eu tenha posto:
* {
list-style:none;
}
mas em um determinado div eu queira deixar “natural”, como desfazer o reset inicial naquele div?
João David 20/09/2007 às 17:46
O reset feito pelo Eric Meyer integra o framework Blueprint, que além de “zerar” o css fornece mais alguns recursos.
Blog do Bernard De Luna - Design, web, planejamento e muito mais… » CSS Reset - zerando estilos do seu website 05/05/2008 às 12:29
[...] Diego Eis – Tableless [...]
Dica: CSS Reset | Luiz Eduardo Blog’s 10/11/2008 às 15:24
[...] vários css resets, como por exemplo o YUI CSS RESET, o CSS RESET do site TABLELESS.COM e o CSS RESET do Meyer, que acredito ser um dos mais [...]
Pedro Pisandelli 07/10/2009 às 13:42
O uso do * não é uma boa prática.
http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/