2022年CSS中常用的单位CSSHTML教程.docx

2022年CSS中常用的单位CSSHTML教程一、长度单位 长度单位是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也就越大。以象素为单位的长度是相对于显示器上的象素(或许为方形)的高度和宽度。影像的宽度和高度常常是以象素给出的。象素测量法通常不是个好方法。首先，象素的大小依分辩率改变较大，大多数用户都会将显示器设置成尽可能高的分辩率，从而导致象素太小，而无法阅读。二、百分比单位在Dreamweaver 4中要运用百分比，首先应当在所选择的选项后面的文本框中写符号部分，这个符号可以是“+”（正号），表示正长度值，也可以是“”（负号），表示负长度值。假如不写符号，那么默认值是“+”。在符号后紧接着是一个数值，符号后面可以输入随意值，但是由于在某些状况下，阅读器不能处理带小数的百分数，因此最好不用带小数的百分比。然后再在该选项的长度单位下拉列表框中选择“%”。百分比总是相对于另一个值来说的。那个值可以是长度单位或是其他的。每一个可以运用百分比值单位指定的属性同时也自定义了这个百分比值的参照值。大多数状况下，这个参照值是此元素本身的字体大小。三、颜色单位大量地运用图片可能会使网页富有生气。但是，每一个上过网的人都有为等待一个图片而着急担心的经验。其实，适当地在不同的部位运用不同的颜色，也能起到类似图片的效果，把读者的留意力吸引到关键的部分，然而，下载网页的时间却大幅度地削减了。color属性用来定义一个元素的前景颜色，在大多数状况下，这个元素中所包含的使文本对象。运用color属性同时还可以用来确定一个元素边框的颜色。通用的定义颜色的语法是：color：颜色值。定义颜色值最简洁也最干脆的方法是运用百分比值。在这种状况下，红、绿、蓝颜色值的等级用百分比数来确定。格式是：color:rgb(R%,G%,B%)。运用百分比值来指定颜色还有一个好处是它能够声明一组真正的数字，不论它的值是多少。指定颜色的另一种方法是运用范围在0255之间的整数来设置。格式是color:rgb(128,128，128)。定义颜色的第三种方法是运用十六进制数组定义颜色。这种定义的方法对于常常进行程序设计的人来说比较熟识。定义颜色时运用三个前后按依次排列的十六进制数组表示，例如“#FC0EA8”。这种定义的方式就是形如#RRGGBB的格式。即在红、绿、蓝的位置上添上须要的十六进制值。定义颜色最终一种方法也最简洁的方法是指定颜色的名称。例如如下所示的代码指定文本的颜色为紫色。在Dreamweaver 4中，可以单击颜色选择器的图标，从打开的颜色选择器中选择一种合适的颜色。四、URL单位URL单位和链接的地址有关。所谓URL就是“Uniform Resource Locator”的简写，链接是网页的灵魂。通过链接的方式可以使各个网页之间联接起来，使网站中众多的页面构成一个有机整体，使访问者能够在各个页面之间跳转。链接可以是一段文本，一幅图像或其他网页元素，当在阅读器中用鼠标单击这些对象时，阅读器可以依据其指示载入一个新的页面或者跳转到页面的其他位置。在创建链接的过程中，路径是特别重要的。Dreamweaver 4中有两种路径：肯定路径和相对路径，其中相对路径可分为和根书目相对的路径及和文当相对的路径。肯定路径时含服务器协议（在网页上通常是http:/或ftp:/）的完全路径。肯定路径包含的是精确位置而不用考虑源文档的位置。但是假如目标文档被移动，则链接无效。创建对当前站点以外文件的链接时必需运用肯定路径。和根书目相对的路径总是从当前站点的根书目起先。站点上的全部可以公开的文件都存放在站点的根书目下。和根书目相对的路径运用斜杠告知服务器从根书目起先。例如，/ Dreamweaver /index.html将链接到站点根书目Dreamweaver文件夹的index.html文件。假如要在内容常常被移动的环境中链接文件，那么运用和根书目相对的路径往往是最佳的方法。在运用与根书目相对的路径时，包含链接的文档在站点内移动，链接不会中断。但是，和根书目相对的路径和适合于本地查看站点，在这种状况下，可以运用和文档相对的路径。留意：当在阅读器中根据本地方式预览文件时，和根书目相对的路径所链接的内容不会出现。这是因为阅读器不能像服务器那样识别站点根书目，要预览和根书目相对的路径所链接的内容，必需将文件放置到远程服务器并从那里进行查看。和文档相对的路径是指和当前文档所在的文件夹相对的路径。例如文档test.swf在文件夹Flash中，它指定的就是当前文件夹内的文档。/test.swf指定的则是当前文件夹上级书目中的文档；而/test/test.swf指定是 Flash文件夹下test文件夹中的test.swf文档。和文档相对的路径通常是最简洁的路径，可以用来链接总是和当前文档在同一文件夹中的文件。留意：在创建和文档相对的路径之前必需保存新文件，因为在没有定义起始点的状况下，和文档相对的路径是无效的。在文档保存之前，Dreamweaver 4会自动运用以File:/起先的肯定路径。（出处：