Your SlideShare is downloading. ×
  • Like
HTML&CSS 5 - Intermediate CSS (2/2)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML&CSS 5 - Intermediate CSS (2/2)

  • 1,184 views
Published

Slides for my in-house HTML & CSS trainning at SAPO. …

Slides for my in-house HTML & CSS trainning at SAPO.

Intermediate CSS: layout properties (margin, padding, border, width and height), backgrounds and lists.

Published in Technology
  • 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
1,184
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
65
Comments
0
Likes
1

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. HTML 5& CSSDINIS CORREIA 2011 cbn
  • 2. CSS 1 PROPRIEDADES DE LAYOUT 2 BACKGROUNDS 3LISTAS
  • 3. 2 3 LISTASCSS 4 TABELAS ⇪
  • 4. 4 TABELASCSS ⇪na sessão anterior...
  • 5. LINKS
  • 6. link, visited, hover, focus, active
  • 7. PROPRIEDADES DE LAYOUT
  • 8. PROPRIEDADES DE LAYOUT margin padding border width height
  • 9. MARGIN
  • 10. CSS p  {   margin-­‐top:  10px; margin-­‐right:  10px; margin-­‐bottom:  10px; margin-­‐left:  10px;   }
  • 11. CSS p  {   margin:  10px;   }
  • 12. topleft <p> right bottom
  • 13. 1 top4 left <p> right 2 bottom 3
  • 14. CSS p  {  margin-­‐bottom:  10px;  }
  • 15. CSS p  {  margin-­‐bottom:  20px;  }
  • 16. CSS p  {  margin-­‐bottom:  20px;  } 20px
  • 17. Todos os elementos inline - com! excepção do img - ignoram a propiedade margin.
  • 18. CSS p  {  margin-­‐top:  -­‐14px;  }
  • 19. CSS p  {  margin-­‐top:  -­‐14px;  }
  • 20. CSS p  {  margin:  10px  0  20px  0;  }
  • 21. CSS p  {  margin:  10px  0  20px  0;  } 20px
  • 22. CSS p  {  margin:  10px  0  20px  0;  }
  • 23. BORDER
  • 24. CSS p  {   border-­‐width:  1px; border-­‐style:  solid; border-­‐color:  #ff0000; }
  • 25. CSS p  {   border-­‐top-­‐width:  1px; border-­‐top-­‐style:  solid; border-­‐top-­‐color:  #ff0000; border-­‐right-­‐width:  1px; border-­‐right-­‐style:  dotted; border-­‐right-­‐color:  #000; ... }
  • 26. CSS p  {   border:  1px  solid  #000; }
  • 27. CSS p  {   border-­‐width:  1px; border-­‐style:  solid; border-­‐color:  #ff0000; }
  • 28. CSS p  {   border-­‐width:  5px; border-­‐style:  solid; border-­‐color:  #ff0000; }
  • 29. CSS p  {   border-­‐width:  1px; border-­‐style:  solid; border-­‐color:  #ff0000; }
  • 30. CSS p  {   border-­‐width:  1px; border-­‐style:  solid; border-­‐color:  #ff0000; }
  • 31. CSS p  {   border-­‐width:  1px; border-­‐style:  dashed; border-­‐color:  #ff0000; }
  • 32. border-­‐style:  dashed;border-­‐style:  dotted;border-­‐style:  double;border-­‐style:  inset;border-­‐style:  groove;border-­‐style:  outset;border-­‐style:  ridge;border-­‐style:  solid;
  • 33. PADDING
  • 34. CSS p  {   padding-­‐top:  10px; padding-­‐right:  10px;   padding-­‐bottom:  10px; padding-­‐left:  10px; }
  • 35. CSS p  {   padding:  10px; }
  • 36. CSS p  {  padding:  10px;  } z
  • 37. CSS p  {  padding:  10px;  } z 10px
  • 38. DIMENSÕESwidth    height
  • 39. ! Os elementos inline ignoram width  e  height...
  • 40. ! Os elementos inline ignoram width  e  height... exepto as imagens.
  • 41. CSS p  {  width:  160px;  }
  • 42. CSS p  {  width:  160px;  }
  • 43. ! Definir alturas só quando estritamente necessário.
  • 44. CSS p  {   width:  160px; height:  auto;   }
  • 45. CSS p  {   width:  160px; height:  20px;   }
  • 46. CSS div  {   min-­‐width:  200px; min-­‐height:  500px; }
  • 47. CSS div  {   min-­‐width:  200px; min-­‐height:  500px; max-­‐width:  980px; max-­‐height:  800px; }
  • 48. DIMENSÕES overflow
  • 49. CSS p  {  overflow:  visible;  } p  {  overflow:  hidden;  } p  {  overflow:  auto;  } p  {  overflow:  scroll;  }
  • 50. CSS p  {  overflow:  visible;  }
  • 51. CSS p  {  overflow:  hidden;  }
  • 52. CSS p  {  overflow:  auto;  }
  • 53. CSS p  {  overflow:  auto;  }
  • 54. UNIDADES
  • 55. ABSOLUTAS px width:  800px;RELATIVAS em width:  20em; % width:  40%;
  • 56. CSS p  {  width:  120px;  }
  • 57. CSS p  {   font-­‐size:  20px; width:  3em; }
  • 58. CSS p  {   font-­‐size:  20px; width:  3em; } 20px  x  3  =  60px
  • 59. BOX MODEL
  • 60. Conteúdo deum elemento
  • 61. MARGIN BORDER PADDING Conteúdo de um elemento
  • 62. MARGIN BORDER PADDING WIDTH Conteúdo de HEIGHT um elemento BOX
  • 63. CSS p  {   width:  120px; border:  2px  dotted  #000; padding:  3px; margin:  10px; } ?
  • 64. CSS p  {   width:  120px; border:  2px  dotted  #000; padding:  3px; margin:  10px; } 150px
  • 65. DISPLAY
  • 66. http://bit.ly/html_elements
  • 67. CSS p  {  display:  block;  } p  {  display:  inline;  } p  {  display:  none;  }
  • 68. CSS p  {   display:  inline; }
  • 69. BACKGROUND
  • 70. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(image.gif); background-­‐attachment:  scroll; background-­‐repeat:  no-­‐repeat; background-­‐position:  0  0; }
  • 71. CSS body  {   background-­‐color:  #ccc; }
  • 72. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); }
  • 73. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  no-­‐repeat; }
  • 74. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  repeat-­‐y; }
  • 75. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  repeat-­‐x; }
  • 76. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  repeat-­‐x; background-­‐attachament:  scroll; }
  • 77. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  repeat-­‐x; background-­‐attachament:  scroll; }
  • 78. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  repeat-­‐x; background-­‐attachament:  fixed; }
  • 79. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  no-­‐repeat; background-­‐attachament:  fixed; background-­‐position:  0  0; }
  • 80. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  no-­‐repeat; background-­‐attachament:  fixed; background-­‐position:  0  40px; }
  • 81. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  no-­‐repeat; background-­‐attachament:  fixed; background-­‐position:  40px  0; }
  • 82. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  no-­‐repeat; background-­‐attachament:  fixed; background-­‐position:  left  top; }
  • 83. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  no-­‐repeat; background-­‐attachament:  fixed; background-­‐position:  right  top; }
  • 84. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  no-­‐repeat; background-­‐attachament:  fixed; background-­‐position:  center  top; }
  • 85. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  no-­‐repeat; background-­‐attachament:  fixed; background-­‐position:  20%  0; }
  • 86. CSS body  {   background-­‐color:  #ccc; background-­‐image:  url(paper_green.jpg); background-­‐repeat:  no-­‐repeat; background-­‐attachament:  fixed; background-­‐position:  50%  0; }
  • 87. CSS body  {  background:  #ccc  url(fundo.gif)  no-­‐repeat  scroll  left  top  } -color -attachment -image -repeat -position
  • 88. LISTAS
  • 89. list-­‐style-­‐type
  • 90. list-­‐style-­‐type:  disc; list-­‐style-­‐type:  square; list-­‐style-­‐type:  circle; list-­‐style-­‐type:  none; list-­‐style-­‐type:  decimal;list-­‐style-­‐type:  decimal-­‐leading-­‐zero; list-­‐style-­‐type:  lower-­‐alpha; list-­‐style-­‐type:  upper-­‐alpha; list-­‐style-­‐type:  upper-­‐roman; list-­‐style-­‐type:  lower-­‐roman;
  • 91. ? list-­‐style-­‐image
  • 92. CSS ul  {   list-­‐style-­‐type:  none; } ul  li  { padding:  0  0  0  20px; background:  url(bullet.gif)  no-­‐repeat  0  2px; }
  • 93. CSS ul  {   list-­‐style-­‐type:  disc; }
  • 94. CSS ul  {   list-­‐style-­‐type:  disc; margin:  0; padding:  0; }
  • 95. CSS ul  {   list-­‐style-­‐type:  disc; margin:  0; padding:  0; } ul  li  { margin-­‐left:  20px; }