2011 新人培训, 讲 CSS 基础。

1. CSS101
by http://sofish.de

2. 1
CSS101
by http://sofish.de

3. 1. 5. Hack
2. 6. CSS
3. 7. CSS3
4. 8.

4. 1.

5. 1.
margin
padding
border

6. 1.
margin
padding
border
non-­‐replaced
margin-­‐top
margin-­‐bottom
replaced
/
non-­‐replaced
elements
http://reference.sitepoint.com/css/replacedelements

7. Q&A

8. Q&A

9. 2.
1 #id
.class
2 [rel=”nofollow”]
:hover
3
4 *

10. 2.
1 #id
.class
2 [rel=”nofollow”]
:hover
3
4 *

11. 2.
1
2

12. 2.
1

13. 2.
1
ID 0,
1,
0,
0
CLASS 0,
0,
1,
0
0,
0,
0,
1
*
style=”” 1,
0,
0,
0
!important
specificity
*
@import
at
rule

14. 2.
1
ID 0,
1,
0,
0
CLASS 0,
0,
1,
0
0,
0,
0,
1
*
style=”” 1,
0,
0,
0
!important
specificity
*
@import
at
rule
*

15. 2.
1
<div
id=”alipay”
class=”b
a”>
<span>sofish</span>
</div>
<style>
.a{color:green;}
.b{color:blue;}
</style>

16. 2.
1
<div
id=”alipay”
class=”b
a”>
<span>sofish</span>
</div>

17. 2.
1
<div
id=”alipay”
class=”b
a”>
<span>sofish</span>
</div>
<style>
div{color:green;}
span{color:blue;}
</style>

18. 2.
1
<div
id=”alipay”
class=”b
a”>
<span>sofish</span>
</div>

19. 2.
1
<div
id=”alipay”
class=”b
a”>
<span>sofish</span>
</div>
<style>
div{color:green!important;}
#alipay{color:blue;}
</style>

20. 2.
1
<div
id=”alipay”
class=”b
a”> !important
<span>sofish</span>
</div>

21. 2.
1
<div
id=”alipay”
class=”b
a”> !important
<span>sofish</span>
</div>
<style>
div
span{color:green;}
span{color:blue;}
</style>

22. 2.
1
<div
id=”alipay”
class=”b
a”> !important
<span>sofish</span>
</div> base:
<style>
div
span{color:green;}
span{color:blue;}
</style>

23. 2.
1
<div
id=”alipay”
class=”b
a”> !important
<span>sofish</span>
</div> base:
<style>
div
span{color:green;}
span{color:blue;}
</style>
IE
@import

24. 2.
1
2

25. 2.
2

26. 2.
2
ID
CLASS
*

27. 2.
2
ID
CLASS
*
http://code.google.com/speed/page-speed/docs/rendering.html

28. 2.
2
ID
CLASS
*
http://code.google.com/speed/page-speed/docs/rendering.html

29. Q&A

30. Q&A

31. 3.
1 static
2 relative
3 absolute
4 fixed

32. 3.
1 static -­‐-­‐>
2 relative
3 absolute
4 fixed

33. 3.
1 static -­‐-­‐>
2 relative -­‐-­‐>
3 absolute
4 fixed

34. 3.
1 static -­‐-­‐>
2 relative -­‐-­‐>
3 absolute -­‐-­‐>
4 fixed

35. 3.
1 static -­‐-­‐>
2 relative -­‐-­‐>
3 absolute -­‐-­‐>
4 fixed -­‐-­‐>

36. 3.
1 static -­‐-­‐>
-­‐-­‐>
-­‐-­‐>
-­‐-­‐>

37. 3.
1 static -­‐-­‐>
-­‐-­‐>
-­‐-­‐>
-­‐-­‐>

38. 3.
2 relative

39. 3.
2 relative

40. 3.
3 absolute

41. 3.
3 absolute

42. 3.
4 fixed

43. 3.
4 fixed

44. 3.
4 fixed
position:absolute;
“html”

45. 3.
1
static
2 fixed
3
ie6/ie7
bug

46. 3.
1
static
2 fixed
3
ie6/ie7
bug
IE6/7

47. 3.
1
static
2 fixed
3
ie6/ie7
bug bug
IE6/7

48. Q&A

49. Q&A

50. 4.
1 none
( )
2 right
3 left

51. 4.
1 none
( )

52. 4.
1 none
( )

53. 4.
2 right

54. 4.
2 right

55. 4.
3 left

56. 4.
3 left

57. 4.
3 left

58. 4.
3 left

59. 4.
3 left

60. 4.
3 left

61. 4.
1
vs
2 clearfix

62. 4.
1
vs
2 clearfix
/*
*/
.clearfix:after
{
visibility:hidden;
display:block;
font-­‐size:0;
content:"
";
clear:both;
height:0;
}
.clearfix
{
zoom:1;
/*
for
IE6
IE7
*/
}

