CSS Reset refere-se a redefinir o estilo do navegador. Em artigos anteriores sobre 52CSS.com, conhecimento semelhante foi apresentado, mas não foi aprofundado o suficiente. Hoje veremos dez exemplos do método CSS Reset e aprenderemos a aplicação desse método.
Em vários navegadores, alguns valores padrão são usados para seletores CSS. Por exemplo, quando h1 não é definido como um valor, um determinado tamanho é exibido. Mas nem todos os navegadores usam os mesmos valores, então CSS Reset é usado para fazer com que o estilo da página da web se comporte de forma consistente em cada navegador.
1. CSS de redefinição genérica
* {
preenchimento: 0;
margem: 0;
borda: 0;
}
Este também é um método CSS Reset, que define o preenchimento, a margem e a borda de todos os seletores como 0. Este é um método poderoso, o mais simples e seguro, mas também o que consome mais recursos. Para sites pequenos, usar isso não causará um grande desperdício de recursos, mas se for um site com uma estrutura muito grande como o Yahoo, basta redefinir o CSS seletivamente para reduzir o desperdício de recursos.
2. Ateneu Popular CSS Reset
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pré, a, abbr, acrônimo,
endereço, grande, citar, código, del, dfn, em, fonte, img, ins,
kbd, q, s, samp, pequeno, greve, forte, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, formulário, rótulo, legenda,
tabela, legenda, tbody, tfoot, thead, tr, th, td {
margem: 0;
preenchimento: 0;
borda: 0;
contorno: 0;
peso da fonte: herdar;
estilo da fonte: herdar;
tamanho da fonte: 100%;
família de fontes: herdar;
alinhamento vertical: linha de base;
}
:foco {esboço: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
tabela {colapso de borda: separado; espaçamento de borda: 0;}
th, td {alinhamento do texto: esquerda; peso da fonte: normal;}
img, iframe {borda: nenhum; decoração de texto: nenhum;}
ol, ul {estilo de lista: nenhum;}
entrada, área de texto, seleção, botão {tamanho da fonte: 100%;família da fonte: herdar;}
selecione {margem: herdar;}
hr {margem: 0; preenchimento: 0; borda: 0; cor: #000; cor de fundo: #000; altura: 1px}
3. Redefinir CSS de Chris Poteet
* {
alinhamento vertical: linha de base;
família de fontes: herdar;
estilo da fonte: herdar;
tamanho da fonte: 100%;
fronteira: nenhuma;
preenchimento: 0;
margem: 0;
}
corpo {
preenchimento: 5px;
}
h1, h2, h3, h4, h5, h6, p, pré, blockquote, formulário, ul, ol, dl {
margem: 20px 0;
}
li, dd, blockquote {
margem esquerda: 40px;
}
mesa {
colapso da fronteira: colapso;
espaçamento entre fronteiras: 0;
}
4. Corpo de redefinição de CSS do Yahoo
,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
formulário, conjunto de campos, entrada, área de texto, p, blockquote, th, td {
preenchimento: 0;
margem: 0;
}
mesa {
colapso da fronteira: colapso;
espaçamento entre fronteiras: 0;
}
conjunto de campos,img {
borda: 0;
}
endereço, legenda, citar, código, dfn, em, forte, th, var {
peso da fonte: normal;
estilo de fonte: normal;
}
olá,ul {
estilo de lista: nenhum;
}
legenda,th {
alinhamento de texto: esquerda;
}
h1,h2,h3,h4,h5,h6 {
peso da fonte: normal;
tamanho da fonte: 100%;
}
q:antes,q:depois {
contente:";
}
abbr,acrônimo { borda: 0;
}
5. Eric Meyer Redefinir CSS
html, corpo, div, span, miniaplicativo, objeto, iframe, tabela, legenda,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, pequeno, strike, forte, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pré, a, abbr,
sigla, endereço, grande, citar, código, dl, dt, dd, ol, ul, li,
conjunto de campos, formulário, rótulo, legenda {
alinhamento vertical: linha de base;
família de fontes: herdar;
peso da fonte: herdar;
estilo da fonte: herdar;
tamanho da fonte: 100%;
contorno: 0;
preenchimento: 0;
margem: 0;
borda: 0;
}
:foco {
contorno: 0;
}
corpo {
fundo: branco;
altura da linha: 1;
cor: preto;
}
olá, ul {
estilo de lista: nenhum;
}
mesa {
colapso da borda: separado;
espaçamento entre fronteiras: 0;
}
legenda, th, td {
peso da fonte: normal;
alinhamento de texto: esquerda;
}
blockquote:antes, blockquote:depois, q:antes, q:depois {
contente: "";
}
citação em bloco, q {
citações: "" "";
}
6. Tantek Celik Redefinir CSS
:link,:visited { text-decoration:none }
ul,ol {estilo de lista: nenhum}
h1,h2,h3,h4,h5,h6,pre,código { tamanho da fonte:1em };
ul,ol,li,h1,h2,h3,h4,h5,h6,pré,formulário,corpo,html,p,blockquote,fieldset,entrada
{margem:0; preenchimento:0}
a img,:link img,:visited img { border:none }
endereço { font-style:normal }
7. Christian Montoya Redefinir CSS
html, corpo, formulário, fieldset {
margem: 0;
preenchimento: 0;
fonte: 100%/120% Verdana, Arial, Helvetica, sem serifa;
}
h1, h2, h3, h4, h5, h6, p, pré,
blockquote, ul, ol, dl, endereço {
margem: 1em 0;
preenchimento: 0;
}
li, dd, blockquote {
margem esquerda: 1em;
}
rótulo do formulário {
cursor: ponteiro;
}
conjunto de campos {
fronteira: nenhuma;
}
entrada, selecione, área de texto {
tamanho da fonte: 100%;
família de fontes: herdar;
}
8. Rudeworks Redefinir CSS
* {
margem: 0;
preenchimento: 0;
fronteira: nenhuma;
}
HTML {
fonte: 62,5% "Lucida Grande", Lucida, Verdana, sem serifa;
sombra de texto: #000 0px 0px 0px;
}
você {
estilo de lista: nenhum;
tipo de estilo de lista: nenhum;
}
h1, h2, h3, h4, h5, h6, p, pré,
blockquote, ul, ol, dl, endereço {
peso da fonte: normal;
margem: 0 0 1em 0;
}
citar, em, dfn {
estilo da fonte: itálico;
}
e aí {
posição: relativa;
inferior: 0,3em;
alinhamento vertical: linha de base;
}
secundário {
posição: relativa;
inferior: -0,2em;
alinhamento vertical: linha de base;
}
li, dd, blockquote {
margem esquerda: 1em;
}
código, kbd, samp, pré, tt, var, input[type='text'], área de texto {
tamanho da fonte: 100%;
família de fontes: monaco, “Lucida Console”, courier, mono-espaço;
}
del {
decoração de texto: line-through;
}
ins, dfn {
borda inferior: 1px sólido #ccc;
}
pequeno, sup, sub {
tamanho da fonte: 85%;
}
abr, sigla {
transformação de texto: maiúscula;
tamanho da fonte: 85%;
espaçamento entre letras: .1em;
estilo borda inferior: pontilhado;
largura inferior da borda: 1px;
}
um abbr, um acrônimo {
fronteira: nenhuma;
}
e aí {
alinhamento vertical: super;
}
secundário {
alinhamento vertical: sub;
}
h1 {
tamanho da fonte: 2em;
}
h2 {
tamanho da fonte: 1,8em;
}
h3 {
tamanho da fonte: 1,6em;
}
h4 {
tamanho da fonte: 1,4em;
}
h5 {
tamanho da fonte: 1,2em;
}
h6 {
tamanho da fonte: 1em;
}
a, a:link, a:visitado, a:hover, a:ativo {
contorno: 0;
decoração de texto: nenhuma;
}
uma imagem {
fronteira: nenhuma;
decoração de texto: nenhuma;
}
imagem {
fronteira: nenhuma;
decoração de texto: nenhuma;
}
rótulo, botão {
cursor: ponteiro;
}
input:foco, select:foco, textarea:foco {
cor de fundo: #FFF;
}
conjunto de campos {
fronteira: nenhuma;
}
.claro {
claro: ambos;
}
.float-esquerda {
flutuar: esquerda;
}
.float-right{
flutuar: certo;
}
corpo {
alinhamento de texto: centro;
}
#wrapper {
margem: 0 automático;
alinhamento de texto: esquerda;
}
9. Anieto2K Redefinir CSS
html, corpo, div, span, miniaplicativo, objeto, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pré, a, abbr, sigla, endereço, grande,
citar, código, del, dfn, em, fonte, img,
ins, kbd, q, s, samp, pequeno, strike,
forte, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
conjunto de campos, formulário, rótulo, legenda,
tabela, legenda, tbody, tfoot, thead, tr, th, td,
centro, você, b, eu {
margem: 0;
preenchimento: 0;
borda: 0;
contorno: 0;
peso da fonte: normal;
estilo de fonte: normal;
tamanho da fonte: 100%;
família de fontes: herdar;
alinhamento vertical: linha de base
}
corpo {
altura da linha: 1
}
:foco {
contorno: 0
}
olá, ul {
estilo de lista: nenhum
}
mesa {
colapso da fronteira: colapso;
espaçamento entre bordas: 0
}
blockquote:antes, blockquote:depois, q:antes, q:depois {
contente: ""
}
citação em bloco, q {
citações: "" ""
}
entrada, área de texto {
margem: 0;
preenchimento: 0
}
hora {
margem: 0;
preenchimento: 0;
borda: 0;
cor: #000;
cor de fundo: #000;
altura: 1px
}
10. CSSLab CSS Redefinir
html, corpo, div, span, miniaplicativo, objeto, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pré, a, abbr, sigla, endereço,
grande, citar, código, del, dfn, em, fonte, img, ins, kbd, q, s, samp,
pequeno, ataque, forte, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
conjunto de campos, formulário, rótulo, legenda, tabela, legenda, tbody, tfoot,
cabeça, tr, th, td {
margem: 0;
preenchimento: 0;
borda: 0;
contorno: 0;
peso da fonte: herdar;
estilo da fonte: herdar;
tamanho da fonte: 100%;
família de fontes: herdar;
alinhamento vertical: linha de base;
}
:foco {
contorno: 0;
}
mesa {
colapso da borda: separado;
espaçamento entre fronteiras: 0;
}
legenda, th, td {
alinhamento de texto: esquerda;
peso da fonte: normal;
}
uma imagem, iframe {
fronteira: nenhuma;
}
olá, ul {
estilo de lista: nenhum;
}
entrada, área de texto, seleção, botão {
tamanho da fonte: 100%;
família de fontes: herdar;
}
selecione {
margem: herdar;
}
/* Corrige o posicionamento incorreto de números em ol's no IE6/7 */
ol {margem esquerda:2em}
/* == clearfix == */
.clearfix:depois {
contente: ".";
exibição: bloco;
altura: 0;
claro: ambos;
visibilidade: oculta;
}
.clearfix {display: bloco embutido;}
* html .clearfix {altura: 1%;}
.clearfix {display: block;}
São todos semelhantes, com necessidades e métodos diferentes.