Você sabe o que é CSS Reset? Normalmente também é escrito como Reset CSS, que redefine o estilo do navegador. 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.
Se você usa CSS, já usou CSS Reset? Claro, talvez você use, mas não saiba que está usando. Por exemplo, você pode usar:
| * { preenchimento: 0; margem: 0; |
Este também é um método de redefinição de CSS 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. A seguir está o código de redefinição de CSS do Yahoo, que também é o método de redefinição de CSS mais popular. O método escolhido por YUI é:
| corpo,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pré, 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; } |
OK, acredito que você já entendeu o propósito da redefinição de CSS. Talvez você também possa escrever seu próprio sistema de redefinição de CSS de acordo com suas preferências. E você pode consultar os seguintes:
Redefinição de CSS popular do Ateneu
| html, corpo, div, span, miniaplicativo, objeto, 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} |
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; } |
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: "" ""; } |