Mais conteúdo relacionado
CSS 101
- 3. 1. 5. Hack
2. 6. CSS
3. 7. CSS3
4. 8.
- 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
- 9. 2.
1 #id
.class
2 [rel=”nofollow”]
:hover
3
4 *
- 10. 2.
1 #id
.class
2 [rel=”nofollow”]
:hover
3
4 *
- 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
- 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
- 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 -‐-‐>
-‐-‐>
-‐-‐>
-‐-‐>
- 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
- 50. 4.
1 none
( )
2 right
3 left
- 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
*/
}
- 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
- 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;}
}
- 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
- 81. 6. CSS
1
Reset
2
Reset
3
- 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;}
- 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
- 98. 8.
1 Firebug
2
Dreamweaver
3 css.vim
4 CSS
Tidy
5
alice
solutions
http://arale.alipay.net/alice/documentation.php
6