quinta-feira, 28 de abril de 2011

Dicas de Programação: Qual é a diferença de . e # no CSS?

A diferença entre o ponto e a cerquilha, é que o ponto (.) representa a classe e a cerquilha (#) representa o id do elemento (tag) na folha de estilo (CSS). Por exemplo, se eu usar o css:

div.elemento1 {
background: red;
}

E eu criar dois divs:

<div id="elemento1">Primeiro</div>
<div class="elemento1">Segundo</div>

O segundo div será vermelho!

Se fosse assim:

div#elemento1 {
background: blue;
}

O primeiro div seria azul!

Espero que isso ajude!

Até mais!

2 comentários:

Anônimo disse...

Eae Takemura,
Gostaria de complementar um pouco seu post.

A classe realmente tem menos "prioridade" na exibição do estilo comparando com o id.

Porém, imagina a loucura que não ficaria tendo ID pra tudo, fora a criatividade que a pessoa teria q ter .. rsrs

Hoje em dia, tem se falado muito em deixar a estilização modularizada, usando ID mais para categorização (ex: #clientes) e classes para funcionalidades e reutilizáveis (ex: .box que pode ser usado pra produtos, pedidos, etc).

Algumas dicas:
- Documente o seu código
- Crie uma página com objetos padrões para fácil consulta.
- Faça em equipe, padrões são criados e não impostos
- Crie classes baseadas na Função e não no conteúdo

Takemura disse...

Valeu pelo complemento. ;)
Agora esta um pouco mais "decente" (sou "resumista" ao extremo :P).