CSS: classes e ids
CSS:
classes e ids
(Elivelto Ebermam)
Até o momento estamos usando regras para seletores específicos
como p, h1, h2 entre outros. Mas e se quisermos que dois parágrafos tenham
formatações diferentes?
Para isso podemos usar id ou uma classe. Um id é um identificador
único, não pode haver dois elementos com o mesmo id. O id é como se fosse o
CPF, cada pessoa tem o seu número. Já a classe pode ser comum a vários
elementos. Fazendo uma analogia, um exemplo seria a nacionalidade, há vários
brasileiros, argentinos, americanos etc.
Assim, id é usado para elementos que tenham características únicas e classe é usado para um grupo de elementos.
Id
Voltando a pergunta: mas e se quisermos que dois parágrafos
tenham formatações diferentes? Foi dito que uma das formas de resolver isso é
usado id. A solução desse problema acontece em duas etapas.
A primeira etapa é usar um id para o elemento no HTML. Para
isso, acessamos a propriedade id do elemento p (as outras tags também possuem
essa propriedade) e definimos um valor para ela. Esse valor é um nome definido
pelo programador. Veja um exemplo:
<html>
<head>
</head>
<body>
<p id="paragrafo1"> Exemplo </p>
<p id="paragrafo2"> Exemplo </p>
</body>
</html>
Assim atribuímos identificadores para cada
um dos parágrafos. A segunda etapa é definir as propriedades dos
identificadores. Por exemplo, queremos que o paragrafo1 tenha letra verde e
paragrafo2 tenha letra azul. Essa etapa é feita no CSS.
Naturalmente definir essas propriedades em
CSS é simples, mas aqui temos um problema: normalmente aplicamos a regra a um
seletor, mas nesse caso se trata do mesmo seletor (p). Entretanto o CSS permite
que regras sejam aplicadas a ids e classes também. Para definir uma regra para
um id, temos que usar o símbolo # e depois o nome do id, veja:
#paragrafo1 {
color
: green;
}
#paragrafo2 {
color
: blue;
}
Dessa forma resolvemos o problema
apresentado no início do artigo. Veja o código completo:
Disponível
em: https://www.w3schools.com/code/tryit.asp?filename=GINP16SDZOUD
Classes
A outra forma de resolver o problema é usando
classes. O processo também é feito em duas etapas, mas a propriedade que deve
ser acessada é a class, veja:
<html>
<head>
</head>
<body>
<p class="paragrafo_verde"> Exemplo </p>
<p class="paragrafo_azul"> Exemplo </p>
</body>
</html>
O valor para a propriedade class dos
parágrafos é escolhida pelo programador. Porém não é permitido usar espaços e
nem acentos para o nome das classes (isso também vale para id). Nesse caso
foram escolhidos os valores “paragrafo_verde” e “paragrafo_azul”.
A segunda etapa é escrever as regras para as classes no CSS. Para definir uma regra para uma classe, temos que usar o símbolo . (ponto) e depois o nome da classe, veja:
.paragrafo_verde {
color
: green;
}
.paragrafo_azul {
color
: blue;
}
Veja alguns exemplos:
Disponível
em: https://www.w3schools.com/code/tryit.asp?filename=GIOGIYNT7GA9
Disponível
em: https://www.w3schools.com/code/tryit.asp?filename=GIOGZBIKASVU
Quando usar id e quando usar classe?
Em desenvolvimento de software, temos sempre que pensar em
reaproveitamento de código. Se temos dois ids com a mesma regra CSS, podemos
substituir por uma classe. Ao longo do desenvolvimento de uma página web,
veremos que muitas das regras CSS são utilizadas para mais de um elemento.
Assim, é preferível usar classes, mas se o elemento for muito específico,
pode-se utilizar id. Há a possibilidade de usar classe e id em conjunto para um
mesmo elemento também.
Múltiplos seletores
Imagine o seguinte problema:
“ Escreva regras CSS para que os elementos tenham as
seguintes características:
- Parágrafo (p) tenha fonte
arial, tamanho 12px.
- Título 1 (h1) tenha fonte arial, tamanho 12px e efeito
todas maiúsculas.
- Classe “destacado” tanha fonte arial, tamanho 12 px e
efeito negrito. “
Podemos resolvê-lo da seguinte forma:
p {
font-family
: Arial;
font-size
: 12px;
}
h1 {
font-family
: Arial;
font-size
: 12px;
text-transform : uppercase;
}
.destacado {
font-family
: Arial;
font-size
: 12px;
font-weight
: bold;
}
Essas regras resolvem o problema,
porém, notamos há muita coisa idêntica nas três regras. As propriedades font-family
e font-size são iguais nas três regras.
O CSS permite que escrevamos uma regra
para múltiplos seletores, usando uma vírgula para separá-los. Veja outra
solução para o mesmo problema:
p, h1, .destacado {
font-family
: Arial;
font-size
: 12px;
}
h1 {
text-transform : uppercase;
}
.destacado {
font-weight
: bold;
}
Veja um exemplo com essas regras:
Disponível em: https://www.w3schools.com/code/tryit.asp?filename=GIOS0V0X79SS
Comentários
Postar um comentário