63. 4.
1
vs
2 clearfix
/*
*/
.clearfix:after
{
visibility:hidden;
display:block;
font-­‐size:0;
content:"
";
clear:both;
height:0;
}
.clearfix
{
zoom:1;
/*
for
IE6
IE7
*/
}

64. Q&A

65. Q&A

66. 5. HACK
1 IE
bug
&&
hasLayout
2
HACK

67. 5. HACK
1 IE
bug
&&
hasLayout

68. 5. HACK
1 IE
bug
&&
hasLayout
IE <!-­‐-­‐[if
lte
IE
7]>
...
<![endif]-­‐-­‐>

69. 5. HACK
1 IE
bug
&&
hasLayout
.all-­‐IE{property:value9;}
.gte-­‐IE-­‐8{property:value0;}
.lte-­‐IE-­‐7{*property:value;}
.IE-­‐7{+property:value;}
.IE-­‐6{_property:value;}
.not-­‐IE{property//:value;}

70. 5. HACK
1 IE
bug
&&
hasLayout
.all-­‐IE{property:value9;}
.gte-­‐IE-­‐8{property:value0;}
.lte-­‐IE-­‐7{*property:value;}
.IE-­‐7{+property:value;}
.IE-­‐6{_property:value;}
.not-­‐IE{property//:value;}
IE6/7
bug
hasLayout

71. 5. HACK
1 IE
bug
&&
hasLayout
.all-­‐IE{property:value9;}
.gte-­‐IE-­‐8{property:value0;}
.lte-­‐IE-­‐7{*property:value;}
.IE-­‐7{+property:value;}
.IE-­‐6{_property:value;}
.not-­‐IE{property//:value;}
IE6/7
bug
hasLayout
hasLayout
hasLayout
3
bug

72. 5. HACK
2
HACK

73. 5. HACK
2
HACK
@-­‐moz-­‐document
url-­‐prefix()
{
.firefox{property:value;}
}
@media
all
and
(-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:0)
{
.webkit{property:value;}
}
@media
all
and
(-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:10000),not
all
and
(-­‐webkit-­‐
min-­‐device-­‐pixel-­‐ratio:0)
{
.opera{property:value;}
}
@media
screen
and
(max-­‐device-­‐width:
480px)
{
.iphone-­‐or-­‐mobile-­‐s-­‐webkit{property:value;}
}

74. 5. HACK

75. 5. HACK
1
2
3

76. 5. HACK

77. 5. HACK
HACK
ie6 hack _padding:6px;
1
IE10 IE9
padding:8px0; IE8+ hack
IE10 hack bug 2

78. 5. HACK
HACK
ie6 hack _padding:6px;
1
IE10 IE9
padding:8px0; IE8+ hack
IE10 hack bug 2
HACK
http://sofish.de/1331

79. Q&A

80. Q&A

81. 6. CSS
1
Reset
2
Reset
3

82. 6. CSS
1
Reset

83. 6. CSS
1
Reset
/* */
html{
color:#000;background:#fff;
}
/* */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textare
a,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgr
oup,menu,nav,section {
margin:0;padding:0;
}
...

84. 6. CSS
1
Reset
/* */
html{
color:#000;background:#fff;
}
/* */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textare
a,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgr
oup,menu,nav,section {
margin:0;padding:0;
}
...
YUI
Reset
http://developer.yahoo.com/yui/3/cssreset/

85. 6. CSS
1
Reset
/* */ CSS
Reset
html{
color:#000;background:#fff;
}
/* */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textare
a,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgr
oup,menu,nav,section {
margin:0;padding:0;
}
...
YUI
Reset
http://developer.yahoo.com/yui/3/cssreset/

86. 6. CSS
2
Reset
+
h1{font-­‐size:30px} .h1{font-­‐size:30px}
h2{font-­‐size:20px} .h2{font-­‐size:20px}
h3{font-­‐size:10px;} .h3{font-­‐size:10px;}

87. 6. CSS
2
HTML

88. 6. CSS
2
HTML

89. 6. CSS
2
HTML

90. 6. CSS
2
HTML

91. 6. CSS
2
HTML

92. 6. CSS
2
HTML
.module{}
.module
.head{}
.module
.body{}
.module
.foot{}

93. 6. CSS
2
HTML
.module{}
.module
.head{}
.module
.body{}
.module
.foot{}
Alice
Style
Library
Guideline
CSS

94. Q&A

95. Q&A

97. 7. CSS3
CSS3

98. 8.
1 Firebug
2
Dreamweaver
3 css.vim
4 CSS
Tidy
5
alice
solutions
http://arale.alipay.net/alice/documentation.php
6

99. Q&A

101. sofish@163.com

102. THANKS!
by http://sofish.de
sofish@163.com