• Transferir

Este artigo é o primeiro do ciclo sobre o tema do CSS Domando. Hoje vamos olhar para a tecnologia CSS redefinir..

Por que você precisa disso?

Cada navegador define seus estilos padrão para vários elementos HTML. Com a ajuda da redefinição de CSS, podemos nivelar essa diferença para garantir estilos transversais.

Por exemplo, você usa um item uMA. No seu documento. A maioria dos navegadores gosta Internet Explorer. e firefox adicionar link cor azul e afiado. No entanto, imagine que em cinco anos alguém decidiu criar novo navegador. (Vamos chamá-lo de Ultrabrowser). Os desenvolvedores do navegador não gostavam de ênfase azul e irritada, então eles decidiram alocar links vermelho e negrito. É baseado nisso se você definir o valor básico dos estilos para o item uMA., será garantido como você deseja vê-lo, e não preferido exibir os desenvolvedores do Ultrabroster.

Mas agora não temos recuos, incluindo entre parágrafos individuais! O que fazer? Não minta e não tenha medo: abaixo da nossa descarga, descrevemos a regra que precisamos. Faça isso pode ser feito jeitos diferentes: Especifique um travessão abaixo ou no topo do parágrafo, especifique-o em porcentagem, pixels ou em EM.

A coisa mais importante, o navegador agora joga de acordo com nossas regras e não estamos de acordo com isso. Eu decidi fazer desta forma:

* (Margem: 0; preenchimento: 0;) p (margem: 5px 0 10px 0;)

Como resultado, tivemos o que poderia ser visto no terceiro exemplo.

Você pode criar seus próprios estilos para redefinir, se resolver alguma tarefa específica em seu projeto. Apesar disso, não há liderança passo a passo Criando sua própria redefinição de CSS. Recomendar aos seus próprios princípios e seu próprio estilo.

Para ajudá-lo a fazer uma escolha, eu darei mais alguns links:

1. Menos é mais - minha escolha de reset css (ed elliot).

2. Sua redefinição de CSS é a primeira coisa a ver o navegador

Redefinir estilos Depois de instalar seus próprios estilos para itens é uma abordagem incorreta. Neste caso, nada de bom para esperar pela exibição do navegador. Lembre-se que você sempre conecta sempre a redefinição de CSS e, em seguida, todos os outros estilos.

Sim, eu entendo que era ridículo, mas este é um dos principais erros dos desenvolvedores da Mala a Great. Muitos apenas esquecem disso.

Alguns podem fazer uma pergunta lógica: Por que está acontecendo? A resposta é simples: as regras registradas abaixo do texto do arquivo CSS (e ainda menor por sua conexão no documento), sobrescrevem as regras declaradas anteriormente.

Não vamos nos mover muito do tópico e continuar. Aplique estilos de Eric Meyer ao nosso exemplo, mas após Descrições de nossas propriedades, como mostrado em 4 exemplos. A matemática diria o seguinte: "O que foi necessário para provar".

3. Use um documento CSS separado para redefinição de CSS

Eu tenho que (não, eles não me forçaram) para mencionar este conselho. Usando um arquivo separado para a reinicialização do CSS é uma prática comum que um grande número de desenvolvedores suporta.

Na verdade, eu adio à posição da criação um grande arquivo CSS Devido ao maior desempenho dessa abordagem. Mas B. esse problema Eu tendem a concordar com a maioria: a reinicialização do CSS deve ser tomada em um arquivo separado (geralmente chamado reset.css). Nesse caso, você pode usá-lo em vários projetos sem fazer qualquer esforço para agendar de outras regras de CSS.

4. Tente evitar usar um seletor universal

Apesar do fato de que este conceito funciona, sua aplicação geralmente não é desejável devido à incompatibilidade com alguns navegadores (por exemplo, este seletor é processado incorretamente no Internet Explorer). Você deve usar essa técnica apenas para páginas simples, pequenas, estáticas e previsíveis (se você já tiver que fazer).

Este conselho é especialmente importante quando você desenvolve soluções como temas CMS. Você não pode prever antecipadamente como será usado e como será modificado. É melhor descrever as regras de CSS fundamentais para todos os itens do que usar para esse mecanismo imprevisível (até mesmo um volume menor) de seletores universais.

