CSS

Transcript

1. 1 1 rohersmoura@gmail.com danielrohers Daniel Röhers Moura Software Engineer @ HandsOn.TV
2. + < font > </ font > 2
4. CSS Cascading Style Sheet 4
5. O que é? “O Cascading Style Sheets (CSS) é uma linguagem utilizada para definir a apresentação (aparência) de d o c u m e n t o s q u e a d o t a m p a r a o s e u desenvolvimento linguagens de marcação (como XML, HTML e XHTML e etc..).” http://tableless.github.io/iniciantes/manual/css 5
6. Algumas vantagens… • Separação HTML -> Estilo • Reaproveitamento de estilo (código) • Animações e muito mais 6
7. Onde se aplica • Tags HTML • ID’s • Classes 7
8. #id vs .class 8 http://goo.gl/TIxYkP
9. Class “As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a vários elementos de uma vez.” 9
10. ID 10 “As ids são uma forma de identificar um elemento, e devem ser únicas.”
11. Sintaxe seletor { propriedade: valor; } 11
12. Mas como iniciar? 12
13. index.html style.css Exemplo básico 13
14. Efeito cascata / prioridade index.html style.css 14
15. Agrupamento de seletores 15
16. Seletor Classe/ID 16
17. Comentário 17
18. Como funciona? 18
19. http://goo.gl/Ea5fcD 19
20. MAUJOR O dinossauro das CSS http://www.maujor.com 20
21. http://css-tricks.com 21
22. http://www.w3schools.com 22
23. http://css-weekly.com 23
24. 24 Media Queries
25. 25 BEM Block Element Modifier https://goo.gl/lrNsnE http://getbem.com .block .block__element .block__element—modifier
27. Frameworks “Framework é um conjunto de componentes que provêm uma estrutura básica de elementos reutilizáveis, tendo uma arquitetura consistente de funcionalidade genérica sob a qual a aplicação será construída.” http://tableless.com.br/quando-utilizar-ou-nao-frameworks-css 27
28. Vamos codar? Não… Prototipar ;) 28
29. https://wireframe.cc 29
30. Protótipo pronto = codar 30