And After - Design e Tecnologia por Sua Conta!
O desenvolvedor é um blog sobre desenvolvimento web, não tratando apenas de programação mas também compartilhando experiências, métodos, debates e tendências da internet.

O Desenvolvedor é um blog de www.andafter.org
Assinar o Feed RSS

Chris Benseler

[www]

Fotos sempre tiradas do lado direito do rosto. Que nem o Rei!
Viciado em web, trabalho com web. Javascript e (x)html são minha praia conhecida, e me arrisco com PHP e Java.
Na vida offline, futebol e música me distraem. E falar bobeiras com os amigos

Status
Karma: 13092
Opiniões: 30

Mais deste autor


Resetando o CSS

Resetando o CSS

Muito bomEste texto foi classificado como Muito bom
Em Programação, Variedades
Por Chris Benseler
17 de Novembro de 2008

Código simples para resetar os atributos CSS

RSS Acompanhe O Desenvolvedor por Feeds!


Acho que um dos maiores concensos dentro do desenvolvimento de interfaces para web é resetar o CSS padrão antes do início do desenvolvimento.

Isso porque cada browser tem os seus próprios valores padrão para margens, paddings, bordas, etc... dos elementos do CSS.

Todo mundo tem o seu método de fazer isso. Eu, há algum tempo, uso uma folha de estilos separada - normalmente chamada reset.css - com o código abaixo, e a chamo como primeiro include nos htmls:

 

 

*{outline-color:invert;outline-style:none;outline-width:medium;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: inherit; font-size: inherit;
    font-family: inherit; vertical-align: baseline;
}
:focus {outline: 0; }
body {line-height: 1; color: black; background: white; font-size:100.01%;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong{ font-weight: bold; }
body,input,select,textarea {  font-size: inherit; }

 

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: css, reset

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti

Comentários

Guilherme Serrano

18/11/2008 15:00:00

Bah, eu não tenho o costume de resetar todo o CSS, pelo menos não tão completamente como tu citou aí. Eu normalmente só gero margin e padding de tudo, e o resto mantenho o padrão.

Mas as vezes isso incomoda mesmo, e exige algumas alterações para cada navegador depois, vou experimentar usar o teu "reset" :D

[Responder este comentário]
Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 5 + 0?




web tracker