CSS - introdução

Transcript

1. @omadson
2. Introdução CSS - @omadson 2
3. • Uma folha de estilos é um conjunto de regras que informa a um programa, responsável pela formatação de um documento, como organizar a página, como posicionar e expor o texto e, dependendo de onde é aplicada, como organizar uma coleção de documentos. CSS - @omadson 3
4. • Separar apresentação da estrutura • Controle absoluto da aparência da página • Páginas mais leves • Manutenção de um grande site CSS - @omadson 4
5. • Lista de regras • Seletor • Folha de estilos CSS - @omadson 5 seletores { declarações; }
6. • As regras podem estar dentro de um arquivo de texto com extensão “.css” ou embutidas em um arquivo HTML. CSS - @omadson 6 propriedade: valor;
7. • As regras podem estar dentro de um arquivo de texto com extensão “.css” ou embutidas em um arquivo HTML. CSS - @omadson 7 h1 { font-size: 24pt; } h1 { color: blue; } h1 { font-size: 18pt; }
8. • As regras podem estar dentro de um arquivo de texto com extensão “.css” ou embutidas em um arquivo HTML. CSS - @omadson 8 h1 { font-size: 24pt; color: blue; font-size: 18pt; }
9. • Inline • Tag style • Tag link CSS - @omadson 9
10. • Inline • Tag style • Tag link CSS - @omadson 10 <p style=“color: red;”>...</p>
11. • Inline • Tag style • Tag link CSS - @omadson 11 <style> p { color: red; } </style>
12. • Inline • Tag style • Tag link CSS - @omadson 12 <link rel=stylesheet type=text/css href=local/arquivo.css >
13. • O atributo media. o all o print o screen o aural o handheld CSS - @omadson 13
14. • Os comentários em CSS podem ser da seguinte forma: CSS - @omadson 14 /* comentários */
15. • Os estilos “herdam” propriedades de várias maneiras. Uma das formas é através da própria hierarquia do HTML. CSS - @omadson 15 body { color: red; background-color: blue; }
16. class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 16
17. class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 17 HTML <p class=p1>...</p>
18. class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 18 CSS .p1 { color: #000; }
19. class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 19
20. class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 20 HTML <p id=p1>...</p>
21. class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 21 CSS #p1 { color: #000; }
22. • http://goo.gl/Av799 • http://goo.gl/KKCSA • http://goo.gl/bIpa7 • http://goo.gl/tMu8P • http://goo.gl/Pw1h • http://goo.gl/kqIf • http://goo.gl/5aVWN • http://goo.gl/QvWMN CSS - @omadson 22
23. • http://omadson.wordpress.com @omadson • http://yagoacp.wordpress.com @Yago_A • http://jedersonsecundino.wordpress.com @JedersonS CSS - @omadson 23
24. Obrigado! CSS - @omadson 24