狠狠撸

要漂亮很容易！
超简单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 颁厂厂简史

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-child {}
3.1 选择器的类型

div.box
a.hot-news:hover, a.hot-news:active{}
.box.latest-news
input#user-name
3.2 选择器的组合

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>

[ 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-height , color
border , background
4.1 常用CSS属性

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属性的简写

父节点中定义的某些属性，将遗传给子节
点，除非子节点本身有定义该属性（包括
浏览器定义的默认样式）。
这些可被继承的属性定义几乎都是文本相
关，比如：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>
</div>

display
position , left , right , top , bottom , z-index
float , width , height , overflow
margin , padding
font , line-height , color
border , background
5.3 属性声明顺序

不使用通配符*
不定义全局样式，如直接给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://fed.ued.taobao.net/2010/shine/docs/api/index.html
CSS权威指南
8 参考资料

狠狠撸

Easy css

More Related Content

Easy css

Editor's Notes