css101+alice

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. Alice v3

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 */
}
CSS
http://sofish.de/1791

64. 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 */
}
CSS
http://sofish.de/1791

65. Q&A

66. Q&A

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

68. 5. HACK
1 IE bug && hasLayout

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

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;}

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

72. 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

73. 5. HACK
2 HACK

74. 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;}
}

75. 5. HACK

76. 5. HACK
1
2
3

77. 5. HACK

78. 5. HACK
单 HACK
这样维护 较 动 浏览 浏览 键
这 码 ie6 单 hack _padding:6px;
标 1
现 IE10 谁 这 预见 说 暂时 过 IE9
发 选择 padding:8px0;这样 IE8+ hack 删 码
IE10 这 hack 这 bug 删 2 浏览
资
虑页 载 虑 务 话 处 码
这

79. 5. HACK
单 HACK
这样维护 较 动 浏览 浏览 键
这 码 ie6 单 hack _padding:6px;
标 1
现 IE10 谁 这 预见 说 暂时 过 IE9
发 选择 padding:8px0;这样 IE8+ hack 删 码
IE10 这 hack 这 bug 删 2 浏览
资
虑页 载 虑 务 话 处 码
这
HACK
http://sofish.de/1331

80. Q&A

81. Q&A

82. 6. CSS
1 Reset
2 Reset
3

83. 6. CSS
1 Reset

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;
}
...

85. 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/

86. 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/

87. 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;}

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

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

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

95. Q&A

96. Q&A

97. 7. CSS3
1
2

98. 7. CSS3
1

99. 7. CSS3
1

100. 7. CSS3
1

101. 7. CSS3
1

102. 7. CSS3
1
浏览 标
-moz-box-shadow: 1px 2px 3px #ddd;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;

103. 7. CSS3
1
浏览 标
-moz-box-shadow: 1px 2px 3px #ddd;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;

104. 7. CSS3
2
HTML5 & CSS3
http://tinyurl.com/alipay‐alice‐docs

105. 7. CSS3
2
HTML5 & CSS3
http://tinyurl.com/alipay‐alice‐docs
Alice
Alice

106. Q&A

107. Q&A

108. 8. alice v3
1
2
3 alice

109. 8. alice v3
1

110. 8. alice v3
1
1.
2. / /
3.
4. Maven
5.

111. 8. alice v3
1
1.
2. / /
3.
4. Maven
5.
Alice V3
http://doc.alipay.net/pages/
viewpage.action?pageId=20120295

112. 8. alice v3
1
1.
2. / /
3.
4. Maven
5.
Alice v3
Alice V3
http://doc.alipay.net/pages/
viewpage.action?pageId=20120295

113. 8. alice v3
2

114. 8. alice v3

115. 8. alice v3

116. 8. alice v3
Alice V3
http://arale.alipay.net/alice/
documentation.php

117. 8. alice v3
3 alice

118. 8. alice v3
3 alice
1. CSS
2. HTML5/CSS3
3.
4. /
5.

119. 8. alice v3
3 alice
1. CSS
2. HTML5/CSS3
3.
4. /
5.
git

120. Q&A

122. sofish@163.com

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