Carregando...

Classes em HTML

Depois do div, autocolantes class reutilizáveis ligam estilos.

Porque nomes partilhados ganham

Mantêm estilos coerentes.

Resposta direta

Escreva class="note", partilhe, separe com espaços. Em CSS .note. Sem # no atributo.

📊 class in HTML vs CSS

Place	What you write	Role
HTML attribute	class="note"	Labels the element (no leading dot)
CSS selector	.note	Selects elements that have that class
Multiple names	class="card featured"	Space-separated list in HTML
Same idea in CSS	.card.featured	Element that has both classes (advanced combining)

Classe partilhada em vários elementos

Dois parágrafos class="note".

Shared class

html

HTML Code

<p class="note">Save often.</p>
<p class="note">Use clear names.</p>
<style>
.note { color: #0b4; font-weight: 600; }
</style>

Leitura da classe partilhada

ambos note
.note seleciona o grupo

Várias classes num elemento

card e featured juntos.

Multiple classes on one element

html

HTML Code

<div class="card featured">
<h2>Featured tip</h2>
<p>Classes can combine on one box.</p>
</div>
<style>
.card { padding: 12px; border: 1px solid #444; }
.featured { border-color: #0a7; }
</style>

Leitura de várias classes

dois tokens
.card + .featured

Hábitos de nomes

Curtos e claros.

Prática

dois tip
estilizar .tip
segunda classe
corrigir typo

Erros fáceis

no class
vírgulas em vez de espaços
.note no HTML

Resumo

class = gancho CSS/JS
partilhar e combinar
a seguir: id

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 Instruções

Leia cada pergunta cuidadosamente
Selecione a melhor resposta para cada pergunta
Você pode refazer o quiz quantas vezes quiser
Seu progresso será mostrado no topo

Idioma