CSS
- 1. CSS Carlos Schallenberger e Tatiane Nogueira Aceleradora Ágil
- 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
- 3. HTML CSS
- 5. SINTAXE
- 6. SELETORES SIMPLES: TAG, CLASS & ID
- 8. BOX MODEL
- 9. PIXELS x PORCENTAGEM % 40%400px
- 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
- 16. DEBUGANDO CSS
- 17. DÚVIDAS?
- 18. OBRIGADO Dúvidas ou sugestões: Carlos Schallenberger e Tatiane Nogueira cschallen@thoughtworks.com e tnogueir@thoughtworks.com
- 19. ATIVIDADES