Publicado por: Paulo Fernandes | 24/jun/2008

CSS Reset

Olá a todos.

Hoje falarei sobre um seletor muito legal, este seletor é o * [ asterisco ]

Muitos sabem que em informática, quando desejamos informar que algo pode ter muitas coisas informamos pelo * [ asterisco ]. Em CSS não é tão diferente assim. Quando utilizamos o * estamos nos referindo a qualquer seletor, seja um ID, uma Classe, uma Tag, qualquer coisa.

Vantagens:

Você consegue definir a mesma configuração para todos os elementos da página, como por exemplo cor, dessa forma, você não mais precisa se preocupar com as cores dos outros elementos, você já sabe que todas serão definidas usando a herança do *. Caso deseja mudar a cor da fonte, fica muito tranquilo, pois basta alterar somente no elemento que você deseja.

Desvantagens:

Quando definimos por exemplo margens, todos os elementos pegam as margens, eles perdem as margens que são definidas por DEFAULT ao elemento. Veja o Exemplo abaixo com se sem CSS. As listas tem um espaçamentos de margem e padding. Este espaçamento é definido pelo estilo do navegador, e caso você utilize o CSS Reset, você substitui essas propriedades.

Vamos ao código que é o que interessa, até facilitará o entendimento, primeiramente, farei o código xHTML e depois o CSS.

xHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>CSS Reset by aprendacss.wordpress.com</title>
<style type=”text/css”>

</style>
</head>
<body>
<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
<li>Lista 4</li>
</ul>
</body>
</html>

CSS


* {
margin: 0;
padding: 0;
color: #00F;
}


Sem CSS Reset

Sem Usar o CSS Reset

Usando o CSS Reset

Utilizando a Técnica do CSS Reset

Pronto! Notaram a diferença em usar e não usar o CSS Reset.

Até o próximo artigo.

Anúncios

Responses

  1. […] O layout está centralizado. Lembre-se que caso deseje pode usar as técnicas CSS Reset e  Layout de Duas […]

  2. […] a diferença. Esqueci de comentar que para um melhor resultado sempre é bom utilizar a técnica de CSS Reset. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” […]

  3. bom, muito bom. Esses navegadores dão uma dor de cabeça e nos obriga a criar código que seria desnecessário se eles usassem os mesmos valores default para todos os elementos.

    Boa dica, parabens

  4. […] Vamos resetar a margem e o padding de todos os elementos da página usando a técnica CSS Reset, também definiremos um layout básico para a página para vermos as separações, o layout não […]

  5. […] a tag div – Via Código fonte *Estilo Clear (CSS Style Clear) – Via Como Criar Sites *CSS Reset – Via Aprenda […]


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: