DS & II

capitulo_12_seletores

Leitura de 2 min

Capítulo 12: Identificando os Heróis (Seletores) 🎯🛡️

Neste capítulo, vamos aprender a selecionar elementos específicos usando Classes e IDs, em vez de pintar todas as tags iguais, usando o tema Marcas e Brasões!

📖 Seletores: Classe e ID

Se usarmos apenas a tag (como p { color: red; }), TODOS os parágrafos do site ficarão vermelhos. Para resolver isso, usamos atributos no HTML para dar nomes aos elementos:

  • Classe (class): Usada para vários elementos que compartilham o mesmo estilo. No CSS, usamos um ponto . antes do nome.
    • HTML: <p class="destaque">Texto</p>
    • CSS: .destaque { color: blue; }
  • ID (id): Usado para um único elemento único na página. No CSS, usamos a hashtag # antes do nome.
    • HTML: <h1 id="titulo-principal">Site</h1>
    • CSS: #titulo-principal { font-size: 40px; }

📖 Exemplo Guiado: Colorindo Diferente

Vamos usar classes para diferenciar parágrafos.

  1. Crie o arquivo seletores.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Seletores</title>
    <link rel="stylesheet" href="seletores.css">
</head>
<body>
    <h1 id="topo">Guerreiros</h1>
    <p class="aliado">Este é um guerreiro aliado (Verde).</p>
    <p class="inimigo">Este é um guerreiro inimigo (Vermelho).</p>
    <p class="aliado">Outro aliado (Verde).</p>
</body>
</html>
  1. Crie o arquivo seletores.css:
#topo {
    text-align: center;
}
 
.aliado {
    color: green;
}
 
.inimigo {
    color: red;
}

📊 Ilustração Visual: Seletores

graph TD
    A[Seletor] --> B["Tag: h1"]
    A --> C[".classe: .aliado"]
    A --> D["#id: #topo"]

🛠️ Prática Obrigatória 1: Aliado e Inimigo

Crie um arquivo chamado meu_exercito.html e o CSS correspondente. Crie dois parágrafos: um com a classe mago (cor azul) e outro com a classe arqueiro (cor laranja)!

🔑 Gabarito de Código

Prática 1: meu_exercito.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Exército</title>
    <link rel="stylesheet" href="exercito.css">
</head>
<body>
    <p class="mago">Eu lanço feitiços!</p>
    <p class="arqueiro">Eu atiro flechas!</p>
</body>
</html>

exercito.css

.mago {
    color: blue;
}
 
.arqueiro {
    color: orange;
}

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo X) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.
  3. ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
  4. No Microsoft Teams:
    • Copie o link do seu repositório.
    • Cole na tarefa correspondente no Teams.
    • Clique em Entregar.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks