1 文档类型声明决定浏览器渲染模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html>
standards mode 标准模式 文档类型声明完整(严格/过渡)
quirks mode 混杂模式 没有或无效的文档类型
almost standards mode 近似标准模式
...
[url]http://hsivonen.iki.fi/doctype/[/url]
* 避免使用XML文档声明.
2
selector
元素选择器
p {
color: black;
}
h1 {
font-weight: bold;
}
后代选择器
blockquote p {
padding-left: 2em;
}
id/class选择器
#intro {font-weight: bold;}
.date-posted {color: #ccc;}
组合选择器
#main-content h2 {font-size: 1.8em;}
Pseudo-classes 伪类
a:link {color:blue;}
a:visited {color:green;}
a:hover, a:focus, a:active {color:red;} // 任何元素, IE 6 仅支持 a:active 与 a:hover
tr:hover {background-color: red;}
input:focus {background-color:yellow;}
a:visited:hover {color:olive;} //组合用法
万能选择器
* {
padding: 0;
margin: 0;
}
高级选择器CSS2.1+
子元素选择器/兄弟选择器
#nav>li {
background: url(folder.png) no-repeat left top;
padding-left: 20px;
}
h2 + p {
font-size: 1.4em;
font-weight: bold;
color: #777;
}
属性选择器
acronym[title] {
border-bottom: 1px dotted #999;
}
!important
DOM样式继承
3
组织样式
<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("/css/advanced.css");
-->
</style>
@colordef #434343; dark gray
@colordef #f2f6e4; light green
@colordef #90b11f; dark green
@colordef #369; dark blue
4
box model
content padding border margin
outline 不影响元素的大小和位置. // IE8+
margin 可以是负值.
标准的CSS盒子模型的width, height 是指内容区域大小.而IE的盒子模型是指内容区域+padding+border.
Margin collapsing 间距折叠
只发生在垂直方向的相邻或嵌套block及空块, 内联,浮动,绝对定位的元素不会发生折叠.
块级元素与内联元素
block box
inline box
no box // display : none;
* 使用display可以改变元素盒子类型.
display : inline;
display : block;
display : inline-block; // 两种行为, CSS2.1+ 支持 inline-block, 可以设置宽,高,垂直定位属性. // IE8+
定位:
正常
浮动
绝对定位
inline box 的垂直定位,宽,高是无效的.因为它们基于 line box 定位.可以修改的包括line-height, 水平定位属性(borders, padding, margins).
相对定位:
relative
left
top
相对元素初始化位置定位. 可能产生重叠. 没有脱离文档流, 占用空间.
绝对定位
absoulte
top
right
left
bottom
z-index
相对最近的祖先定位元素(realtive/offsetParent)的位置,没有则相对body. 可能产生重叠. 脱离文档流, 不占用空间. 因此修改绝对定位的元素不会导致正常文档流回流 reflow.
固定定位
Fixed positioning
相对于视区的定位
浮动
float : left| right
clear: left | right | both | none;
可能产生重叠,脱离文档流 ,向左或向右浮动,直到接触到盒子的边缘或另一个浮动元素停止.正常文档流元素感觉不到它的存在. clear: both //消除垂直间距, 不围绕浮动元素.
5
布局
水平居中
<body>
<div class="wrapper">
</div>
</body>
.wrapper {
width: 920px;
margin: 0 auto;
text-align: left;
}
Liquid layouts
液体布局
使用百分比设置宽度与高度.
Elastic layouts
弹性布局, 相对字体大小设置百分比宽度
body {
font-size: 62.5%; //16px
text-align: center;
}
// 1em = 10px
.wrapper {
width: 92em;
max-width: 95%;
margin: 0 auto;
text-align: left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html>
standards mode 标准模式 文档类型声明完整(严格/过渡)
quirks mode 混杂模式 没有或无效的文档类型
almost standards mode 近似标准模式
...
[url]http://hsivonen.iki.fi/doctype/[/url]
* 避免使用XML文档声明.
2
selector
元素选择器
p {
color: black;
}
h1 {
font-weight: bold;
}
后代选择器
blockquote p {
padding-left: 2em;
}
id/class选择器
#intro {font-weight: bold;}
.date-posted {color: #ccc;}
组合选择器
#main-content h2 {font-size: 1.8em;}
Pseudo-classes 伪类
a:link {color:blue;}
a:visited {color:green;}
a:hover, a:focus, a:active {color:red;} // 任何元素, IE 6 仅支持 a:active 与 a:hover
tr:hover {background-color: red;}
input:focus {background-color:yellow;}
a:visited:hover {color:olive;} //组合用法
万能选择器
* {
padding: 0;
margin: 0;
}
高级选择器CSS2.1+
子元素选择器/兄弟选择器
#nav>li {
background: url(folder.png) no-repeat left top;
padding-left: 20px;
}
h2 + p {
font-size: 1.4em;
font-weight: bold;
color: #777;
}
属性选择器
acronym[title] {
border-bottom: 1px dotted #999;
}
!important
DOM样式继承
3
组织样式
<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("/css/advanced.css");
-->
</style>
@colordef #434343; dark gray
@colordef #f2f6e4; light green
@colordef #90b11f; dark green
@colordef #369; dark blue
4
box model
content padding border margin
outline 不影响元素的大小和位置. // IE8+
margin 可以是负值.
标准的CSS盒子模型的width, height 是指内容区域大小.而IE的盒子模型是指内容区域+padding+border.
Margin collapsing 间距折叠
只发生在垂直方向的相邻或嵌套block及空块, 内联,浮动,绝对定位的元素不会发生折叠.
块级元素与内联元素
block box
inline box
no box // display : none;
* 使用display可以改变元素盒子类型.
display : inline;
display : block;
display : inline-block; // 两种行为, CSS2.1+ 支持 inline-block, 可以设置宽,高,垂直定位属性. // IE8+
定位:
正常
浮动
绝对定位
inline box 的垂直定位,宽,高是无效的.因为它们基于 line box 定位.可以修改的包括line-height, 水平定位属性(borders, padding, margins).
相对定位:
relative
left
top
相对元素初始化位置定位. 可能产生重叠. 没有脱离文档流, 占用空间.
绝对定位
absoulte
top
right
left
bottom
z-index
相对最近的祖先定位元素(realtive/offsetParent)的位置,没有则相对body. 可能产生重叠. 脱离文档流, 不占用空间. 因此修改绝对定位的元素不会导致正常文档流回流 reflow.
固定定位
Fixed positioning
相对于视区的定位
浮动
float : left| right
clear: left | right | both | none;
可能产生重叠,脱离文档流 ,向左或向右浮动,直到接触到盒子的边缘或另一个浮动元素停止.正常文档流元素感觉不到它的存在. clear: both //消除垂直间距, 不围绕浮动元素.
5
布局
水平居中
<body>
<div class="wrapper">
</div>
</body>
.wrapper {
width: 920px;
margin: 0 auto;
text-align: left;
}
Liquid layouts
液体布局
使用百分比设置宽度与高度.
Elastic layouts
弹性布局, 相对字体大小设置百分比宽度
body {
font-size: 62.5%; //16px
text-align: center;
}
// 1em = 10px
.wrapper {
width: 92em;
max-width: 95%;
margin: 0 auto;
text-align: left;
}