CSS

667 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
667
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. Unifesp - Cursos de Verão 2010Luiz GustavoSoares@luizgrs
  2. 2. CSS?SintaxeSeletoresPropriedadesBox ModelDemoFuturoCuriosidadesReferências
  3. 3. Cascading Style SheetsApresentaçãoXHTML
  4. 4. <link><style>style=“”
  5. 5. Regrasseletor{propriedade1: valor1;propriedade2: valor2;propriedade3: valor3;}
  6. 6. Descrição do alvo;Quais tags estilizar;
  7. 7. O que e como mudar; borda fonte preenchimento posição ...
  8. 8. Qualquer elemento;* { ... }
  9. 9. Um tipo de tag específica;a { ... }table { ... }
  10. 10. Elemento específico; Baseado no atributo ID;#header { ... }#menu { ... }
  11. 11. Elementos específicos; Baseado no atributo class;.botao { ... }.foto { ... }
  12. 12. Elementos “dentro” de outros;table a { ... }div .foto { ... }#header img { ... }
  13. 13. Elementos filhos;table > a { ... }div > .foto { ... }#header > img { ... }
  14. 14. Elementos que estão “ao lado” de outros;table + a { ... }div + .foto { ... }#header + img { ... }
  15. 15. Elementos que contêm o atributoa[href] { ... }.foto > a[target] { ... }body select[multiple]{ ... }
  16. 16. Elementos que contêm o atributo com o valor específicoa[target=“_blank”] { ... }#cadastro input[type=“text”] { ... }img[alt=“Help”] { ... }
  17. 17. :focus Ativado quando elemento recebe foco:hover Ativado quando mouse está em cima do elemento:first-child Ativado quando elemento é o primeiro filho de seu pai
  18. 18. #menu a:hover { … }input[type=text]:focus { … }td:first-child { … }
  19. 19. img, a[target=“_blank”] { ... }.foto, .peixe, #cadastro input[type=“text”] { ...}table, thead, img[alt=“Help”] { ... }
  20. 20. Valores pré-definidos, keywordURLs url(‘http://…’)NúmeroUnidades em px in cm mm
  21. 21. Cores nome rgb(x, y, z) #rrggbb #rgb
  22. 22. color: #cortext-align: center | right | left | justifytext-decoration: none | underline | overlineline-through | blinktext-indent: unidade;
  23. 23. font-family: “fonte 1”, fonte2, fonte3font-style: normal | italic | obliquefont-size: unidade;font-variant: small-caps | normalfont-weight: normal | bold | 100 | … | 900;
  24. 24. font: [font-style] [font-variant] [font-weight]font-size/[line-height] font-family
  25. 25. list-style-type: none | disc | circle | squaredecimal | lower-alpha |upper-alpha | lower-roman |upper-romanlist-style-image: url()list-style-position: inside | outside
  26. 26. list-style: [type] [position] [image]
  27. 27. background-color: #corbackground-image: url()background-repeat: repeat | no-repeat |repeat-x | repeat-ybackground-attachment: scroll | fixedbackground-position: top left | top center | topright | center left | center center | center right |bottom left | bottom center | bottom right | x% y% |
  28. 28. background: [background-color][background-image] [background-repeat][background-attachment] [background-position]
  29. 29. Fonte
  30. 30. width: unidadeheight: unidademax-height: unidademin-height: unidademax-width: unidademin-width: unidade
  31. 31. padding-top: unidadepadding-right: unidadepadding-bottom: unidadepadding-left: unidade
  32. 32. padding: unidadepadding: unidade unidadepadding: unidade unidade unidadepadding: unidade unidade unidadeunidade
  33. 33. border-left-style: none | dotted | dashed |solid | double | groove | ridge | inset |outsetborder-left-color: #cor;border-left-width: unidade;
  34. 34. border-style: tipoborder-style: tipo tipoborder-style: tipo tipo tipoborder-style: tipo tipo tipo tipo
  35. 35. border-color: #corborder-color: #cor #corborder-color: #cor #cor #corborder-color: #cor #cor #cor #cor
  36. 36. border-width: unidadeborder-width: unidade unidadeborder-width: unidade unidade unidadeborder-width: unidade unidade unidadeunidade
  37. 37. border: [width] [style] [color]border-top: [width] [style] [color]border-right: [width] [style] [color]border-bottom: [width] [style] [color]border-left: [width] [style] [color]
  38. 38. margin-top: unidademargin-right: unidademargin-bottom: unidademargin-left: unidade
  39. 39. margin: unidademargin: unidade unidademargin: unidade unidade unidademargin: unidade unidade unidade unidade
  40. 40. position: fixed | static | relative | absoluteleft: unidadetop: unidadebottom: unidaderight: unidadez-index: numero
  41. 41. float: left | right | noneclear: none | left | right | both
  42. 42. DEMO
  43. 43. :nth-child, :last-child, :only-child, :empty,AnimaçõesMúltiplos BackgroundsMúltiplas BordasRGBAFont FaceBordas ArredondadasSombras
  44. 44. Homer Simpson CSSJogo em CSSCSS Animation AT-AT
  45. 45. http://www.w3.orghttp://www.w3schools.com/http://www.maujor.comhttp://www.css3.infohttp://delicious.com/luizgrs
  46. 46. http://www.w3.orghttp://www.w3schools.com/http://www.maujor.comhttp://www.css3.infohttp://delicious.com/luizgrs
  47. 47. Luiz GustavoSoares@luizgrshttp://luizsoares.netluiz@luizsoares.

×