0
@omadson
IntroduçãoCSS - @omadson                2
• Uma folha de estilos é um conjunto de regras que  informa a um programa, responsável pela formatação  de um documento, c...
•     Separar apresentação da estrutura•     Controle absoluto da aparência da página•     Páginas mais leves•     Manuten...
• Lista de regras• Seletor• Folha de estilos                  seletores { declarações; } CSS - @omadson                   ...
• As regras podem estar dentro de um arquivo de texto  com extensão “.css” ou embutidas em um arquivo  HTML.              ...
• As regras podem estar dentro de um arquivo de texto  com extensão “.css” ou embutidas em um arquivo  HTML.        h1 { f...
• As regras podem estar dentro de um arquivo de texto  com extensão “.css” ou embutidas em um arquivo  HTML.        h1 {  ...
• Inline• Tag style• Tag link CSS - @omadson   9
• Inline• Tag style• Tag link        <p style=“color: red;”>...</p> CSS - @omadson                          10
• Inline• Tag style• Tag link        <style>         p{             color: red;         }        </style> CSS - @omadson  ...
• Inline• Tag style• Tag link        <link                  rel=stylesheet                  type=text/css                 ...
• O atributo media.  o all  o print  o screen  o aural  o handheld CSS - @omadson       13
• Os comentários em CSS podem ser da seguinte forma:        /*        comentários        */ CSS - @omadson                ...
• Os estilos “herdam” propriedades de várias maneiras.  Uma das formas é através da própria hierarquia do  HTML.        bo...
class          id• Você também pode definir seus próprios seletores  utilizando os atributos class e id.CSS - @omadson    ...
class        id• Você também pode definir seus próprios seletores  utilizando os atributos class e id.                    ...
class         id• Você também pode definir seus próprios seletores  utilizando os atributos class e id.                   ...
class          id• Você também pode definir seus próprios seletores  utilizando os atributos class e id.CSS - @omadson    ...
class          id• Você também pode definir seus próprios seletores  utilizando os atributos class e id.                  ...
class         id• Você também pode definir seus próprios seletores  utilizando os atributos class e id.                   ...
•     http://goo.gl/Av799•     http://goo.gl/KKCSA•     http://goo.gl/bIpa7•     http://goo.gl/tMu8P•     http://goo.gl/Pw...
• http://omadson.wordpress.com             @omadson• http://yagoacp.wordpress.com             @Yago_A• http://jedersonsecu...
Obrigado!CSS - @omadson               24
Upcoming SlideShare
Loading in...5
×

CSS - introdução - Madson Dias

783

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
783
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "CSS - introdução - Madson Dias"

  1. 1. @omadson
  2. 2. IntroduçãoCSS - @omadson 2
  3. 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. 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. 5. • Lista de regras• Seletor• Folha de estilos seletores { declarações; } CSS - @omadson 5
  6. 6. • As regras podem estar dentro de um arquivo de texto com extensão “.css” ou embutidas em um arquivo HTML. propriedade: valor; CSS - @omadson 6
  7. 7. • As regras podem estar dentro de um arquivo de texto com extensão “.css” ou embutidas em um arquivo HTML. h1 { font-size: 24pt; } h1 { color: blue; } h1 { font-size: 18pt; } CSS - @omadson 7
  8. 8. • As regras podem estar dentro de um arquivo de texto com extensão “.css” ou embutidas em um arquivo HTML. h1 { font-size: 24pt; color: blue; font-size: 18pt; } CSS - @omadson 8
  9. 9. • Inline• Tag style• Tag link CSS - @omadson 9
  10. 10. • Inline• Tag style• Tag link <p style=“color: red;”>...</p> CSS - @omadson 10
  11. 11. • Inline• Tag style• Tag link <style> p{ color: red; } </style> CSS - @omadson 11
  12. 12. • Inline• Tag style• Tag link <link rel=stylesheet type=text/css href=local/arquivo.css > CSS - @omadson 12
  13. 13. • O atributo media. o all o print o screen o aural o handheld CSS - @omadson 13
  14. 14. • Os comentários em CSS podem ser da seguinte forma: /* comentários */ CSS - @omadson 14
  15. 15. • Os estilos “herdam” propriedades de várias maneiras. Uma das formas é através da própria hierarquia do HTML. body { color: red; background-color: blue; } CSS - @omadson 15
  16. 16. class id• Você também pode definir seus próprios seletores utilizando os atributos class e id.CSS - @omadson 16
  17. 17. class id• Você também pode definir seus próprios seletores utilizando os atributos class e id. HTML <p class=p1>...</p>CSS - @omadson 17
  18. 18. class id• Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS .p1 { color: #000; }CSS - @omadson 18
  19. 19. class id• Você também pode definir seus próprios seletores utilizando os atributos class e id.CSS - @omadson 19
  20. 20. class id• Você também pode definir seus próprios seletores utilizando os atributos class e id. HTML <p id=p1>...</p>CSS - @omadson 20
  21. 21. class id• Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS #p1 { color: #000; }CSS - @omadson 21
  22. 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. 23. • http://omadson.wordpress.com @omadson• http://yagoacp.wordpress.com @Yago_A• http://jedersonsecundino.wordpress.com @JedersonS CSS - @omadson 23
  24. 24. Obrigado!CSS - @omadson 24
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×