# CSS: Estilizando a Web
## Introdução
CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de estilização
usada para descrever a apresentação de um documento escrito em HTML ou XML. Criada
inicialmente por Håkon Wium Lie em 1994, CSS revolucionou a forma como os websites são
projetados e apresentados.
## Conceitos Fundamentais
### O que é CSS?
- Linguagem para estilizar elementos em páginas web
- Separa o design do conteúdo HTML
- Controla layout, cores, fontes, espaçamentos e efeitos visuais
## Sintaxe Básica
```css
/* Seletor { propriedade: valor; } */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.classe-exemplo {
color: blue;
font-size: 16px;
text-align: center;
}
#id-especi co {
border: 2px solid red;
padding: 10px;
}
```
## Seletores Principais
1. **Seletores de Elemento**
```css
p { color: green; }
```
2. **Seletores de Classe**
```css
.destaque { font-weight: bold; }
```
3. **Seletores de ID**
```css
#cabecalho { background-color: navy; }
```
4. **Seletores Combinados**
```css
div p { margin-bottom: 10px; }
```
## Propriedades Fundamentais
### Layout
- `display`: De ne o tipo de exibição (block, inline, ex, grid)
fi
fi
fl
- `position`: Controla o posicionamento dos elementos
- ` ex`: Sistema de layout exível
- `grid`: Sistema de layout em grade
### Estilização
- `color`: Cor do texto
- `background-color`: Cor de fundo
- `font-family`: Família da fonte
- `font-size`: Tamanho da fonte
- `margin`: Margem externa
- `padding`: Preenchimento interno
- `border`: Borda do elemento
## Exemplo de Layout Responsivo
```css
/* Layout Responsivo */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 0 10px;
}
}
```
## Metodologias e Boas Práticas
### Metodologias de Organização
- **BEM (Block Element Modi er)**
- **SMACSS (Scalable and Modular Architecture for CSS)**
- **OOCSS (Object-Oriented CSS)**
### Boas Práticas
- Usar classes reutilizáveis
- Manter código organizado
- Evitar repetições
- Utilizar pré-processadores (Sass, Less)
## Pré-processadores
### Sass (SCSS)
```scss
// Exemplo de variáveis e aninhamento
$cor-principal: #3498db;
.botao {
background-color: $cor-principal;
&:hover {
background-color: darken($cor-principal, 10%);
}
}
```
## Frameworks CSS Populares
1. **Bootstrap**
2. **Tailwind CSS**
fl
fl
fi
3. **Bulma**
4. **Foundation**
## Recursos Modernos
### Flexbox
```css
.container- ex {
display: ex;
justify-content: space-between;
align-items: center;
}
```
### Grid Layout
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
```
## Animações e Transições
```css
.elemento {
transition: all 0.3s ease;
&:hover {
transform: scale(1.1);
}
}
```
## Compatibilidade e Navegadores
- Pre xos de navegadores
- Veri cação de suporte
- Uso de ferramentas de compatibilidade
## Ferramentas de Desenvolvimento
- Inspecionar elemento do navegador
- DevTools
- Validadores CSS
- Compiladores online
## Tendências Atuais
- Design responsivo
- Modo escuro
- Micro-interações
- Acessibilidade
## Aprendizado e Recursos
- MDN Web Docs
- CSS-Tricks
- Documentações o ciais
- Cursos online
- Comunidades de desenvolvimento
## Conclusão
CSS é essencial para criar websites modernos, responsivos e visualmente atrativos. Dominar
CSS permite criar interfaces de usuário so sticadas e adaptáveis a diferentes dispositivos.
fi
fi
fl
fl
fi
fi