kernel_Notes/Zim/Web-Design/CSS单位/2.txt

Content-Type: text/x-zim-wiki
Wiki-Format: zim 0.4
Creation-Date: 2011-05-13T21:30:44+08:00

===== CSS中常用的单位  =====
Created Friday 13 May 2011
http://blog.csdn.net/mdjlw/archive/2006/01/03/569633.aspx

===== 一、长度单位  =====

长度单位是Web页设计中最常用的一个单位。一个排列无序、杂乱无章的页面不可能给人们留下什么好的印象。于是，在设计的时候需要为元素的位置、尺寸精确地定义一些值，以使其达到预期的效果。 
CSS给予人们精确控制网页的能力，这一点为人们津津乐道。它允许人们定义**外观、尺寸、空间及其他的样式**。但是，CSS所给出的控制同时也是一个危险的东西，这不仅表现在设计者缺乏经验，更在于如何给出一个尺寸和空间值。为什么呢？因为一个设计者虽然能够决定某一个特殊的屏幕分辨率，但是不可能决定别人的大脑和别人的视力或者那些富有个性的自定义设置。 
CSS的主要功能之一就是CSS定位，这个定位的概念**即包括位置的定位，也包括尺寸的定位**。无论哪一种，都需要使用长度单位，不然，精确定位就无从谈起。 
在CSS中，长度是一种度量尺寸，用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。 

==== 1．定义长度  ====

在Dreamweaver 4中要定义长度，首先应该在所选择的选项后面的文本框中写符号部分，这个符号可以是“+”（正号），表示正长度值，也可以是“－”（负号），表示负长度值。如果不写符号，那么默认值是“+”。在符号后紧接着是一个数值，这个数值可以是整数，也可以是小数。然后再在该选项的长度单位下拉列表框中选择一种长度单位。**长度单位一般是一个由两个字母组成的单位缩写**，例如cm，pt，em等。 

==== 2．绝对长度单位  ====

网页定义上常常使用的绝对长度值由厘米（cm）、毫米（mm）、英寸（in）、点（pt）、派卡（pc）等等。 

单位		 英寸(in) 		厘米(cm) 		毫米(mm) 		磅(pt) 		派卡(pc) 
英寸 	1.0 			2.54 		25.4 			72 			6 
派卡 	0.16667 		0.4233 		4.233 			__12 __			1.0 
厘米 	0.3937 		1 			10 				28.3464 		4.7244 
毫米 	0.03937 		0.1 			1.0 				2.83464 		0.47244 
磅 		0.01389 		0.0352806 	0.352806 		1.0 			0.83333 

绝对长度值的使用范围比较有限，只有在完全知道外部输出设备的具体情况下，才使用绝对长度值。也就是说，__绝对长度值最好用于打印机输出设备__，而在仅仅作为屏幕显示时，使用绝对长度值意义不大，应该尽量使用相对长度值。 

==== 3．相对长度值  ====

每一个浏览器都有其自己默认的通用尺寸标准，这个标准可以由系统决定，也可以由用户按照自己的爱好进行设置。因此，这个默认值尺寸往往是用户觉得最适合的尺寸。__于是使用相对长度值，就可以是需要定义尺寸的元素按照默认大小为标准，相应地按比例缩放__。这样就不可能产生难以辨认的情况。其实，__百分比单位__以及关键字都能产生相类似的效果。 

CSS还支持下列三种长度的相对单位：em（当前字体中字母M的宽度）、ex（当前字体中字母X的高度）、px（一个象素的大小）。 

使用em和ex的目的就是为所给的字体设置合适的宽度，**而没有必要知道字体有多大**，在显示时，可通过比较当前字体中的M和X来确定。字体越大，所对应的em和ex也就越大。 

以象素为单位的长度是相对于显示器上的象素(或许为方形)的高度和宽度。**影像图片的宽度和高度经常是以象素给出**的。__象素测量法通常不是个好方法__。首先，象素的大小依分辩率变化较大，大多数用户都会将显示器设置成尽可能高的分辩率，从而导致象素太小，而无法阅读(其实对于一个给定的分辨率，以像素为单位是一个绝对单位长度，例如**把body设为900px时，当缩放窗口时网页内容并不相应缩放**)。 

==== 二、百分比单位  ====

