CSS3

📚 Conteúdo Educacional

Domine CSS3 - Iniciante

O Que é CSS?

Definição

CSS (Cascading Style Sheets) é uma linguagem de estilo usada para:

Estilizar páginas web
Controlar layout e apresentação
Criar designs responsivos
Adicionar efeitos visuais

Sintaxe Básica
seletor {
propriedade: valor;
/* Exemplo: */
color: blue;
margin: 10px;
}

Componentes Principais:

Seletores - Elementos HTML a serem estilizados
Propriedades - Características a modificar (cor, tamanho, etc)
Valores - Configurações específicas para cada propriedade

HTML vs CSS - Papéis

HTML

Estrutura e conteúdo
Semântica da página
Esqueleto do site
Tags: <h1>, <p>, <div>

CSS

Estilo e apresentação
Layout e design visual
Pele e roupagem do site
Propriedades: color, margin, font-size

Analogia: Se HTML é a casa (paredes, portas), CSS é a decoração (cores, móveis, layout)

Conceitos-Chave

/* Cascata */
p {
color: red; /* Sobrescrito */
color: blue; /* Aplicado */
}

/* Especificidade */
#id-exemplo { /* 100 pontos */
color: green;
}
.classe-exemplo { /* 10 pontos */
color: yellow;
}

Princípios Importantes:

Cascata: Ordem de aplicação dos estilos
Especificidade: Prioridade entre seletores
Herança: Propriedades passadas para elementos filhos
Responsividade: Adaptação a diferentes telas

Guia Completo de Propriedades CSS

📦 Modelo de Caixa

.elemento {
    width: 300px;       /* Largura total */
    height: 150px;      /* Altura definida */
    padding: 20px;      /* Espaço interno */
    border: 2px solid #333; /* Borda sólida */
    margin: 15px;       /* Espaço externo */
    box-sizing: border-box; /* Modelo alternativo */
}

Dica: Use box-sizing: border-box para cálculos dimensionais mais intuitivos

🎛️ Layout Moderno

Flexbox

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Espaço entre itens */
}

CSS Grid

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
    align-content: start;
    grid-gap: 20px;
}

📍 Posicionamento

.elemento {
    position: relative; /* Fluxo normal */
    top: 10px;
    z-index: 10; /* Camada de sobreposição */

    /* Alternativas: 
    absolute (relativo ao parente posicionado)
    fixed (relativo à viewport)
    sticky (híbrido) */
}

Use position: sticky para headers fixos e elementos persistentes

🔠 Tipografia Avançada

.texto {
    font-weight: 600; /* Espessura (100-900) */
    font-style: italic;
    text-decoration: underline wavy #e74c3c;
    text-transform: capitalize;
    line-height: 1.6;
    letter-spacing: 0.5px;
}

.sombra {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

🎭 Efeitos & Transições

.botao {
    transition: all 0.3s ease-in-out;
    transform: scale(1);
    opacity: 0.9;
    cursor: pointer;
}

.botao:hover {
    transform: scale(1.05);
    opacity: 1;
    filter: brightness(1.1);
}

Combine transition com transform para animações performáticas

📱 Responsividade

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 10px;
    }
    
    .texto {
        font-size: clamp(1rem, 4vw, 1.2rem);
    }
}

Use unidades relativas (vw, %) e clamp() para tipografia responsiva

🎨 Variáveis CSS

:root {
    --cor-primaria: #3498db;
    --espacamento: 1rem;
    --sombra: 0 2px 8px rgba(0,0,0,0.1);
}

.elemento {
    color: var(--cor-primaria);
    padding: calc(var(--espacamento) * 2);
    box-shadow: var(--sombra);
}

Boas Práticas CSS

Organização

/* Stylesheet organizada */
/* 1. Reset/Normalize */
/* 2. Variáveis */
/* 3. Estilos globais */
/* 4. Componentes */
/* 5. Media Queries */

Performance

Minificar código em produção
Usar seletores simples
Evitar !important
Utilizar sprites para ícones

Dica Profissional: Use metodologias como BEM para nomes de classes

🎬 Playlist CSS3

Conteúdo produzido e distribuído pelo Prof. Gustavo Guanabara
Direitos autorais © 2013-2023 Curso em Vídeo
Esta apresentação contém trechos da playlist oficial disponível em Curso de CSS3 - Curso em Vídeo