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”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<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
Usando o CSS Reset
Pronto! Notaram a diferença em usar e não usar o CSS Reset.
Até o próximo artigo.
[...] O layout está centralizado. Lembre-se que caso deseje pode usar as técnicas CSS Reset e Layout de Duas [...]
Por: Centralizando Layout na Horizontal « Aprenda CSS em 25/Jun/2008
às 09:30:59
[...] 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” [...]
Por: Rodapé no Final da Página - Independente da Resolução « Aprenda CSS em 13/Out/2008
às 07:48:44
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
Por: Natanael em 1/Jul/2009
às 14:26:26
[...] 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 [...]
Por: Criando um menu bem simples « Aprenda CSS em 30/Jul/2009
às 12:17:58