CSS

1. Responsividade

1.1. Media Queries: Ferramenta para aplicar diferentes estilos dependendo das características da tela (largura, altura, orientação, etc.).

1.1.1. Exemplo: @media (max-width: 600px) { ... }

2. Transições e Animações

2.1. Animações: Movimentos ou transformações que mudam o estilo de um elemento ao longo do tempo.

2.1.1. Exemplo: @keyframes, animation

2.2. Transições: Efeitos suaves entre estados de um elemento.

2.2.1. Exemplo: transition: all 0.3s ease;

3. Comentários

3.1. Sintaxe: /* Comentário aqui */

3.2. Uso: Ajudam na documentação do código ou desativação temporária de partes do código.

4. O que é CSS?

4.1. Definição: CSS (Cascading Style Sheets) é uma linguagem usada para estilizar e controlar a aparência de elementos HTML em uma página web.

4.2. Função principal: Definir estilos como cores, fontes, layout, espaçamento, etc.

5. Seletores

5.1. Seletores de Elementos: Seleciona tags HTML (ex: h1, p).

5.2. Seletores de Classes: Seletor baseado na classe (ex: .minha-classe)

5.3. Seletores de IDs: Seletor baseado no ID (ex: #meu-id).

5.4. Seletores de Atributos: Seleciona elementos baseados nos atributos (ex: [type="text"]).

5.5. Seletores Combinados: Combina vários seletores (ex: .menu li).

6. Propriedades de Estilo

6.1. Cores: color, background-color, border-color.

6.2. Fontes: font-family, font-size, font-weight, line-height.

6.3. Espaçamento: margin, padding.

6.4. Tamanho e Layout: width, height, max-width, min-height.

6.5. Borda: border, border-radius, border-width.

6.6. Sombreamento e Sombras: box-shadow, text-shadow.

6.7. Posicionamento: position, top, left, right, bottom, z-index.

6.8. Exibição: display, visibility, float, clear.

7. Modelo de Caixa (Box Model)

7.1. Content: Área onde o conteúdo do elemento é exibido.

7.2. Padding: Espaço entre o conteúdo e a borda do elemento.

7.3. Border: Borda ao redor do padding (opcional).

7.4. Margin: Espaço externo entre o elemento e outros elementos.

8. Layouts

8.1. Flexbox: Sistema de layout que facilita a criação de layouts flexíveis e responsivos

8.1.1. Propriedades principais: display: flex, justify-content, align-items, flex-direction, flex-wrap.

8.2. Grid: Sistema de layout baseado em uma grade

8.2.1. Propriedades principais: display: grid, grid-template-columns, grid-template-rows, grid-gap.