Soumettre la recherche
Mettre en ligne
CSS 101
•
13 j'aime
•
2,232 vues
Sofish Lin
Suivre
2011 新人培训, 讲 CSS 基础。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 102
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
box model
box model
jay li
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Robin Pokorny
CSS設計の理想と現実
CSS設計の理想と現実
拓樹 谷
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
Loiane Groner
10. add in Symfony 4
10. add in Symfony 4
Razvan Raducanu, PhD
CSS Components
CSS Components
拓樹 谷
Code blogtangcan
Code blogtangcan
Quyên Lê
Thinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
Recommandé
box model
box model
jay li
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Robin Pokorny
CSS設計の理想と現実
CSS設計の理想と現実
拓樹 谷
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
QCON SP 2014: 10 dicas de desempenho para apps mobile hibridas
Loiane Groner
10. add in Symfony 4
10. add in Symfony 4
Razvan Raducanu, PhD
CSS Components
CSS Components
拓樹 谷
Code blogtangcan
Code blogtangcan
Quyên Lê
Thinking about CSS Architecture
Thinking about CSS Architecture
拓樹 谷
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
拓樹 谷
문돌이가 가르치는 웹 프론트엔드 기초 2차시
문돌이가 가르치는 웹 프론트엔드 기초 2차시
동현 조
Creación aplicación Web base struts2
Creación aplicación Web base struts2
Pablo Andres Cáceres Ferreira
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Román Hernández
Index
Index
grateful7
Tjejer kodar 100 - Dag 2 - HTML & CSS
Tjejer kodar 100 - Dag 2 - HTML & CSS
Emil Stenström
programacion
programacion
ke10neth
いま、Html5でできること
いま、Html5でできること
Masakazu Muraoka
Jquery part-II
Jquery part-II
Ishaq Shinwari
Professional Web Development
Professional Web Development
Joseph Chiang
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
Tommy Chang
Jquerymobile ppt
Jquerymobile ppt
Willy Aguirre
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
Loiane Groner
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
Atsushi Tadokoro
Master3
Master3
akyarddt
Bisedë e përditshme Shqipe, Angleze dhe Arabe
Bisedë e përditshme Shqipe, Angleze dhe Arabe
RregullatIslame
Shirku, Kuptimi Dhe Llojet e Tij
Shirku, Kuptimi Dhe Llojet e Tij
RregullatIslame
Dëshiroj të pendohem, por...!
Dëshiroj të pendohem, por...!
RregullatIslame
Html5的应用与推行
Html5的应用与推行
Sofish Lin
分享我的骗骗他
分享我的骗骗他
Sofish Lin
新 · 交互
新 · 交互
Sofish Lin
Contenu connexe
Tendances
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
拓樹 谷
문돌이가 가르치는 웹 프론트엔드 기초 2차시
문돌이가 가르치는 웹 프론트엔드 기초 2차시
동현 조
Creación aplicación Web base struts2
Creación aplicación Web base struts2
Pablo Andres Cáceres Ferreira
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
拓樹 谷
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Román Hernández
Index
Index
grateful7
Tjejer kodar 100 - Dag 2 - HTML & CSS
Tjejer kodar 100 - Dag 2 - HTML & CSS
Emil Stenström
programacion
programacion
ke10neth
いま、Html5でできること
いま、Html5でできること
Masakazu Muraoka
Jquery part-II
Jquery part-II
Ishaq Shinwari
Professional Web Development
Professional Web Development
Joseph Chiang
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
Tommy Chang
Jquerymobile ppt
Jquerymobile ppt
Willy Aguirre
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
Loiane Groner
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
Atsushi Tadokoro
Master3
Master3
akyarddt
Bisedë e përditshme Shqipe, Angleze dhe Arabe
Bisedë e përditshme Shqipe, Angleze dhe Arabe
RregullatIslame
Shirku, Kuptimi Dhe Llojet e Tij
Shirku, Kuptimi Dhe Llojet e Tij
RregullatIslame
Dëshiroj të pendohem, por...!
Dëshiroj të pendohem, por...!
RregullatIslame
Tendances
(19)
How to Win the Heart of CSS Boys
How to Win the Heart of CSS Boys
문돌이가 가르치는 웹 프론트엔드 기초 2차시
문돌이가 가르치는 웹 프론트엔드 기초 2차시
Creación aplicación Web base struts2
Creación aplicación Web base struts2
メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Index
Index
Tjejer kodar 100 - Dag 2 - HTML & CSS
Tjejer kodar 100 - Dag 2 - HTML & CSS
programacion
programacion
いま、Html5でできること
いま、Html5でできること
Jquery part-II
Jquery part-II
Professional Web Development
Professional Web Development
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
Jquerymobile ppt
Jquerymobile ppt
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
FrontInterior 2014: 10 dicas de desempenho para apps mobile hibridas
CSSレイアウト - 千葉商科大 Web表現
CSSレイアウト - 千葉商科大 Web表現
Master3
Master3
Bisedë e përditshme Shqipe, Angleze dhe Arabe
Bisedë e përditshme Shqipe, Angleze dhe Arabe
Shirku, Kuptimi Dhe Llojet e Tij
Shirku, Kuptimi Dhe Llojet e Tij
Dëshiroj të pendohem, por...!
Dëshiroj të pendohem, por...!
En vedette
Html5的应用与推行
Html5的应用与推行
Sofish Lin
分享我的骗骗他
分享我的骗骗他
Sofish Lin
新 · 交互
新 · 交互
Sofish Lin
实时/可接入的 Web 技术
实时/可接入的 Web 技术
Sofish Lin
关于 Html5 那点事
关于 Html5 那点事
Sofish Lin
Alice库构建
Alice库构建
Sofish Lin
支付宝CSS构架
支付宝CSS构架
Sofish Lin
En vedette
(7)
Html5的应用与推行
Html5的应用与推行
分享我的骗骗他
分享我的骗骗他
新 · 交互
新 · 交互
实时/可接入的 Web 技术
实时/可接入的 Web 技术
关于 Html5 那点事
关于 Html5 那点事
Alice库构建
Alice库构建
支付宝CSS构架
支付宝CSS构架
CSS 101
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
96.
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
100.
101.
sofish@163.com
102.
THANKS! by
http://sofish.de sofish@163.com
Télécharger maintenant