Como resetar seu CSS

Navegadores não costumam ser muito consistentes uns com os outros em seus padrões. Se você não explicitar nenhum CSS para sua página, você certamente terá páginas diferentes no Firefox, Chrome ou Internet Explorer.

Para lidar com essas inconsistências, é costume colocar no começo do arquivo CSS uma série de instruções que “resetam” todos os valores. A menos que você especifique algo depois, a página deverá ser renderizada sempre daquela mesma forma, independente do navegador.

Eric Meyer, um dos gurus do CSS na web, criou um código CSS que você pode copiar e colar no seu projeto e funciona como um excelente ponto de partida para “resetar” os valores. Confira abaixo (com comentários traduzidos):

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   Licenciamento: nenhum (domínio público)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* resetando a exibição de componentes do HTML5 para navegadores antigos */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

Licenciamento: nenhum (domínio público)

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, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* resetando a exibição de componentes do HTML5 para navegadores antigos */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

Você pode se interessar

Nós não somos necessariamente Ágeis – mas com certeza somos ágeis!

Artigos

3 visualizações

Artigos

3 visualizações

Nós não somos necessariamente Ágeis – mas com certeza somos ágeis!

Plataformatec - 7 de Março de 2018

Série O Manifesto Ágil: em nosso primeiro artigo, Lucas Colucci, nos mostra uma introdução sobre o Manifesto Ágil, apresenta algumas das Metodologias e formas Ágeis de se encarar um projeto.

Aprenda como funciona um programa de recuperação de arquivos

Artigos

11 visualizações

Artigos

11 visualizações

Aprenda como funciona um programa de recuperação de arquivos

Carlos L. A. da Silva - 6 de Março de 2018

Apagamento acidental de um arquivo? Formatação? O disco rígido ficou corrupto? Todos esses casos tem solução e você vai entender como isso é possível.