在Dreamweaver 4中要使用百分比，首先应该在所选择的选项后面的文本框中写符号部分，这个符号可以是“+”（正号），表示正长度值，也可以是“—”（负号），表示负长度值。如果不写符号，那么默认值是“+”。在符号后紧接着是一个数值，符号后面可以输入任意值，但是由于在某些情况下，浏览器不能处理带小数的百分数，因此最好不用带小数的百分比。然后再在该选项的长度单位下拉列表框中选择“%”。 
百分比总是相对于另一个值来说的。那个值可以是长度单位或是其他的(取决于设置的属性或对象)。每一个可以使用百分比值单位指定的属性同时也自定义了这个百分比值的参照值。**大多数情况下，这个参照值是此元素父对象宽度或自身字体大小(自身没指定时，继承自父对象)**。 

==== 三、颜色单位  ====

大量地使用图片可能会使网页富有生气。但是，每一个上过网的人都有为等待一个图片而焦急不安的经历。其实，**适当地在不同的部位使用不同的颜色**，也能起到类似图片的效果，把读者的注意力吸引到关键的部分，然而，下载网页的时间却大幅度地减少了。 
color属性用来定义一个元素的前景颜色，在大多数情况下，这个元素中所包含的使文本对象。使用color属性同时还可以用来决定一个元素边框的颜色。通用的定义颜色的语法是：color：颜色值。 
定义颜色值最简单也**最直接的方法是使用百分比值**。在这种情况下，红、绿、蓝颜色值的等级用百分比数来确定。格式是：color:rgb(R%,G%,B%)。使用百分比值来指定颜色还有一个好处是它能够声明一组真正的数字，不论它的值是多少。 
指定颜色的**另一种方法是使用范围在0～255之间的整数来设置**。格式是color:rgb(128,128，128)。 
定义颜色的**第三种方法是使用十六进制数组定义颜色**。这种定义的方法对于经常进行程序设计的人来说比较熟悉。定义颜色时使用三个前后按顺序排列的十六进制数组表示，例如“#FC0EA8”。这种定义的方式就是形如#RRGGBB的格式。即在红、绿、蓝的位置上添上需要的十六进制值。 
定义颜色**最后一种方法也最简单的方法是指定颜色的名称**。例如如下所示的代码指定文本的颜色为紫色。 
在Dreamweaver 4中，可以单击颜色选择器的图标，从打开的颜色选择器中选择一种合适的颜色。 

==== 四、URL单位 ====
 

URL单位和链接的地址有关。所谓URL就是“Uniform Resource Locator”的简写，链接是网页的灵魂。通过链接的方式可以使各个网页之间联接起来，使网站中众多的页面构成一个有机整体，使访问者能够在各个页面之间跳转。**链接可以是一段文本，一幅图像或其他网页元素**，当在浏览器中用鼠标单击这些对象时，浏览器可以根据其指示载入一个新的页面或者跳转到页面的其他位置。 

在创建链接的过程中，路径是非常重要的。Dreamweaver 4中有两种路径：绝对路径和相对路径，其中相对路径可分为和__根目录相对的路径及和文档相对的路径__。 

__绝对路径时含服务器协议__（在网页上通常是http://%E6%88%96ftp://）的完全路径。绝对路径包含的是精确位置而不用考虑源文档的位置。但是如果目标文档被移动，则链接无效。创建对当前站点以外文件的链接时必须使用绝对路径。 

和根目录相对的路径__总是从当前站点的根目录开始__。站点上的所有可以公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠告诉服务器从根目录开始。例如，/ Dreamweaver /index.html将链接到站点根目录Dreamweaver文件夹的index.html文件。如果要在内容经常被移动的环境中链接文件，那么使用和根目录相对的路径往往是最佳的方法。在使用与根目录相对的路径时，包含链接的文档在站点内移动，链接不会中断。但是，和根目录相对的路径和适合于本地查看站点，在这种情况下，可以使用和文档相对的路径。 

注意：__当在浏览器中按照本地方式预览文件时，和根目录相对的路径所链接的内容不会出现__。这是因为浏览器不能像服务器那样识别站点根目录，要预览和根目录相对的路径所链接的内容，必须将文件放置到远程服务器并从那里进行查看。 

和文档相对的路径是指和当前文档所在的文件夹相对的路径。例如文档test.swf在文件夹Flash中，它指定的就是当前文件夹内的文档。…/test.swf指定的则是当前文件夹上级目录中的文档；而/test/test.swf指定是 Flash文件夹下test文件夹中的test.swf文档。和文档相对的路径通常是最简单的路径，可以用来链接总是和当前文档在同一文件夹中的文件。 

注意：在创建和文档相对的路径之前必须保存新文件，因为在没有定义起始点的情况下，和文档相对的路径是无效的。在文档保存之前，Dreamweaver 4会自动使用以File://开始的绝对路径。