5. Evite propriedades redundantes ao usar o reset CSS

Outra razão pela qual eu não gosto de um arquivo separado para a reinicialização CSS é a potencial redundância de declarações subseqüentes de propriedades CSS. A repetição de indivíduos de seus estilos entre todo o conjunto de arquivos CSS é um movietone e deve ser evitado. Claro, às vezes estamos com preguiça de acompanhar o estilo de estilos e combinar alguns deles, mas pelo menos tente!

Vamos voltar ao CSS RESET de Eric. Ele define valores padrão para altura de linha, cor e item de fundo corpo. Da seguinte maneira:

Corpo (altura da linha: 1; cor: preto; fundo: branco;)

Suponha que você já saiba como o elemento será parecido corpo.:

1. fundo-cor: #cccccc;
2. cor: # 996633;
3. Você quer horizontalmente para repetir uma imagem de fundo específica.

Nesse caso, não há necessidade de criar um novo seletor para descrever suas propriedades - você pode simplesmente ativá-los na redefinição do CSS. Vamos fazer isso:

Corpo (altura da linha: 1; cor: # 996633; fundo: #ccc url (tiled-image.gif) repetir-x superior esquerdo;)

Não tenha medo de modificar o próprio CSS. Configure para si mesmo, faça funcionar em si mesmo. Alterar, reconstruir, remover e adicioná-lo como você precisa em seu caso específico.

Eric Meyer disse sobre isso: "Este não é o caso quando todos devem usar o recurso CSS sem alterações."

Redefinir CSS. (Os estilos de reset) estão zerando com CSS, alguns dos parâmetros de elementos HTML que os navegadores são instalados por padrão. Por exemplo, esses elementos incluem parágrafos (tag), que inicialmente apresentam campos verticais diferente de zero (CSS), listas marcadas (Tag) que não possuem apenas campos, mas também um certo tipo marcadores (CSS) e assim por diante.

Agora vamos pensar pelo que você precisa deste reset css, o que ele pode nos dar? Bem, imagine que você glorificou as páginas do seu site e, ao mesmo tempo, não alterou os campos de parágrafos que os navegadores oferecidos por padrão, já que seu tamanho foi completamente organizado. Mas me diga, por favor, e onde você decidiu que todos os navegadores do mundo, que já existem e ainda aparecem, criarão campos do mesmo tamanho? Além disso, por que você acha que os navegadores nos quais você testou seu layout não mudará em sua próximas versões. O tamanho desses campos não é completamente removido? Sentir o que cheira?

Portanto, jogar fora CSS, os versos são simplesmente confinados a partir de tais mal-entendidos, isto é, eles primeiro redefinir todos os valores "críticos" das propriedades CSS e, em seguida, eles adicionam de volta, mas com seus próprios tamanhos. Assim, você pode ter certeza de que em todos os navegadores o site ficará igualmente. Você certamente não pode redefinir os estilos, mas simplesmente para definir o layout os parâmetros necessários Elementos, mas há um risco que algo que algo será perdido e, em um certo ponto, tudo "nada".

Com base no precedente, uma das características do alívio CSS é que após o seu uso, muitos elementos HTML perdem sua aparência habitual. E se a perda de campos nos parágrafos é para iniciantes, algo esperado para iniciantes, então, por exemplo, o fato de que os botões criados usando tags ou de repente se tornaram externamente semelhantes ao texto habitual - é uma surpresa completa. Mas isso não deve ser envergonhado, porque para esses estilos e são redefinidos, para que o pedigreador não se esqueça de especificá-los em um novo.

Há muitas maneiras de redefinir estilos, e se você escolher - depende apenas de você, mas posso te dizer um - o melhor reset é aquele que você criou, com base em sua experiência e hábitos. Se você ainda não tiver experiência, poderá usar uma das opções propostas abaixo.

Sempre especifique estilos para redefinir CSS no início do código, caso contrário, alguns dos parâmetros podem não funcionar porque prioridades de estiloque são navegadores instalados ao processar a página HTML e o código CSS.

Redefinir CSS com um seletor universal

* (Família de fontes: herdar; / * Todos os elementos herdam de seus fone de ouvido de fonte pai * / estilo de fonte: herdar; / * herdar o design * / peso-fonte: herdar; / * herdar o graxy * / vertical-alinhamento: Linha de base; / * Alinhamento de linha de base vertical * / Tamanho da fonte: 100%; / * Tamanho da fonte 100% * / Plano de fundo: Transparente; / * Fundo de todos os elementos transparentes * / fronteira: 0; / * Remova o quadro * / Outline: 0; / * Remover contornos * / margem: 0; / * Remover os campos * / preenchimento: 0; / * Remover recuos * /)

Descrição do exemplo

Neste exemplo com seletor universal Os estilos especificados são redefinidos imediatamente em todos os elementos HTML que estarão presentes na página. Como você pode ver, a maioria das propriedades é especificada precisamente para a rede de segurança, como valores e para que os navegadores precisam substituir por padrão de acordo com a especificação CSS. Mas como você já sabe, na prática, tudo isso é completamente diferente e se a propriedade é realmente herdada por elementos de seus pais em todos os navegadores líderes, os mesmos campos externos especificados pela propriedade CSS nem sempre são igual a zero.

Mas os tamanhos da estrutura (CSS) e contornos (CSS) não são zero por padrão, mas já de acordo com a especificação. No entanto, sua espessura foi redefinida, para que o medidor não se esqueça de especificá-lo claramente onde seria necessário.

Redefinir CSS do Yahoo!

Corpo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, forma, fieldset, entrada, textarea, p, blockquote, th, td (margem: 0; Preenchimento: 0;) Fieldset, img, abbr, acrônimo (fronteira: 0;) endereço, legenda, cite, código, dfn, em, forte, th, var (estilo de fonte: normal; Peso normal: normal;) Tabela (Colapso de fronteira: colapso; / * Borders comuns para tabelas de tabelas * / espaçamento de borda: 0; / * Distância de zeramento entre as células * /) legenda, th (alinhamento de texto: alinhamento de texto à esquerda; / * para a borda esquerda * /) OL, ul (estilo de lista: nenhum; / * Remover marcadores de listas * /) H1, H2, H3, H4, H5, H6 (tamanho de fonte: 100%; Peso da fonte: normal;) Q: Antes, q: Após (conteúdo: ""; / * cancelamos as citações da tag q * /)

Descrição do exemplo

Yahu de uma só vez desenvolveu sua própria versão de reinicialização dos olhos. Aqui, as propriedades de elementos específicos já estão mudando, o que torna possível obter maior flexibilidade para controlá-las. espécies externas. Por exemplo, os marcadores são removidos das listas, e a tag é cotações usando a propriedade CSS. As vantagens dessa abordagem são óbvias, mas as desvantagens incluem código mais volumoso e às vezes redundante. Mas ninguém incomoda você para alterar qualquer redefinição de CSS às suas necessidades. Suponha que você possa excluir algum desnecessário para você. selecionadores de tags. Ou não apenas remova aspas, mas imediatamente pergunte a aparência necessária.

Redefinir CSS de Eric Meyer

Html, corpo, div, span, applet, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pré, a, abbr, acrônimo, endereço, grande, cite, código, del, dfn, Em, img, ins, kbd, q, s, samp, pequeno, greve, forte, sub, sup, tt, var, b, u, centro, dl, dt, dd, ol, ul, li, fieldset, Forma, etiqueta, lenda, tabela, legenda, taco, tfoot, thead, tr, th, td, artigo, desbastar, figure, figcaption, rodapé, hcroup, menu, nav, saída, rubi, Seção, resumo, tempo, marca, áudio, vídeo (margem: 0; preenchimento: 0; fronteira: 0; font-size: 100%; fonte: herdar; alinhamento vertical: linha de base;) artigo, além, detalhes, figcaption, Figura, rodapé, cabeçalho, higroup, menu, nav, seção (exibição: / * Fazemos itens de bloco (para navegadores antigos) * /) corpo (altura de linha: 1; / * espaçamento entre linhas Texto na página * /) OL, UL (estilo de lista: nenhum;) blockquote: Antes, blockquote: depois, q: antes, q: após (conteúdo: ""; / * Remover citações em Q e blockquote * / conteúdo: Nenhum; / * Adicionar para fidelidade * /) blockquote, q (citações: nenhuma; / * Outra maneira de remover as cotações * /) tabela (colapso de fronteira: colapso; espaçamento de borda: 0;)

Descrição do exemplo

A próxima maneira de redefinir o CSS sugeriu Eric Meyer (Eric Meyer) - um desenvolvedor da Web conhecido em certos círculos. Aqui ele já adicionou uma redefinição de estilos para tags de HTML 5, que, a caminho, no momento em que escrevem este artigo, e eles ainda são muito mal suportados navegadores modernos. Mas você sempre precisa olhar em perspectiva, certo?

De fato, este artigo poderia continuar ao infinito, já que repito mais uma vez, em certo ponto, cada medidor chega à sua versão de descarga ou não o usa, dependendo de sua atenção.

Muitos versus são usados CSS redefinir.servindo para eliminar os recursos de diferentes navegadores. Na realidade, este ficheiro Estilos redefine todas as propriedades padrão CSS. Neste artigo, vou demonstrar o código desse arquivo e informará vale a pena usar a redefinição de CSS ou não.

Eu vi muitos diferentes CSS redefinir.Todos eles são sobre o mesmo. Você pode usar isso:

Html, corpo, div, span, applet, objeto, iframe,
H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE,
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,
B, U, I, Centro,
Dl, dt, dd, ol, ul, li,
Fielfset, forma, etiqueta, lenda,
Mesa, legenda, tbbody, tfoot, thead, tr, th, td (
Fundo: transparente;
Fronteira: 0;
Tamanho da fonte: 100%;
Margem: 0;
Esboço: 0;
Preenchimento: 0;
Alinhamento vertical: linha de base;
}
Corpo (
Altura da linha: 1;
}
Ol, ul (
Estilo de lista: nenhum;
}
Blockquote, q (
Citações: Nenhum;
}
Blockquote: Antes, Bloqueio: Depois,
Q: Antes, Q: Depois (
Contente: "";
Conteúdo: Nenhum;
}
: foco (
Esboço: 0;
}
Mesa (
Colapso de fronteira: colapso;
Espaçamento de fronteira: 0;
}

Eu acho que seu uso é devido e tão compreensível, mas por que, por exemplo, eu não uso, como muitos outros vérticos, vale a pena contar sobre isso. Primeiro, é um arquivo extraEm segundo lugar, entendimento Para processamento, mas o mais importante - eu gosto das propriedades padrão. Por exemplo, os mesmos campos na tabela. Afinal, todas as propriedades padrão não gostaram, mas como mais opção ideal Exibição de vários elementos. Eu garanto-lhe, redefinir preenchimento. As células da tabela, provavelmente, você irá devolvê-lo no arquivo principal. E longe do fato de que o valor será diferente do que foi o padrão. Então, acontece que limpamos primeiro e depois o mesmo retorno. E junto com as primeiras deficiências (um arquivo extra e código extra), muitos vértens não são usados. CSS redefinir..

Qualquer maneira, usar a descarga de estilo não é ruim, então você pode usá-lo com segurança se você acha que a simplificação da adaptação do site em vários navegadores realmente simplificará você em geral.

Todo mundo tem suas regras pré-instaladas para projetar páginas da Web e elementos neles (Stylesheet do usuário do usuário) conectadas automaticamente por padrão. No entanto, a maioria dos vestores ao criar um novo projeto adiciona um especial redefinição do arquivo. CSS, que faz uma reiniciação completa dos estilos CSS e permite que os desenvolvedores criem com "folha pura". Por que e como tudo isso é feito - a peneira no artigo atual.

Se você olhar para a pré-visualização da postagem do post, verá que a linha habitual no Safari, Chrome e Firefox é exibida absolutamente. de maneiras diferentes. Sim, às vezes as regras deles coincidem, por exemplo, todos escondem a tag de cabeça através do visor: Nenhum opção, no entanto, em muitos casos, há diferenças sérias ao renderizar objetos na página. Eu suspeito que alguns de seus clientes não podem gostar quando a versão final do layout não é como no layout.

Portanto, se você é um desenvolvedor da Web novato, a publicação será inequivocamente útil para o desenvolvimento geral. É uma tradução desta nota com uma visão geral do CSS redefine as condições em 2018. Tenho certeza de que em 2019 e mais tarde tudo isso ainda será relevante, porque Este tópico já foi mais de 10 anos (a partir do momento da liberação da primeira solução semelhante).

Por que você precisa de uma configuração de redefinição CSS?

Como você já entendeu da adesão, eles permitem que você elimine a extensão entre os estilos básicos de navegadores da Web e levá-los a uma questão de plus-menos padronizada. Sempre aplique no início a outros desenvolvimentos personalizados. No artigo Erik Meyer sobre Redefinir CSS por dez anos atrás, a principal razão para esta abordagem é mencionada, que anos ainda relevantes:

O problema reside no fato de que diferentes navegadores têm suas configurações padrão e todas elas não são as mesmas. Acreditamos que nosso código altera o design da página inicial, mas isso não é inteiramente assim, e com a ajuda de arquivos de redefinição, podemos fazer este tipo padrão de documento mais monções para todos os programas. Portanto, haverá menos tempo para gastar em combater instalações firefox., Chrome, etc. Por padrão.

Mas agora a situação é menos contrária ao layout?

Sim, de fato, em nosso tempo, muitos parâmetros no agente do usuário tornaram-se mais semelhantes. Em quase toda parte, o cabeçalho H1 estabelece o tamanho da fonte 2em e o recuo horizontal 0.67em. No entanto, estas são todas relativamente novas mudanças, e no mínimo, você precisa levar em conta o apoio de antigas versões de programas, onde não existe tal consistência.

Além disso, em alguns casos, dependendo do tipo de zero CSS (sobre isso abaixo), esse chip ainda é útil para nós, mesmo que apenas os navegadores da Web modernos fossem considerados.

Mas aplicamos nossos estilos, substituindo o básico?

Essa abordagem é um dos principais resumos dos adversários dessa abordagem - no final, de qualquer maneira, aqueles ou outros parâmetros são substituídos por seu próprio estilo.CSS, então por que adicionar outro arquivo extra e reduzir? Apesar do fato de que, nessa frase, faz sentido, o uso de redefinição é justificado por dois momentos:

• Primeiro, ajuda a escrever um código mais limpo. Seremos capazes de dividi-lo em várias partes: separadamente para o projeto do projeto da Web e um conjunto de regras orientadas sob as especificidades de navegadores específicos. Isso não é para subir o arquivo CSS principal com todos os tipos de hacks, etc.
• Em segundo lugar, todos os reiniciosos pesam muito pouco, e seu download não requer número grande Tempo.

TIPOS CSS RESET (você pode baixar links no artigo)

A partir do distante de 2004, quando o primeiro desses desenvolvimentos apareceu, agora há muitos métodos que diferem em dificuldade e sua especificidade. Na verdade, existem 3 gols que estão tentando resolver o reset dos estilos CSS:

1. Corrigir erro na folha de estilo do usuário do usuário.
2. Cancelamento de design original não padrão em navegadores da Internet.
3. Criando uma base universal de estilo compatível.

Existem opções que decidem todas as três tarefas e aquelas que são afiadas apenas sob um problema específico.

Correção / correção de erros

Considere o primeiro dos objetivos expressos acima. Como você já entendeu, a eliminação de diferentes deficiências e cardumes de navegadores é mais relevante para apoiar os lançamentos obsoletos. Um dos bons exemplos de tal situação - quando após a aparência do HTML5, o mesmo Internet Explorer 9 não aplicou o tipo correto de exibição para novos objetos.

Portanto, em soluções por tipo normalize.css, todos os erros são levados em conta e processados:

/ ** * Adicione a exibição correta no IE. * / Principal (exibição: bloco;)

/ ** * Adicione a exibição correta no IE. * / Principal (exibição: bloco;)

Como essas ações são necessárias apenas para o software antigo, faz sentido usar o pós-processador PostCS, como os PostCs normalizarem junto com a lista Browser, a fim de adicioná-las somente quando você precisar implementar o suporte de determinados navegadores.

Outro exemplo de código de CSS puro, que é adequado, incluindo programas da Web modernos - corrigir elementos de exibição e atributo oculto.

[Oculto] (exibição: nenhum! Importante; // um dos bons casos de uso de! Importante }

(Exibir: nenhum! Importante; // Um \u200b\u200bdos bons casos de uso de! Importante)

Remova os estilos peculiares dos navegadores

Esse é o segundo motivo para redefinir as configurações do CSS. Em princípio, cada uma das suas opiniões sobre a execução na folha de estilo do usuário é considerada "peculiar". A definição do autor da nota original é bastante lógica: este é um estilo que não é uma versão "nua" da exibição do elemento.. Por exemplo, adicionar recuos para manchetes em 2em (quantos fazê-lo), a ideia não é ruim, mas por que é 2em, e não 3em ou não 4em. Nesse caso, a opção básica seria a ausência de qualquer incidência, ou seja, margem zero.

Mais simples abordagem universalRemovendo os recuos / marcas de campo:

* (Margem: 0; preenchimento: 0;)

* (Margem: 0; preenchimento: 0;)

Este método é muito radical, porque Aplica-se a todos os objetos, mesmo onde você não espera (na mesma entrada). Alternativamente, o Eric Meyer Redefinir CSS é usado frequentemente, que remove os parâmetros de margem / preenchimento, fronteiras e tamanho da fonte (em 0 ou nenhum) onde é logicamente justificado:

Html, corpo, div, span, applet, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pré, a, abbr, acrônimo, endereço, grande, cite, código, del, dfn, Em, img, ins, kbd, q, s, samp, pequeno, greve, forte, sub, sup, tt, var, b, u, centro, dl, dt, dd, ol, ul, li, fieldset, Forma, etiqueta, lenda, tabela, legenda, taco, tfoot, thead, tr, th, td, artigo, desbastar, figure, figcaption, rodapé, hcroup, menu, nav, saída, rubi, Seção, resumo, tempo, marca, áudio, vídeo (margem: 0; preenchimento: 0; fronteira: 0; tamanho: 100%; fonte: herdar; alinhamento vertical: linha de base;)

html, corpo, div, span, applet, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pré, a, abbr, acrônimo, endereço, grande, cite, código, del, dfn, Em, img, ins, kbd, q, s, samp, pequeno, greve, forte, sub, sup, tt, var, b, u, centro, dl, dt, dd, ol, ul, li, fieldset, Forma, etiqueta, lenda, tabela, legenda, taco, tfoot, thead, tr, th, td, artigo, desbastar, figure, figcaption, rodapé, hcroup, menu, nav, saída, rubi, Seção, Resumo, Tempo, Marca, Áudio, Vídeo (Margem: 0; Padding: 0; Fronteira: 0; Tamanho da fonte: 100%; Fonte: herdar; alinhamento vertical: linha de base;)

Substituir estilos

Em contraste com a seção anterior, aqui a tarefa principal não é redefinir o CSS de certos objetos, mas substituí-los com seus próprios valores atuais.

Por exemplo, em vez de definir todo o tamanho de 1em e margins \u003d 0 em Sanitize.css, outros valores são definidos:

/ ** * Corrija o tamanho da fonte e a margem no` Elementos do` H1 dentro da `seção e * 'Artigo' contextos no Chrome, Firefox e Safari. * / H1 (tamanho: tamanho: 2em; margem: 0. 67EM 0;)

/ ** * Corrija o tamanho da fonte e a margem no` Elementos do` H1 dentro da `seção e * 'Artigo' contextos no Chrome, Firefox e Safari. * / H1 (tamanho de fonte: 2em; margem: 0.67EM 0;)

A reinicialização de Bootstrap encontrará outra ilustração da tarefa atual. Os desenvolvedores foram um pouco mais e prescritos fontes e cor de fundo para o corpo.

// Corpo // // 1. Remova a margem em todos os navegadores. // 2. Como uma prática melhor, aplique uma cor de fundo padrão padrão // 3. Defina um valor inicial de alinhamento de texto explícito para que possamos usar // o 'valor do seriano em coisas como`	"Elementos. Corpo (margem: 0; // 1 Font- Família: $ Fonte - Base familiar; Tamanho da fonte: $ font - tamanho - Base; Font- Peso: $ Fonte - Base de peso; altura da linha: altura - Base; cor: $ corporal - cor; alinhamento de texto: esquerda; // 3 fundo- cor: $ corpo - BG; // 2)

// Body // // 1. Remova a margem em todos os navegadores. // 2. Como uma prática melhor, aplique uma cor de fundo padrão padrão // 3. Defina um valor de alinhamento de texto inicial explícito para que possamos usar posteriormente o valor // o "valor de herdar nas coisas como" "Elementos. Corpo (margem: 0; // 1 fonte-família: $ Font-face-Base; Tamanho da fonte: $ Base-tamanho-Base; Peso de fonte: $ Font-Weight-Base; Altura da linha: altura da linha -Base; cor: $ cor-cor; alinhamento de texto: esquerda; // 3 fundo-cor: $ body-bg; // 2)

TOTAL. O que escolher

Na nota original, há o resultado da pesquisa correspondente de

Neste artigo, falaremos sobre a redefinição de estilos e consideraremos um exemplo de criação de tal arquivo reset.css.

A ideia de jogar estilos apareceu cerca de 10 anos atrás. O que realmente concluiu que, com a ajuda de um pequeno conjunto de estilos CSS, trouxe a vista da página em todos os navegadores para o mesmo. Claro que nem sempre funciona, mas alguns momentos podem ser corrigidos - por exemplo, a fronteira não entende onde o IE está ocorrendo em algumas versões. Ou derrame azul (esboço) nos campos.

Não para um desenvolvedor front-end não é segredo que os navegadores são muito exigentes e cada processo elementos HTML. À sua maneira, adicionando seus estilos padrão.

Como essas idéias pegavam fogo por um longo tempo, não é surpreendente que já exista arquivos prontos Redefinir, geralmente chamado reset.css e conecte-se a todos os projetos.

Por que dentro arquivo separado? Sim, porque é mais conveniente transferi-los do projeto para o projeto.

Aqui está um exemplo reset.css a partir de 2007:

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licença: Nenhum (domínio público) * / html, corpo, div, span, applet, objeto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pré, a, abbr, acrônimo, endereço, Grande, cite, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeno, greve, forte, sub, sup, tt, var, b, u, i, tt, var, b, U, centro, dl, dt, dd, ol, ul, li, field, forma, rótulo, lenda, mesa, legenda, tbbody, tfoot, thead, tr, th, td, artigo, lado, lona, \u200b\u200bdetalhes, Incorporar, figura, fig figcaption, rodapé, cabeçalho, higrupe, menu, nav, saída, rubi, seção, resumo, tempo, marca, áudio, vídeo (margem: 0; preenchimento: 0; borda: 0; font-size: 100% Fonte: herdar; alinhamento vertical: linha de base;) / * HTML5 Display-Função RESET para navegadores mais antigos * / Artigo, além, detalhes, figfaption, figura, rodapé, cabeçalho, hq, menu, nave, seção (exibição: bloco; ) Corpo (altura da linha: 1;) ol, ul (estilo de lista: nenhum;) blockquote, q (citações: nenhuma;) blockquote: antes, blockquote: depois, q: após (conteúdo: ""; Conteúdo: Nenhum;) Tabela (colapso da fronteira: C. Ollse; Espaçamento de fronteira: 0; )

Este é apenas o padrão desse arquivo tomado por um determinado círculo de desenvolvedores da Web.

Eu aconselho você, se você é um programador experiente ou apenas iniciantes para desenvolver seu arquivo de reset. Como base, você pode assumir o padrão descrito acima, complementá-lo com seus seletores ou alterar os existentes. Aqui está um exemplo de tal arquivo que eu desenvolvi para mim:

entrada, TextArea, A, Botão, Selecionar (Esboço: Nenhum) IMG (Fronteira: Nenhum;) HR (claro: ambos; borda: nenhuma; fundo: nenhum;) * (fundo - repita: não-repete;) / * html5 Redefinição de função de exibição para navegadores mais antigos * / artigo, além, detalhes, figcaption, figura, rodapé, cabeçalho, higroup, menu, nav, seção (exibição: bloco;) corpo (altura de linha: 1;) ol, ul -Style: Nenhum; margem: 0; preenchimento: 0;) blockquote, q (citações: nenhum;) blockquote: antes, blockquote: depois, q: antes, q: após (conteúdo: nenhum;) tabela (Colapso de fronteira: colapso; espaçamento de fronteira: 0;)

Você pode kip qualquer código acima para uso pessoal, mas se você usá-lo em seus artigos - coloque um link para a fonte.