HTML                 5& CSSDINIS CORREIA 2011              cbn
CSS     1      PROPRIEDADES        DE LAYOUT        2      BACKGROUNDS        3LISTAS
2      3      LISTASCSS      4      TABELAS      ⇪
4                        TABELASCSS                        ⇪na sessão anterior...
LINKS
link, visited, hover, focus, active
PROPRIEDADES  DE LAYOUT
PROPRIEDADES  DE LAYOUT    margin   padding    border     width    height
MARGIN
CSS      p	  {	             margin-­‐top:	  10px;           margin-­‐right:	  10px;           margin-­‐bottom:	  10px;    ...
CSS      p	  {	             margin:	  10px;	        }
topleft    <p>     right       bottom
1          top4 left    <p>     right   2         bottom            3
CSS      p	  {	  margin-­‐bottom:	  10px;	  }
CSS      p	  {	  margin-­‐bottom:	  20px;	  }
CSS      p	  {	  margin-­‐bottom:	  20px;	  }                                    20px
Todos os elementos inline - com!   excepção do img - ignoram a    propiedade margin.
CSS      p	  {	  margin-­‐top:	  -­‐14px;	  }
CSS      p	  {	  margin-­‐top:	  -­‐14px;	  }
CSS      p	  {	  margin:	  10px	  0	  20px	  0;	  }
CSS      p	  {	  margin:	  10px	  0	  20px	  0;	  }                                          20px
CSS      p	  {	  margin:	  10px	  0	  20px	  0;	  }
BORDER
CSS      p	  {	             border-­‐width:	  1px;           border-­‐style:	  solid;           border-­‐color:	  #ff0000;...
CSS      p	  {	             border-­‐top-­‐width:	  1px;           border-­‐top-­‐style:	  solid;           border-­‐top-­...
CSS      p	  {	             border:	  1px	  solid	  #000;      }
CSS      p	  {	             border-­‐width:	  1px;           border-­‐style:	  solid;           border-­‐color:	  #ff0000;...
CSS      p	  {	             border-­‐width:	  5px;           border-­‐style:	  solid;           border-­‐color:	  #ff0000;...
CSS      p	  {	             border-­‐width:	  1px;           border-­‐style:	  solid;           border-­‐color:	  #ff0000;...
CSS      p	  {	             border-­‐width:	  1px;           border-­‐style:	  solid;           border-­‐color:	  #ff0000;...
CSS      p	  {	             border-­‐width:	  1px;           border-­‐style:	  dashed;           border-­‐color:	  #ff0000...
border-­‐style:	  dashed;border-­‐style:	  dotted;border-­‐style:	  double;border-­‐style:	  inset;border-­‐style:	  groov...
PADDING
CSS      p	  {	             padding-­‐top:	  10px;           padding-­‐right:	  10px;	             padding-­‐bottom:	  10p...
CSS      p	  {	             padding:	  10px;      }
CSS      p	  {	  padding:	  10px;	  }                     z
CSS      p	  {	  padding:	  10px;	  }                     z                         10px
DIMENSÕESwidth	  	  height
!   Os elementos inline ignoram    width	  e	  height...
!   Os elementos inline ignoram    width	  e	  height... exepto as    imagens.
CSS      p	  {	  width:	  160px;	  }
CSS      p	  {	  width:	  160px;	  }
!   Definir alturas só quando    estritamente necessário.
CSS      p	  {	             width:	  160px;           height:	  auto;	        }
CSS      p	  {	             width:	  160px;           height:	  20px;	        }
CSS      div	  {	          min-­‐width:	  200px;        min-­‐height:	  500px;      }
CSS      div	  {	          min-­‐width:	  200px;        min-­‐height:	  500px;        max-­‐width:	  980px;        max-­‐h...
DIMENSÕES  overflow
CSS      p	  {	  overflow:	  visible;	  }      p	  {	  overflow:	  hidden;	  }      p	  {	  overflow:	  auto;	  }      p	 ...
CSS      p	  {	  overflow:	  visible;	  }
CSS      p	  {	  overflow:	  hidden;	  }
CSS      p	  {	  overflow:	  auto;	  }
CSS      p	  {	  overflow:	  auto;	  }
UNIDADES
ABSOLUTAS       px   width:	  800px;RELATIVAS       em   width:	  20em;        %   width:	  40%;
CSS      p	  {	  width:	  120px;	  }
CSS      p	  {	             font-­‐size:	  20px;           width:	  3em;      }
CSS      p	  {	             font-­‐size:	  20px;           width:	  3em;      }                20px	  x	  3	  =	  60px
BOX MODEL
Conteúdo deum elemento
MARGIN  BORDER     PADDING               Conteúdo de               um elemento
MARGIN  BORDER     PADDING                  WIDTH                     Conteúdo de         HEIGHT                     um el...
CSS      p	  {	              width:	  120px;            border:	  2px	  dotted	  #000;            padding:	  3px;         ...
CSS      p	  {	              width:	  120px;            border:	  2px	  dotted	  #000;            padding:	  3px;         ...
DISPLAY
http://bit.ly/html_elements
CSS      p	  {	  display:	  block;	  }      p	  {	  display:	  inline;	  }      p	  {	  display:	  none;	  }
CSS      p	  {	             display:	  inline;      }
BACKGROUND
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(image.gif);         background-...
CSS      body	  {	           background-­‐color:	  #ccc;      }
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);      }
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS      body	  {	           background-­‐color:	  #ccc;         background-­‐image:	  url(paper_green.jpg);         backg...
CSS  body	  {	  background:	  #ccc	  url(fundo.gif)	  no-­‐repeat	  scroll	  left	  top	  }                            -co...
LISTAS
list-­‐style-­‐type
list-­‐style-­‐type:	  disc;         list-­‐style-­‐type:	  square;         list-­‐style-­‐type:	  circle;          list-­...
?   list-­‐style-­‐image
CSS      ul	  {	               list-­‐style-­‐type:	  none;      }      ul	  li	  {             padding:	  0	  0	  0	  20p...
CSS      ul	  {	               list-­‐style-­‐type:	  disc;      }
CSS      ul	  {	               list-­‐style-­‐type:	  disc;             margin:	  0;             padding:	  0;      }
CSS      ul	  {	               list-­‐style-­‐type:	  disc;             margin:	  0;             padding:	  0;      }     ...
Upcoming SlideShare
Loading in …5
×

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

1,691 views

Published on

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,691
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
108
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

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

×