Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
要漂亮很容易!
超简单CSS速成教程
#沉鱼{
department: UED;
post: fed;
blog: “http://fool2fish.cn”;
}
1990~1993年,HTML
<font size=“+3” color=“red”>text</font>
1995年,CSS草案
1996年,CSS1
1998年5月,CSS2
2001年5月,CSS3草案
1 CSS简史
2 CSS是什么
表现力丰富的
描述的
Cascading style sheet
易于使用的
可复用的
层叠的
h1 {
color : #444 ;
font-size : 18px ;
font-family : ”微软雅黑”;
}
选择器 语句块 属性声明
选择器位于CSS语句块的左侧,用于定义语
句块将影响到的DOM节点
选择器的类型
选择器的组合
选择器的层叠
选择器的优先级
3 选择器
普通选择器:#id , .class , tag
伪类: a:link, a:visited{}
a:hover, a:active{}
属性选择器: input [ type = “radio” ]
高级伪类: .box : first-ch...
div.box
a.hot-news:hover, a.hot-news:active{}
.box.latest-news
input#user-name
3.2 选择器的组合
请确保页面内id唯一
!
body .hd h3.title{…}
.box .hd h3{…}
.box .title{…}
.box .hd .title{…}
h3{color:#f60}
3.3 选择器的层叠
<div class=“box”>
<div cla...
[ 0 , 0 , 0 , 0 ]
3.4 选择器的优先级
#id tag
.class , 伪类,属性选择器
层叠选择器中,每个单选择器都可以在对应的位上+1
优先级比较由左至右进行
简单来说:
#id > .class > tag
层叠层级多的优先级高
同样的选择器,位于后面的优先级高
3.4 选择器的优先级
常用CSS属性
CSS属性的简写
CSS属性的继承
4 CSS属性
display
position , left , right , top , bottom , z-index
float , width , height , overflow
margin , padding
font , line-he...
margin-left:10px ; margin-right:10px
margin: 0 10px;
border-color:#ccc ; border-style:solid
border:1px solid #ccc;
backgro...
父节点中定义的某些属性,将遗传给子节
点,除非子节点本身有定义该属性(包括
浏览器定义的默认样式)。
这些可被继承的属性定义几乎都是文本相
关,比如:color, font之类。
4.3 CSS属性的继承
Id和class的命名
模块化
属性声明顺序
其他事项
5 推荐书写习惯
用于CSS的id和class
首字母小写,中划线链接,例:latest-news
用于js的id和class
S_前缀,首字母大写,驼峰,例:S_LatestNews
CSS尽量不占用id
5.1 id和class的命名
.news{}
.news .hd{}
.news .title{}
…
5.2 模块化
<div class=“box news”>
<div class=“hd”>
<h3 class=“title”>
Title
</h3>
</div>...
display
position , left , right , top , bottom , z-index
float , width , height , overflow
margin , padding
font , line-he...
不使用通配符*
不定义全局样式,如直接给tag指定样式
注意继承的影响
使用.class来选择要定义样式的DOM节点
5.4 其他事项
浏览器默认样式
浏览器兼容性
慎用hack
6 浏览器相关
每个浏览器会根据自己对HTML标签的理
解,默认给某些标签设置CSS样式
通常我们并不需要使用这些默认样式,所
以会引入重置样式,将所有的与设定样式
换成我们需要的
6.1 浏览器默认样式
浏览器面世的时候,支持的CSS版本不同
浏览器开发商对同一个属性值的理解不同
6.2 浏览器兼容性
淘宝前台页面兼容:ie6+,firefox,chrome
如果是后台页面,可酌情考虑不支持ie6
.box{
width:100px; /* for all */
*width:120px; /* for ie7 */
_width:140px; /* for ie6 */
}
尽量遵循标准书写CSS,避免无谓的hack
6.3 慎用hack
IE8 – F12
Firefox – F12 (需安装Firebug插件)
Chrome – Ctrl+Shift+I
ietester
7 调试工具
CSS速查手册
http://www.52css.com/css/
淘宝网后台页面模块范例
http://fed.ued.taobao.net/2010/shine/components/index.html
淘宝网后台页面模块API
http...
Prochain SlideShare
Chargement dans…5
×

【第一季第五期】要漂亮很容易!——超简单CSS速成教程

2 037 vues

Publié le

【第一季第五期】要漂亮很容易!——超简单CSS速成教程

Publié dans : Formation

【第一季第五期】要漂亮很容易!——超简单CSS速成教程

  1. 1. 要漂亮很容易! 超简单CSS速成教程 #沉鱼{ department: UED; post: fed; blog: “http://fool2fish.cn”; }
  2. 2. 1990~1993年,HTML <font size=“+3” color=“red”>text</font> 1995年,CSS草案 1996年,CSS1 1998年5月,CSS2 2001年5月,CSS3草案 1 CSS简史
  3. 3. 2 CSS是什么 表现力丰富的 描述的 Cascading style sheet 易于使用的 可复用的 层叠的
  4. 4. h1 { color : #444 ; font-size : 18px ; font-family : ”微软雅黑”; } 选择器 语句块 属性声明
  5. 5. 选择器位于CSS语句块的左侧,用于定义语 句块将影响到的DOM节点 选择器的类型 选择器的组合 选择器的层叠 选择器的优先级 3 选择器
  6. 6. 普通选择器:#id , .class , tag 伪类: a:link, a:visited{} a:hover, a:active{} 属性选择器: input [ type = “radio” ] 高级伪类: .box : first-child {} 3.1 选择器的类型
  7. 7. div.box a.hot-news:hover, a.hot-news:active{} .box.latest-news input#user-name 3.2 选择器的组合
  8. 8. 请确保页面内id唯一 !
  9. 9. body .hd h3.title{…} .box .hd h3{…} .box .title{…} .box .hd .title{…} h3{color:#f60} 3.3 选择器的层叠 <div class=“box”> <div class=“hd”> <h3 class=“title”> Title </h3> </div> </div>
  10. 10. [ 0 , 0 , 0 , 0 ] 3.4 选择器的优先级 #id tag .class , 伪类,属性选择器 层叠选择器中,每个单选择器都可以在对应的位上+1 优先级比较由左至右进行
  11. 11. 简单来说: #id > .class > tag 层叠层级多的优先级高 同样的选择器,位于后面的优先级高 3.4 选择器的优先级
  12. 12. 常用CSS属性 CSS属性的简写 CSS属性的继承 4 CSS属性
  13. 13. display position , left , right , top , bottom , z-index float , width , height , overflow margin , padding font , line-height , color border , background 4.1 常用CSS属性
  14. 14. margin-left:10px ; margin-right:10px margin: 0 10px; border-color:#ccc ; border-style:solid border:1px solid #ccc; background-color:#f2f2f2 ; background-image: url() background:#f2f2f2 url() no-repeat 0 0; 4.2 CSS属性的简写
  15. 15. 父节点中定义的某些属性,将遗传给子节 点,除非子节点本身有定义该属性(包括 浏览器定义的默认样式)。 这些可被继承的属性定义几乎都是文本相 关,比如:color, font之类。 4.3 CSS属性的继承
  16. 16. Id和class的命名 模块化 属性声明顺序 其他事项 5 推荐书写习惯
  17. 17. 用于CSS的id和class 首字母小写,中划线链接,例:latest-news 用于js的id和class S_前缀,首字母大写,驼峰,例:S_LatestNews CSS尽量不占用id 5.1 id和class的命名
  18. 18. .news{} .news .hd{} .news .title{} … 5.2 模块化 <div class=“box news”> <div class=“hd”> <h3 class=“title”> Title </h3> </div> </div>
  19. 19. display position , left , right , top , bottom , z-index float , width , height , overflow margin , padding font , line-height , color border , background 5.3 属性声明顺序
  20. 20. 不使用通配符* 不定义全局样式,如直接给tag指定样式 注意继承的影响 使用.class来选择要定义样式的DOM节点 5.4 其他事项
  21. 21. 浏览器默认样式 浏览器兼容性 慎用hack 6 浏览器相关
  22. 22. 每个浏览器会根据自己对HTML标签的理 解,默认给某些标签设置CSS样式 通常我们并不需要使用这些默认样式,所 以会引入重置样式,将所有的与设定样式 换成我们需要的 6.1 浏览器默认样式
  23. 23. 浏览器面世的时候,支持的CSS版本不同 浏览器开发商对同一个属性值的理解不同 6.2 浏览器兼容性 淘宝前台页面兼容:ie6+,firefox,chrome 如果是后台页面,可酌情考虑不支持ie6
  24. 24. .box{ width:100px; /* for all */ *width:120px; /* for ie7 */ _width:140px; /* for ie6 */ } 尽量遵循标准书写CSS,避免无谓的hack 6.3 慎用hack
  25. 25. IE8 – F12 Firefox – F12 (需安装Firebug插件) Chrome – Ctrl+Shift+I ietester 7 调试工具
  26. 26. CSS速查手册 http://www.52css.com/css/ 淘宝网后台页面模块范例 http://fed.ued.taobao.net/2010/shine/components/index.html 淘宝网后台页面模块API http://fed.ued.taobao.net/2010/shine/docs/api/index.html CSS权威指南 8 参考资料

×