Slides for my in-house HTML & CSS trainning at SAPO. Intermediate CSS: layout properties (margin, padding, border, width and height), backgrounds and lists.

1. HTML 5
& CSS
DINIS CORREIA 2011
cbn

2. CSS 1
PROPRIEDADES
DE LAYOUT
2
BACKGROUNDS
3LISTAS

3. 2
3
LISTAS
CSS
4
TABELAS
⇪

4. 4
TABELAS
CSS
⇪
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. top
left <p> right
bottom

13. 1
top
4 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ÕES
width
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 de
um 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;
}