Tutorial Intermediário de CSS: Seletores Classe e ID

16 03 2008

Código CSS com seletores classe e id

No Tutorial Iniciante de CSS nós analisamos apenas os Seletores HTML – aqueles que representam uma tag HTML.

Você também pode definir seus próprios seletores na forma de seletores classe e ID.

A vantagem dissso é que você pode ter o mesmo elemento, mas apresentá-lo de modos diferentes dependendo de sua classe ou ID.

No CSS, um seletor de classe é um nome precedido por um ponto (.) e um seletor ID é um nome prededido por um sustenido (#).

O CSS fica mais ou menos assim:

#topo {
	background-color: #ccc;
	padding: 1em
}

.intro {
	color: red;
	font-weight: bold;
}

O HTML se liga ao CSS usando os atributos id e class. Pra esse CSS, o HTML pode ser alguma coisa assim:

<div id="top">

<h1>Acarajé de Chocolate</h1>

<p>Essa é minha receita pra fazer acarajé usando só chocolate</p>

<p class="intro">Mmm mm mmmmm</p>

</div>

Veja que o primeiro parágrafo aparece diferente do segundo, já que no segundo foi aplicada a classe “intro”.

A diferença entre ID e classe é que ID só pode ser usado pra identificar um elemento, enquanto uma classe pode ser usada pra quantos elementos você quiser.

Você também pode aplicar um seletor pra um elemento HTML específico, basta declarar o seletor HTML primeiro. Assim

p.classe { qualquer coisa }

vai ser aplicado apenas a elementos parágrafo (p) que tenham a classe “classe”.

Na hora de criar nomes para suas classes e ID, procurem usar nomes que façam sentido e que representem a função daquele seletor. Evite nomes de classe como “texto-verde”, que representa apresentação. A vantagem do CSS é poder mudar todo o estilo do seu site de forma muito simples. Se você usa nomes assim, você perde flexibilidade. Quando, por exemplo, você quiser mudar o texto pra azul, ao invés de verde, você vai ter que 1)mudar o nome da classe para “texto-azul”, e mudar cada referência no seu HTML, ou 2)fazer com que a classe “texto-verde” mostre um texto azul. Estranho, não? Por isso, a classe “texto-destacado” ou “texto-forte” seria mais adequada.

Páginas Relacionadas

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

6 responses

2 05 2008
Tutorial Intermediário de CSS: Agrupando e Aninhando « Codando

[…] Página Anterior: Seletores classe e ID […]

26 05 2008
Tutorial Intermediário de CSS « Codando

[…] Seletores Classe e ID – Faça seus próprios seletores sem precisar daquele plástico grudento de plastificar! […]

20 07 2008
Tutorial Avançado de CSS: Especificidade « Codando

[…] Seletores de Classe e ID […]

18 04 2011
patrick luan

Muito bom estes tutoriais!
vou copiar todos(já copiei) para inserir no meu web site!
vlew!

23 04 2013
19 02 2014
Isaías

Muita bacana este material

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




%d blogueiros gostam disto: