11 5563-9074
Orçamento

CSS RESET

CSS 3 - Aplicar Reset no CSS
Publicidade

Quando construimos um site usamos tags necessárias e indispensáveis que quando não são definidas pelo css do site, são interpretadas de maneira distinta por cada navegador.

Por exemplo:
a tag

, se não definirmos o espaçamento pelo css, cada navegador vai interpreter de maneira própria, e de certa forma isso pode atrapalhar na hora de configurar o restante do site.

Outro exemplo que podemos citar é o fato de quando colocamos link numa imagem ela gera uma borda em volta da imagem nos obrigando a colocar o comando "border="0" dentro da imagem.

Existe uma técnica conhecida por CSS RESET aonde defininos valores padrões para todas as tags básicas ou até classes que você poderá ter em diversos lugares do site.

Veja abaixo:

div {margin:0; padding:0};

Colocando esse código (div sem o ponto na frente) estamos informando o navegador que todas as div's do site vão ter as caracteriscas que digitamos ( no caso a margin e o padding vão ser 0).

Essa técnica não ira atrapalhar o restante da construção do site, muito pelo contrário pois como já definimos algumas caracteristicas não há necessidade de repetirmos em outras classes (somente nos casos em que precisamos definir esses mesmos valores).

Vamos citar o mesmo exemplos acimas:
Informando ao CSS RESET que a tag 

possui margin e padding 0, todos os navegadores irão interpretar da mesma forma.

No caso da imagem se informarmos que a tag img possui border 0 ou none, todas as imagens não vão ter borda (mesmo se for colocado link na mesma) e não é necessário informar dentro da tag da imagem assim deixando nosso código html mais simples.

Veja abaixo um exemplo de reset

// CÓDIGO AQUI

html, body, span, p, form, img, a, ul, ol, li, table, tr, td, div{
   margin: 0;
   padding: 0; 
   border:none; 
   outline:none;
   list-style-type:none;
}
Com as informações acima, os navegadores interpretam todas as tags citadas do mesmo jeito.

É importante lembrar também que o reset pode ser personalizado de acordo com a necessidade de cada site.
Publicidade
Autor: Danilo Luna
Arte e Desenvolvimento