CSS - introdução - Madson Dias

  • 715 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
715
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
33
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. @omadson
  • 2. IntroduçãoCSS - @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 seletores { declarações; } CSS - @omadson 5
  • 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. • 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. • 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. • Inline• Tag style• Tag link CSS - @omadson 9
  • 10. • Inline• Tag style• Tag link <p style=“color: red;”>...</p> CSS - @omadson 10
  • 11. • Inline• Tag style• Tag link <style> p{ color: red; } </style> CSS - @omadson 11
  • 12. • Inline• Tag style• Tag link <link rel=stylesheet type=text/css href=local/arquivo.css > CSS - @omadson 12
  • 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: /* comentários */ CSS - @omadson 14
  • 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. 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. HTML <p class=p1>...</p>CSS - @omadson 17
  • 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. 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. HTML <p id=p1>...</p>CSS - @omadson 20
  • 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. • 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