CSS(Cascading Style Sheets)简介
当初一帮技术人员想出HTML，主要侧重于定义内容，比如<p>表示一个段落，<h1>表示标题，而并没有过多设计HTML的排版和界面效果。
随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。直到CSS出现。
CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。
CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。
CSS按其位置可以分成三种：
- 内嵌样式(Inline Style)
- 内部样式表(Internal Style Sheet)
- 外部样式表(External Style Sheet)
内嵌样式(Inline Style)
Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。
<P style="font-size:20pt; color:red">这个Style定义<p></p>里面的文字是20pt字体，字体颜色是红色。</p>
内部样式表(Internal Style Sheet)
内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。
<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了Style。</H1>
<H1>这个标题没有使用Style。</H1>
</BODY>
</HTML>
内部样式表(Internal Sytle Sheet)要用到Style这个Tag，写法如下：
<STYLE type="text/css">
......
</STYLE>
外部样式表(External Style Sheet)
如果很多网页需要用到同样的样式(Styles)，用什么方法呢？
将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
比如可以用文本编辑器(NotePad)建立一个叫home的文件，文件后缀不要用.txt，改成.css。文件内容如下：
H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}然后你建立一个网页，代码如下：
<HTML>
<HEAD>
<link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了Style。</H1>
<H1>这个标题没有使用Style。</H1>
</BODY>
</HTML>
使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点：
- 样式代码可以复用。一个外部CSS文件，可以被很多网页共用。
- 便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。
- 提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。
串联(Cascading)
CSS第一个字母，是Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。
Cascading的顺序是：
- 浏览器缺省(browser default)(优先级最低)
- 外部样式表(Extenal Style Sheet)
- 内部样式表(Internal Style Sheet)
- 内嵌样式表(Inline Style)(优先级最高)
样式(Styles)的优先级依次是内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。假设内嵌(Inline)样式中有font-size:30pt, 而内部(Internal)样式中有font-size:12pt，那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。
CSS语法
基本语法
一个样式(Style)的语法由三部分构成：Selector(中文叫选择器有点怪怪的，就用英文吧)，属性(Property)，属性值(Value)。
selector {property: value}举个例子，下面的代码p就是selector，color就是属性，blue就是属性值。
p {color:blue}HTML中所有的Tag都可以作为selector。
注：如果你想为Style加多个属性，在两个属性之间要用分号加以分隔。下面的Style就包含2个属性，一个是对齐方式居中，一个字体颜色为红，当中用分号分隔开。
p {text-align:center;color:red} 为了提高Style代码的可读性，你也可以分行写：
p
{text-align: center;
color: black;
font-family: arial
}
组合(Grouping)
你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。
h1,h2,h3,h4,h5,h6
{color: red
}
上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。
Class Selector
利用Class Selector，你可以用同样的HTML Tag构成不同的样式。比如说，你希望段落<p>有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式：
p.right {text-align:right}p.center {text-align:center}其中right和center就是两个class。然后你就可以引用这两个class，示例代码如下：
<p class="center">这一段居中显示。</p>
<p class="right">这一段是居右显示。</p>
你也可以不用HTML Tag，直接用.加上Class名称作为一个Selector。示例代码如下：
.center {text-align: center} 这种通用的Class Selector就没有Tag的局限性，可以用于不同的Tag。比如：
<h1 class = "center">这个标题居中显示。</h1>
<p class = "center">这个段落居中显示。</p>
Contextual Selector
你可以为嵌入其它Tag的Tag定义样式，示例代码如下：
p em{color: red}Em这个Tag嵌套在P里面。p em就叫做Contextual Selector，定义嵌套于P里的Em的样式。这个例子表示，在P里面的用Em这个Tag标记的字体颜色是红色。
CSS注释
为了方便你自己或者他人日后更好地理解你的CSS代码，你可以写CSS代码注释。CSS代码注释以/*开头，以*/结束。
/* 段落样式 */
p
{text-align: center;
/* 居中显示 */
color: black;
font-family: arial
}CSS字体属性
字体名称属性(font-family)
这个属性设定字体名称，如Arial, Tahoma, Courier等。例句如下：
.s1 {font-family:Arial}字体大小属性(font-size)
这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px(pixel)。例句如下：
.s2 {font-size:16pt}字体风格属性(font-style)
这个属性有三个值可选：normal, italic, oblique。normal是缺省值，italic, oblique都是斜体显示。例句如下：
.s1 {font-sytle:italic}字体浓淡属性(font-weight)
这个属性常用值是normal和bold，normal是缺省值。例句如下：
<p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。<p>字体变量属性(font-variant)
这个属性有两个值，normal和small-caps，normal是缺省值。small-caps表示小的大写字体。例句如下：
.s1 {font-variant:small-caps}字体属性(font)
这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。例句如下：
.s1 {font:italic normal bold 11pt arial}字体颜色(color)
字体颜色用CSS中的color属性来表示。参见CSS常用文本属性。
CSS常用文本属性
文本对齐属性(text-align)
这个属性用来设定文本的对齐方式。有以下值：
- left (居左，缺省值)
- right (居右)
- center (居中)
- justify (两端对齐)
示例代码如下：
.p2 {text-align:right}文本修饰属性(text-decoration)
这个属性主要设定文本划线的属性。有以下值：
- none (无，缺省值)
- underline (下划线)
- overline (上划线)
- line-through (当中划线)
示例代码如下：
.p2 {text-decoration: underline}文本缩进属性(text-indent)
这个属性设定文本首行缩进。其值有以下设定方法：
- length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
- percentage (百分比，相当于父对象宽度的百分比)
示例代码如下：
.p1 {text-indent: 8mm}行高属性(line-height)
这个属性设定每行之间的距离。其值有以下设定方法：
- normal (缺省值)
- length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))
- percentage (百分比，相当于父对象高度的百分比)
示例代码如下：
.p1 {line-height:1cm}字间距属性(letter-spacing)
这个属性用来设定字符之间的距离。
- normal (缺省值)
- length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
示例代码如下：
.p1 {letter-spacing: 3mm}颜色属性(color)
用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTML Color Reference)。示例代码如下：
.p1{color:gray}CSS背景属性
背景颜色属性(background-color)
这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。
body {background-color:#99FF00;}上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
背景图片属性(background-image)
这个属性为HTML元素设定背景图片，相当于HTML中background属性。
<body style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代码为Body这个HTML元素设定了一个背景图片。
背景重复属性(background-repeat)
这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。
- repeat-x 背景图片横向重复
- repeat-y 背景图片竖向重复
- no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}上面的代码表示图片竖向重复。
背景附着属性(background-attachment)
这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}上面的代码表示图片固定不动，不随内容滚动而动。
背景位置属性(background-position)
这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。
背景属性(background)
这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
CSS边框属性
边框风格属性(border-style)
这个属性用来设定上下左右边框的风格，它的值如下：
- none (没有边框，无论边框宽度设为多大)
- dotted (点线式边框)
- dashed (破折线式边框)
- solid (直线式边框)
- double (双线式边框)
- groove (槽线式边框)
- ridge(脊线式边框)
- inset (内嵌效果的边框)
- outset (突起效果的边框)
演示示例：分别使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS边框风格属性示例
边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度，它的值如下：
- medium (是缺省值)
- thin (比medium细)
- thick (比medium粗)
- 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
演示示例：分别用medium, thin, thick和长度单位定制的CSS边框宽度属性示例
边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。例句如下：
.d5 {border-color:gray;border-style:solid;}边框属性(border)
这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下：
.d1 {border:5px solid gray;}单边边框属性
上下左右四个边框不但可以统一设定，也可以分开设定。
设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。
设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。
设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。
CSS边距属性
边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。
左边距属性(margin-left)
这个属性用来设定左边距的宽度。示例如下：
.d1{margin-left:1cm}右边距属性(margin-right)
这个属性用来设定右边距的宽度。示例如下：
.d1 {margin-right:1cm}演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-right即可。
上边距属性(margin-top)
这个属性用来设定上边距的宽度。示例如下：
.d1 {margin-top:1cm}演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-top即可。
下边距属性(margin-bottom)
这个属性用来设定下边距的宽度。示例如下：
.d1{margin-bottom:1cm}演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-bottom即可。
边距属性(margin)
这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。
你可以为上下左右边距设置相同的宽度。示例入下：
.d1 {margin:1cm}你也可以分别设置边距，顺序是上，右，下，左。示例如下：
.d1 {margin:1cm 2cm 3cm 4cm}上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。
CSS间隙属性
间隙属性(padding)是用来设置元素内容到元素边界的距离。
左间隙属性(padding-left)
这个属性用来设定左间隙的宽度。示例如下：
.d1{padding-left:1cm}右间隙属性(padding-right)
这个属性用来设定右间隙的宽度。示例如下：
.d1 {padding-right:1cm}演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-right即可。
上间隙属性(padding-top)
这个属性用来设定上间隙的宽度。示例如下：
.d1 {padding-top:1cm}演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-top即可。
下间隙属性(margin-bottom)
这个属性用来设定下间隙的宽度。示例如下：
.d1{padding-bottom:1cm}演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-bottom即可。
间隙属性(padding)
这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。
你可以为上下左右间隙设置相同的宽度。示例入下：
.d1 {padding:1cm}你也可以分别设置间隙，顺序是上，右，下，左。示例如下：
.d1 {padding:1cm 2cm 3cm 4cm}上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。
CSS盒子模式(Box Model)
CSS 中有个重要的概念，就是盒子模式 (Box model)。
胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。
先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。
盒子里由外至里依次是：
- margin 边距
- border 边框
- padding 间隙 (也有人称做补丁)
- content (内容，比如文本，图片等)
CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
CSS 边框属性 (border) 用来设定一个元素的边线。
CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。
CSS 背景属性指的是 content 和 padding 区域。
CSS 属性中的 width 和 height 指的是 content 区域的宽和高。
CSS列表样式属性
列表样式类型属性(list-style-type)
这个属性用来设定列表项标记(list-item marker)的类型。有以下值：
- disc (缺省值，黑圆点)
- circle (空心圆点)
- square (小黑方块)
- decimal (数字排序)
- lower-roman (小写罗马字排序)
- upper-roman (大写罗马字排序)
- lower-alpha (小写字母排序)
- upper-alpha (大写字母排序)
- none (无列表项标记)
以disc,circle,square,none作为列表项标记的列表示例
以decimal,lower-roman,upper-roman,lower-alpha,upper-alpha作为列表项标记的列表示例
列表样式位置属性(list-style-position)
列表样式位置属性(list-style-position)有两个值：
- outside (以列表项内容为准对齐)
- inside (以列表项标记为准对齐)
列表样式图片属性(list-style-image)
列表项标记可以用图片来表示，用列表样式图片属性(list-style-image)来设定图片。示例代码如下：
ul {list-style-image: url(../images/css_tutorials/dot02.gif)}列表样式属性(list-style)
这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type)，列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。示例代码如下：
ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}CSS伪类(pseudo-class)
和一般的CSS语法不同(参见CSS语法)，CSS伪类的语法有两种。
第一种：
selector:pseudo-class {property: value} 例句：
a:link {color:red}第二种：
selector.class:pseudo-class {property: value}例句：
a.c1:link {color:red}锚(a)伪类
锚(a)伪类是最常用的伪类。例句如下：
a:link {color: #FF0000} /* 未被访问的链接 红色 */a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */也可以用HTML的class属性来设定伪类。例句如下：
a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。
CSS属性参考
该CSS属性参考是根据W3C的CSS2标准的属性参考说明和微软的CSS属性参考说明整理而成。两者有差异处，如默认值，则以Internet Explorer 的效果为准。
W3C 参考来源： W3C CSS2 Property Index
微软 参考来源：微软MSDN中的CSS Reference
颜色和背景属性(Color and background properties)
该CSS属性用来设定前景色，通常用于设定元素的字体颜色。
该CSS属性是一个复合属性，是5个背景属性 background-color, background-image, background-repeat, background-attachment 和 background-position 的综合快捷写法。
该CSS属性用来设定背景图片是否随文档一起滚动。
该CSS属性用来设定对象的背景颜色。
该CSS属性用来设定元素的背景图片。
该CSS属性用来设定背景图片的位置。
该CSS属性用来设定背景图片是否重复平铺。
字体属性(Font properties)
该CSS属性是各种字体属性的一种快捷的综合写法。
该CSS属性用来设定所用字体的名称。
该CSS属性用来设定字体的大小。
设定字体风格是斜体，正常，或是倾斜。
该CSS属性用来设定字体是正常显示，还是以小型大写字母显示。
该CSS属性用来设定字体的浓淡程度。
文本属性(Text properties)
该CSS属性用来设定文本的书写顺序。
该CSS属性用来设定字符间距。
该CSS属性用来设定行间距。
该CSS属性用来设定文本的水平对齐方式。
该CSS属性用来审定文本的修饰效果，如上划线，下划线等。
该CSS属性用来设定文本块中第一行的缩进。
该CSS属性用来设定字体的大小写转换。
该CSS属性用来设定垂直对齐方式。
该CSS属性用来处理空白。
该CSS属性用来设定词与词之间的空间。
布局属性(Layout properties)
该CSS属性用来设定边框宽度，风格和颜色。
该CSS属性用来设定下边框宽度，风格和颜色。
该CSS属性用来设定下边框的颜色。
该CSS属性用来设定下边框的风格。
该CSS属性用来设定下边框的宽度。
该CSS属性用来设定表格的行和列的边框是合并成单边框，还是分别有各自的边框。
该CSS属性用来设定边框的颜色。
该CSS属性用来设定左边框宽度，风格和颜色。
该CSS属性用来设定左边框的颜色。
该CSS属性用来设定左边框的风格。
该CSS属性用来设定左边框的宽度。
该CSS属性用来设定右边框宽度，风格和颜色。
该CSS属性用来设定右边框的颜色。
该CSS属性用来设定右边框的风格。
该CSS属性用来设定右边框的宽度。
该CSS属性用来设定边框的风格。
该CSS属性用来设定上边框宽度，风格和颜色。
该CSS属性用来设定上边框的颜色。
该CSS属性用来设定上边框的风格。
该CSS属性用来设定上边框的宽度。
该CSS属性用来设定边框的宽度。
该CSS属性用来设定边距的宽度。
该CSS属性用来设定下边距的宽度。
该CSS属性用来设定左边距的宽度。
该CSS属性用来设定右边距的宽度。
该CSS属性用来设定下边距的宽度。
该CSS属性用来设定间隙的宽度。
该CSS属性用来设定下间隙的宽度。
该CSS属性用来设定左间隙的宽度。
该CSS属性用来设定右间隙的宽度。
该CSS属性用来设定上间隙的宽度。
分类属性(Classification properties)
该CSS属性用来设定对象如何显示。
该CSS属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设置列表样式类型属性 (list-style-type)，列表样式位置属性 (list-style-position) 和列表样式图片属性 (list-style-image) 。
该CSS属性用来设定列表样式图片标记的地址。
该CSS属性用来设定列表样式标记的位置。
该CSS属性用来设定列表项标记(list-item marker)的类型。
CSS长度单位参考
在CSS样式表中，我们经常会看到pt， px，em，ex，in等这类长度单位。它们各是什么意思，有什么区别呢？
在CSS样式表中，长度单位分两种：
- 相对长度单位，如px, em等
- 绝对长度单位，如pt,mm等
也谈px和pt的区别
经常看到有人拿px和pt比较，主要是为了争辩在确定字体大小(font-size)或其它CSS属性大小时，用什么样的CSS长度单位更加好。有人说，用pt更好，因为pt是绝对长度单位，不会因为屏幕分辨率大小，或者其它因素而改变。
我去做了一个测试，写了这样一个HTML例子。代码如下：
<html>
<head><title>CSS单位长度区别 - px和pt的区别</title></head>
<body >
<p style = "font-size:20pt;">Font-size is 20pt</p>
<p style = "font-size:20px;">Font-size is 20px</p>
</body>
</html>
我将我的显示器分别调到1024*768和800*600的分辨率(指screen resolution)。不管是用pt还是用px设置的字体，都随着分辨率变化而变化。(我使用的浏览器是IE6，其它浏览器上尚未测试过。)
我又写了另外一个HTML例子，测试一下cm(厘米)。代码如下：
<html>
<head><title>CSS长度单位的区别 - pt,px和cm的区别</title></head>
<body >
以下div宽度300pt，高度30pt： <br>
<div style = "width:300pt;height:30pt;border:1px solid blue;"></div>
以下div宽度300px，高度30px：<br>
<div style = "width:300px;height:30px;border:1px solid blue;"></div>
以下div宽度10cm，高度3cm： <br>
<div style = "width:10cm;height:3cm;border:1px solid blue;"></div>
</body>
</html>
结果是，cm(厘米)也是随着显示器分辨率变化而变化的。
对于计算机的屏幕设备而言，像素(Pixel)或者说px是一个最基本的单位，就是一个点。其它所有的单位，都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候，都统一先换算成为像素的多少，然后进行显示。所以，就计算机的屏幕而言，相对长度和绝对长度没有本质差别。任何单位其实都是像素，差别只是比例不同。
如果把讨论扩展到其它输出设备，比如打印机，基本的长度单位可能不是像素，而是其它的和生活中的度量单位一致的单位了。
CSS绝对长度单位是对于输出设备(output device)而言的。拿pt来说，这是一个在文字排版工具(word,adobe等)中非常常用的字体单位，不管你的显示器分辨率是1024*768，还是800*600，同一篇文档打印在纸面上的结果是一样的。
写网页用哪个长度单位更好，是px还是pt呢？
我个人比较偏向px，因为px能够精确地表示元素在屏幕中的位置和大小，网页主要是为了屏幕显示，而不是为了打印等其它需要的。
CSS相对长度单位(relative length unit)
CSS相对长度单位中的相对二字，表明了其长度单位会随着它的参考值的变化而变化，不是固定的。
以下是CSS相对长度单位列表：
| CSS相对长度单位 | 说明 |
| em | 元素的字体高度The height of the element's font |
| ex | 字母x的高度The height of the letter "x" |
| px | 像素Pixels |
| % | 百分比Percentage |
CSS绝对长度单位(absolute length unit)
绝对长度单位是一个固定的值。比如我们常用的有mm，就是毫米的意思。
以下是CSS绝对长度单位列表：
| CSS绝对长度单位 | 说明 |
| in | 英寸Inches (1 英寸 = 2.54 厘米) |
| cm | 厘米Centimeters |
| mm | 毫米Millimeters |
| pt | 点Points (1点 = 1/72英寸) |
| pc | 皮卡Picas (1 皮卡 = 12 点) |
