2. TÓPICOS
1. O que é CSS?
2. Sintaxe
3. Seletores
4. Box Model
5. Valores e unidades
6. Boas práticas
7. Nomenclatura BEM
8. Debugando CSS
9. Atividades
10. PIXELS x REM
"Pixel é uma medida fixa"
.exemplo-pixels {
font-size: 18px;
}
"Rem é uma medida dinâmica"
body {
font-size: 12px;
}
.exemplo-rem {
font-size: 1.5rem;
}
11. View Width (VW) x View Height (VH)
VH = 1/100 da altura do navegador.
exemplo: para um navegador de 900px, 1vh = 9px
VW = 1/100 da largura do navegador.
exemplo: para um navegador de 900px, 1vw = 9px
12. RGBA x HEX
rgba(255, 255, 255, 0.5)
red green blue alpha
#FF0000
red green blue{
{
{
13. BOAS PRÁTICAS
● Usar nomes semânticos
● Sempre prefira classes
● Não use !important
● Não usar o nome da cor por extenso, sempre prefira RGBA
● Z-index: somente valores entre 0 e 20
● Floats: não use!
14. NOMENCLATURA DO BEM
Elemento que faz parte do
bloco
Usado para sinalizar um
Estado ou comportamento
Bloco independente