Módulo 1: Seletores e Cores

2. Resumo da Aula Anterior

No Módulo 0, preparamos o ambiente e vimos que o CSS serve para dar estilo ao HTML. Descobrimos a sintaxe básica: Seletor + Propriedade + Valor.

3. O Que Vais Aprender Hoje

✅ Seletores de Tag, Classe e ID.
✅ A hierarquia e a Especificidade.
✅ Formatos de cor: Hexadecimal, RGB e Nomes.
✅ Como pintar o fundo e o texto.

4. Teoria: A Hierarquia de Poder do CSS

Conceito Central: No CSS, quando múltiplos estilos tentam controlar a mesma propriedade, o seletor mais específico prevalece. Este princípio de especificidade é a espinha dorsal do CSS moderno e determina quem "manda" na hierarquia de estilos.

🏰 Analogia: O Império do Design Visual

Imagine um vasto império onde diferentes tipos de governantes disputam o controle territorial:

A Tag (ex: h1, p, div): É o Governador Provincial. Tem autoridade sobre toda a sua província, mas sua ordem pode ser anulada por governantes superiores.
A Classe (ex: .destaque, .importante): É o Conde Territorial. Governar regiões específicas com poder limitado, mas superior aos governadores provinciais.
O ID (ex: #cabecalho-principal, #conteiro-unico): É o Rei Imperial. Possui autoridade absoluta e única, suas ordens nunca são questionadas por outros governantes.

Assim como no império, os reis (IDs) sempre prevalecem sobre condes (classes), que por sua vez superam governadores (tags).

📋 Regras de Especificidade:

ID: Peso 100 (o mais poderoso)
Classe: Peso 10 (intermediário)
Tag: Peso 1 (básico)

Exemplo: #cabecalho .titulo { color: red; } tem peso 110 (100 + 10), contra h1 { color: blue; } com peso 1.

5. Exemplos Profissionais

🎯 Exemplo 1: Seletores de Identidade em Ação

Diferentes estratégias para selecionar elementos no DOM com precisão cirúrgica.

/* Seletor de Tag - Amplo e Poderoso */
p {
  color: #4a5568;          /* Cinza profissional */
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

/* Seletor de Classe - Flexível e Reutilizável */
.destaque {
  color: #2563eb;          /* Azul corporativo */
  font-weight: 600;
  text-decoration: underline;
}

.botao-primario {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* Seletor de ID - Único e Soberano */
#cabecalho-principal {
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #f8fafc;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

#logo-marca {
  width: 200px;
  height: auto;
  border-radius: 8px;
}

Sintaxe Importante:

Classes: Ponto (.) seguido pelo nome - .destaque
IDs: Cardinal (#) seguido pelo nome - #cabecalho-principal
Tags: Nome da tag HTML direto - h1, p, div

🎨 Exemplo 2: Paleta de Cores Profissional

Dominando a ciência das cores com formatos avançados e estratégias de branding.

/* Sistema de Cores Corporativo */
h1 {
  color: #1e293b;          /* Azul escuro profissional - Primário */
  background-color: #f8fafc; /* Branco suave - Fundo */
}

.subtitulo {
  color: #475569;          /* Cinza intermediário - Secundário */
  background: #e2e8f0;     /* Cinza claro - Background */
}

.destaque-emocional {
  color: #dc2626;          /* Vermelo vibrante - Ação/Alerta */
  background: #fef2f2;     /* Rosa muito claro */
}

.sucesso {
  color: #16a34a;          /* Verde positivo - Sucesso */
  background: #f0fdf4;     /* Verde muito claro */
}

/* Formatos de Cor Avançados */
.hero-section {
  /* Hexadecimal - Padrão Indústria */
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  color: #ffffff;
}

.card-produto {
  /* RGB - Precisão Numérica */
  background-color: rgb(249, 250, 251);
  border: 1px solid rgb(229, 231, 235);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.botao-destaque {
  /* RGBA - Com Transparência */
  background: rgba(37, 99, 235, 0.9);
  border: 2px solid rgba(37, 99, 235, 1);
  transition: all 0.3s ease;
}

Formatos Profissionais:

Hexadecimal: #FF5733 - Padrão da indústria, 6 dígitos
RGB: rgb(255, 87, 51) - Controle numérico preciso
RGBA: rgba(255, 87, 51, 0.8) - Com transparência
Nomes: blue, red - Para cores básicas

6. Mão na Massa: Projeto Prático

Vamos aplicar os conceitos de seletores e especificidade na criação de uma página de perfil profissional. Segue estes passos com atenção aos detalhes:

🚀 Projeto: Página de Perfil Profissional

Passo 1: Estrutura HTML

Cria um ficheiro perfil.html com a seguinte estrutura:

<!DOCTYPE html>
<html lang="pt-PT">
<head>
    <meta charset="UTF-8">
    <title>Perfil Profissional</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <div id="container">
        <header id="cabecalho">
            <h1>João Silva</h1>
            <h2 class="cargo">Desenvolvedor Frontend</h2>
        </header>
        
        <main>
            <section class="experiencia">
                <h3>Experiência Profissional</h3>
                <p>5 anos de experiência em desenvolvimento web.</p>
                <p class="destaque">Especialista em React e Angular.</p>
            </section>
            
            <section class="habilidades">
                <h3>Habilidades Técnicas</h3>
                <p>HTML5, CSS3, JavaScript, TypeScript</p>
                <p class="destaque">Node.js, MongoDB, Git</p>
            </section>
        </main>
    </div>
</body>
</html>

Passo 2: Aplicação de Estilos com Especificidade

No teu ficheiro estilo.css, aplica os seguintes estilos em ordem crescente de especificidade:

Nível 1 - Tags: Aplica estilos básicos a h1, p, h2, h3
Nível 2 - Classes: Estiliza .cargo, .destaque, .experiencia, .habilidades
Nível 3 - IDs: Personaliza #cabecalho e #container
Desafio Final: Crie um seletor combinado que sobrescreva a cor dos parágrafos dentro da seção habilidades

Passo 3: Teste de Especificidade

Execute este teste para validar o teu conhecimento:

❓ Qual o resultado final da cor do texto "Especialista em React e Angular."?
❓ Se aplicares p { color: purple; } após .destaque { color: orange; }, qual cor prevalece?
❓ Como farias para que o título "Habilidades Técnicas" tenha uma cor diferente dos demais títulos?

💡 Dicas Profissionais:

Organização: Usa comentários no CSS para separar os níveis de especificidade
Consistência: Mantém uma paleta de cores coerente em todo o projeto
Reutilização: Prefere classes sobre IDs para maior flexibilidade
Performance: Evita seletores muito específicos que dificultam a manutenção

7. Verificação de Conhecimento

Testa o teu conhecimento sobre seletores e especificidade CSS. Responde às seguintes perguntas:

Teu Resultado:

Aguardando respostas...

8. Resumo do Domínio dos Seletores

🎯 Fundamentos dos Seletores

Tags: Selecionam elementos por tipo (h1, p, div), peso 1
Classes: Selecionam elementos por atributo class, peso 10, reutilizáveis
IDs: Selecionam elementos por atributo id, peso 100, únicos
Combinadores: Espaço, >, +, ~ para seletores compostos

🏆 Hierarquia de Poder

100 ID #cabecalho

10 Classe .destaque

1 Tag h1

🎨 Sistema de Cores

Hexadecimal: #RRGGBB - Padrão indústria
RGB: rgb(R, G, B) - Controle numérico
RGBA: rgba(R, G, B, A) - Com transparência
Nomes: blue, red, green - Cores básicas

⚡ Práticas Essenciais

Classes são mais flexíveis que IDs
Evite IDs em CSS moderno
Use seletores específicos mas não excessivos
Mantenha uma paleta de cores consistente
Documente seu código com comentários

9. Desafios Elite: Mestre dos Seletores

🔥 Nível Intermediário

Desafio 1: O Camaleão CSS

Cria um elemento HTML que receba duas classes simultaneamente: destaque (fundo amarelo) e texto-grande (fonte 24px). Implementa ambas as classes no CSS e verifica que ambos os estilos são aplicados.

Solução:

<div class="destaque texto-grande">Este elemento tem dois estilos</div>

.destaque {
    background-color: #fef3c7;
    padding: 10px;
}

.texto-grande {
    font-size: 24px;
    font-weight: bold;
}

🔥🔥 Nível Avançado

Desafio 2: Mistério do Hexadecimal

Implementa um sistema de cores completo para um botão com os seguintes estados:

Normal: #3b82f6 (azul)
Hover: #2563eb (azil mais escuro)
Active: #1d4ed8 (azil ainda mais escuro)
Desativado: #9ca3af (cinza)

Usa transições suaves de cor e efeitos de transformação.

.botao-elite {
    background-color: #3b82f6;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translateY(0);
}

.botao-elite:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.botao-elite:active {
    background-color: #1d4ed8;
    transform: translateY(0);
    box-shadow: none;
}

.botao-elite:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

🔥🔥🔥 Nível Expert

Desafio 3: A Batalha da Especificidade

Dadas as seguintes regras CSS, determina qual cor final terá cada elemento:

/* Regra 1 */
div { color: blue; }

/* Regra 2 */  
.conteudo { color: green; }

/* Regra 3 */
#principal .titulo { color: red; }

/* Regra 4 */
.titulo { color: purple; }

/* Regra 5 */
#principal .titulo.destaque { color: orange; }

HTML:

<div id="principal">
    <h2 class="titulo destaque">Título Principal</h2>
    <p class="conteudo">Parágrafo de conteúdo</p>
</div>

❓ Qual será a cor do título e do parágrafo? Porquê?

🔥🔥🔥🔥 Nível Mestre

Desafio 4: Sistema de Design Coerente

Cria um sistema de cores e seletores para uma landing page com os seguintes componentes:

🎨 Paleta de Cores:

Primária: #2563eb (azul) para ações principais
Secundária: #16a34a (verde) para sucesso
Aterta: #dc2626 (vermelho) para erros
Neutra: #6b7280 (cinza) para texto

🏗️ Componentes:

Botão primário (classe .btn-primary)
Card de produto (classe .card)
Badge de destaque (classe .badge-highlight)
Alerta de erro (ID #alert-error)

Implementa estilos com especificidade apropriada e efeitos interativos.

🏆 Bônus: Adiciona um tema escuro com seletores apropriados

📊 Progresso dos Desafios:

Desafio 1: ✅ Completo

Desafio 2: 🔄 Em Progresso

Desafio 3: 🔒 Trancado

Desafio 4: 🔒 Trancado

Aprende Web: CSS