Exercícios 08 - Estilização e Escopo de CSS 🎨

🟢 Básicos

1. Escopo: O que significa dizer que o CSS no Svelte é "escopado" por padrão?
2. Global: Como você define uma regra CSS dentro de um componente para que ela afete elementos em toda a aplicação?

🟡 Intermediários

1. Classes Condicionais: Escreva a sintaxe da diretiva class: para aplicar a classe ativo apenas se a variável estaLigado for verdadeira.
2. Variáveis CSS: Como você passaria o valor de uma variável JavaScript para uma propriedade CSS (ex: background-color) de forma que ela mude dinamicamente?

🔴 Desafio

1. Card de Tema Dinâmico:
   • Crie um componente CardNoticia.svelte.
   • Adicione uma prop chamada urgente (booleano).
   • No <style>, crie uma classe .perigo com fundo vermelho e texto branco.
   • Use a diretiva class:perigo para que o card mude de aparência se a prop urgente for verdadeira.
   • Adicione uma animação de "piscar" (keyframes) que também só seja ativada caso a notícia seja urgente.
   • Como o Svelte lida com seletores de ID (ex: #meu-id) em comparação com seletores de classe? O escopo funciona da mesma forma?

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Classes Condicionais
function solucaoExercicio() {
    console.log("Executando validação de: Estilização e Escopo de CSS");
    return true;
}

solucaoExercicio();

// Solução de referência para: Variáveis CSS
function solucaoExercicio() {
    console.log("Executando validação de: Estilização e Escopo de CSS");
    return true;
}

solucaoExercicio();