Como Estilizar Elementos
- Inline: Aplica estilos diretamente nos elementos HTML. Exemplo:
<p style="color: red;">Texto vermelho</p>.
- Internal: Utiliza um bloco
<style> dentro do <head> do documento. Ideal para estilos específicos de uma página.
- External: Emprega arquivos CSS externos, recomendado para promover a reutilização e manter a separação entre conteúdo e apresentação. Exemplo:
<link rel="stylesheet" href="styles.css">.
Seletores e Propriedades
- Seletores Básicos: Elemento, ID, e Classe.
- Propriedades Comuns:
color, font-size, background, margin, e padding.
Box Model
- Inclui
margin, border, padding, e content.
- Fundamental para o controle do layout e espaçamento dos elementos.
Layouts com Flexbox e Grid
- Flexbox: Modelo de layout unidimensional para alinhamento, espaço e ordem dos elementos.
- Grid: Sistema de layout bidimensional para manipular linhas e colunas, ideal para estruturas complexas.
Animações e Transições
- Animações: Usam
@keyframes e animation para criar efeitos visuais dinâmicos.
- Transições: Suavizam mudanças de propriedades CSS, ativadas em resposta a ações como hover.
Variáveis CSS (Custom Properties)
- Permitem armazenar e reutilizar valores, facilitando a manutenção e promovendo consistência.
Técnicas de Posicionamento
position: relative; — Posiciona o elemento em relação à sua posição normal.