Atributo de classe HTML

Classes HTML são o assunto de nossa discussão. Os elementos HTML podem ser classificados usando o atributo class.

O atributo de classe de um elemento HTML define nomes de classe únicos ou múltiplos. Os elementos HTML podem ser personalizados com um nome de classe em CSS e JavaScript. Em CSS, associe essa classe a uma classe exclusiva escrevendo um caractere de ponto (.) seguido do nome da classe.

A mesma classe pode ser aplicada a vários elementos HTML .

Índice-

Usando o atributo de classe

Classes HTML são comumente referenciadas pelo atributo class em folhas de estilo. O JavaScript também pode manipular elementos HTML cujo nome de classe corresponda ao nome de classe específico .

Nosso exemplo contém três elementos <div> com o atributo de classe “city” .

Neste caso, estamos estilizando todos os três elementos <div> igualmente de acordo com .city .

Definição do estilo da seção principal:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body><div class="city"><h2>London</h2>
<p>London is the capital of England.</p>
</div><div class="city"><h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div><div class="city"><h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Este exemplo mostra dois elementos <span> com o atributo class definido como “note”. Na seção head, a definição de estilo .note define como ambas as tags <span> serão estilizadas:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body><h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Lembrete: Observe que o nome da classe diferencia maiúsculas de minúsculas! Qualquer elemento HTML pode usar o atributo class em classes Html.
Dica: Nossas lições de CSS ensinarão muito mais sobre CSS.

A sintaxe da classe

Operando classes HTML, construa uma classe escrevendo um ponto (.) seguido de seu nome. Depois disso, especifique as propriedades CSS entre chaves:

Crie uma classe chamada “cidade”:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style>
.city {background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body><h2 class="city">London</h2>
<p>London is the capital of England.</p><h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p><h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Diferentes elementos podem compartilhar a mesma classe

Quando falamos sobre classes HTML , um nome de classe pode ser atribuído a vários elementos HTML .

No exemplo a seguir, <h2> e <p> pertencem à classe “city” :

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Várias classes

Várias classes podem ser atribuídas a elementos HTML .

Você pode definir várias classes separando-as com um espaço, por exemplo, <div class=”city main”>. As classes HTML serão usadas para estilizar o elemento de acordo com todas as suas classes.

Aqui, o primeiro elemento <h2> pertence tanto à classe city quanto à classe principal , de modo que herdará o estilo de ambas:

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Sintaxe Errada

Muitas pessoas escrevem o código nesta sintaxe , o que está absolutamente errado. Veja exemplo abaixo

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head><style>
#company {
background-color: blue;
color: white;
padding: 2px;
}
</style>
</head><body>
<h2 class="company">Tesla</h2>
<p class="company">Tesla was founded by Elon Musk</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Nota: O estilo não funcionará porque eles usaram o sinal de atributo id em vez de classe, você deve sempre usar o (.) antes de mencionar o nome da classe.

Aqui está outro exemplo usando classes e id diferentes em uma única página:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head><style>
#pc {
background-color: blue;
color: white;
padding: 2px;
}
.place{
background-color: green;
color: red;
padding: 5px;
}
</style>
</head><body>
<h2 id="pc">Dell</h2>
<p>I have a dell machine with intel i7 core processer</p>
<h2 class="place">Yellowstone Park</h2>
<p class="place">We visited yellowstone park last summer</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Uso do atributo class em JavaScript

Os elementos HTML também podem ser endereçados pelo nome da classe em JavaScript com base no nome da classe.

Em JavaScript, o método getElementsByClassName() permite acesso aos elementos por seus nomes de classe:

Aqui está outro exemplo disso, clicando em um botão abaixo você pode ocultar todos os elementos com o nome de classe “city“:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><br><script><br>function myFunction() {<br>var x = document.getElementsByClassName("city");<br>for (var i = 0; i < x.length;<br>i++) {<br>x[i].style.display = "none";<br>}<br>}<br></script><br><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Por favor, não se preocupe se você não entender o código no exemplo acima.

Dica: JavaScript será abordado em nosso próximo capítulo sobre HTML JavaScript , ou você pode estudar nossa próxima lição sobre JavaScript.

Atributo de classe em HTML: benefícios

Existem várias vantagens em usar IDs exclusivos em HTML:

Reutilização: como mencionado anteriormente, o atributo class permite definir um conjunto de estilos ou comportamentos que podem ser aplicados a vários elementos em uma página da web. Isso ajuda a reduzir a quantidade de código que você precisa escrever e facilita a manutenção e atualização do seu site.

Consistência: ao usar os mesmos nomes de classe em diferentes elementos, você pode garantir que seu site tenha uma aparência consistente, o que pode ajudar a criar uma aparência profissional e polida.

Flexibilidade: o atributo de classe permite aplicar estilos ou comportamentos a vários elementos com um único nome de classe, o que oferece mais flexibilidade em seu design e layout.

Especificidade: O atributo class pode ser usado em conjunto com outros seletores CSS para criar estilos mais específicos e direcionados. Isso pode ajudar a evitar conflitos e garantir que seus estilos sejam aplicados corretamente.

Acessibilidade: ao usar nomes de classe significativos, você pode ajudar a tornar seu site mais acessível para usuários que dependem de leitores de tela ou outras tecnologias assistivas.

Separação de preocupações: Ao separar seu HTML e CSS em arquivos diferentes e usar o atributo class para aplicar estilos, você pode manter seu código organizado e mais fácil de ler e manter.

Assine nossa Newsletter abaixo para ficar rodeado de conhecimento técnico sobre linguagens de programação.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.