Css101

882 views

Published on

css101+alice

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
882
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
22
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Css101

    1. 1. CSS101by http://sofish.de
    2. 2. 1CSS101by http://sofish.de
    3. 3. 1. 5. Hack2. 6. CSS3. 7. CSS34. 8. Alice
v3
    4. 4. 1.
    5. 5. 1. margin padding border
    6. 6. 1. margin padding border non‐replaced 
margin‐top
 margin‐bottom replaced
/
non‐replaced
elements http://reference.sitepoint.com/css/replacedelements
    7. 7. Q&A
    8. 8. Q&A
    9. 9. 2. 1 #id
.class 2 [rel=”nofollow”]
:hover 3 4 *
    10. 10. 2. 1 #id
.class 2 [rel=”nofollow”]
:hover 3 4 *
    11. 11. 2. 1 2
    12. 12. 2. 1
    13. 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. 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. 15. 2. 1 <div
id=”alipay”
class=”b
a”> 



<span>sofish</span> </div> <style> 



.a{color:green;} 



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



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



<span>sofish</span> </div> <style> 



div{color:green;} 



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



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



<span>sofish</span> </div> <style> 



div{color:green!important;} 



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



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



<span>sofish</span> </div> <style> 



div
span{color:green;} 



span{color:blue;} </style>
    22. 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. 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. 24. 2. 1 2
    25. 25. 2. 2
    26. 26. 2. 2 ID CLASS *
    27. 27. 2. 2 ID CLASS * http://code.google.com/speed/page-speed/docs/rendering.html
    28. 28. 2. 2 ID CLASS * http://code.google.com/speed/page-speed/docs/rendering.html
    29. 29. Q&A
    30. 30. Q&A
    31. 31. 3. 1 static 2 relative 3 absolute 4 fixed
    32. 32. 3. 1 static ‐‐>
 2 relative 3 absolute 4 fixed
    33. 33. 3. 1 static ‐‐>
 2 relative ‐‐>
 3 absolute 4 fixed
    34. 34. 3. 1 static ‐‐>
 2 relative ‐‐>
 3 absolute ‐‐>
 4 fixed
    35. 35. 3. 1 static ‐‐>
 2 relative ‐‐>
 3 absolute ‐‐>
 4 fixed ‐‐>

    36. 36. 3. 1 static ‐‐>
 ‐‐>
 ‐‐>
 ‐‐>

    37. 37. 3. 1 static ‐‐>
 ‐‐>
 ‐‐>
 ‐‐>

    38. 38. 3. 2 relative
    39. 39. 3. 2 relative
    40. 40. 3. 3 absolute
    41. 41. 3. 3 absolute
    42. 42. 3. 4 fixed
    43. 43. 3. 4 fixed
    44. 44. 3. 4 fixed 
position:absolute;
 “html”
    45. 45. 3. 1 
static
 2 fixed
 3 
ie6/ie7
 
bug
    46. 46. 3. 1 
static
 2 fixed
 3 
ie6/ie7
 
bug IE6/7
    47. 47. 3. 1 
static
 2 fixed
 3 
ie6/ie7
 
bug bug IE6/7
    48. 48. Q&A
    49. 49. Q&A
    50. 50. 4. 1 none
( ) 2 right 3 left
    51. 51. 4. 1 none
( )
    52. 52. 4. 1 none
( )
    53. 53. 4. 2 right

    54. 54. 4. 2 right

    55. 55. 4. 3 left

    56. 56. 4. 3 left

    57. 57. 4. 3 left

    58. 58. 4. 3 left

    59. 59. 4. 3 left

    60. 60. 4. 3 left

    61. 61. 4. 1 
vs
 2 clearfix
    62. 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. 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. 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. 65. Q&A
    66. 66. Q&A
    67. 67. 5. HACK 1 IE
bug
&&
hasLayout 2 
HACK
    68. 68. 5. HACK 1 IE
bug
&&
hasLayout
    69. 69. 5. HACK 1 IE
bug
&&
hasLayout IE <!‐‐[if
lte
IE
7]>
...
<![endif]‐‐>
    70. 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. 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. 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. 73. 5. HACK 2 
HACK
    74. 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. 75. 5. HACK
    76. 76. 5. HACK 1 2 3
    77. 77. 5. HACK
    78. 78. 5. HACK 单 HACK 这样维护 较 动 浏览 浏览 键 这 码 ie6 单 hack _padding:6px; 标 1 现 IE10 谁 这 预见 说 暂时 过 IE9 发 选择 padding:8px0;这样 IE8+ hack 删 码 IE10 这 hack 这 bug 删 2 浏览 资 虑页 载 虑 务 话 处 码 这
    79. 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. 80. Q&A
    81. 81. Q&A
    82. 82. 6. CSS 1 
Reset 2 
Reset 3
    83. 83. 6. CSS 1 
Reset
    84. 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. 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. 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. 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. 88. 6. CSS 2 HTML
    89. 89. 6. CSS 2 HTML
    90. 90. 6. CSS 2 HTML
    91. 91. 6. CSS 2 HTML
    92. 92. 6. CSS 2 HTML
    93. 93. 6. CSS 2 HTML .module{} .module
.head{} .module
.body{} .module
.foot{}
    94. 94. 6. CSS 2 HTML .module{} .module
.head{} .module
.body{} .module
.foot{} Alice
Style
Library
Guideline
    95. 95. Q&A
    96. 96. Q&A
    97. 97. 7. CSS3 1 2
    98. 98. 7. CSS3 1
    99. 99. 7. CSS3 1
    100. 100. 7. CSS3 1
    101. 101. 7. CSS3 1
    102. 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. 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. 104. 7. CSS3 2 HTML5 & CSS3 http://tinyurl.com/alipay‐alice‐docs
    105. 105. 7. CSS3 2 HTML5 & CSS3 http://tinyurl.com/alipay‐alice‐docs Alice
 
Alice

    106. 106. Q&A
    107. 107. Q&A
    108. 108. 8. alice
v3 1 2 3 
alice

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

    111. 111. 8. alice
v3 1 1.
 2.
 / / 3.
 4.
Maven
 5.
 Alice
V3
 http://doc.alipay.net/pages/ viewpage.action?pageId=20120295
    112. 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. 113. 8. alice
v3 2
    114. 114. 8. alice
v3
    115. 115. 8. alice
v3
    116. 116. 8. alice
v3 Alice
V3
 http://arale.alipay.net/alice/ documentation.php
    117. 117. 8. alice
v3 3 
alice

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

    119. 119. 8. alice
v3 3 
alice
 1.
 
CSS 2.
 
HTML5/CSS3
 3.
 4.
 / 5.
 git
    120. 120. Q&A
    121. 121. sofish@163.com
    122. 122. THANKS!by http://sofish.de sofish@163.com

    ×