站长论坛

20z站长论坛

 找回密码
 立即注册
查看: 1223|回复: 1

[站长杂谈] 制作网页中常用的CSS定位单位

[复制链接]
GMT+8, 2019-10-22 14:25 | 显示全部楼层 |阅读模式
  CSS常用的单位综述。CSS的主要功能之一就是CSS定位,这个定位的概念即包括位置的定位,也包括尺寸的定位。无论哪一种,都需要使用长度单位,不然,精确定位就无从谈起。
  
  在CSS中,长度是一种度量尺寸,用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。
  
  1.定义长度
  
  在Dreamweaver4中要定义长度,首先应该在所选择的选项后面的文本框中写符号部分,这个符号可以是“+”(正号),表示正长度值,也可以是“-”(负号),表示负长度值。如果不写符号,那么默认值是“+”。在符号后紧接着是一个数值,这个数值可以是整数,也可以是小数。然后再在该选项的长度单位下拉列表框中选择一种长度单位。长度单位一般是一个由两个字母组成的单位缩写,例如cm,pt,em等。
  
  2.绝对长度单位
  
  网页定义上常常使用的绝对长度值由厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派卡(pc)等等。
  
  单位英寸(in)厘米(cm)毫米(mm)磅(pt)派卡(pc)
  
  英寸1.02.5425.4726
  
  派卡0.166670.42334.233121.0
  
  厘米0.393711028.34644.7244
  
  毫米0.039370.11.02.834640.47244
  
  磅0.013890.03528060.3528061.00.83333
  
  绝对长度值的使用范围比较有限,只有在完全知道外部输出设备的具体情况下,才使用绝对长度值。也就是说,绝对长度值最好用于打印机输出设备,而在仅仅作为屏幕显示时,使用绝对长度值意义不大,应该尽量使用相对长度值。knowsky.com
  
  3.相对长度值
  
  每一个浏览器都有其自己默认的通用尺寸标准,这个标准可以由系统决定,也可以由用户按照自己的爱好进行设置。因此,这个默认值尺寸往往是用户觉得最适合的尺寸。于是使用相对长度值,就可以是需要定义尺寸的元素按照默认大小为标准,相应地按比例缩放。这样就不可能产生难以辨认的情况。其实,百分比单位以及关键字都能产生相类似的效果。
  
  CSS还支持下列三种长度的相对单位:em(当前字体中字母M的宽度)、ex(当前字体中字母X的高度)、px(一个象素的大小)。
  
  使用em和ex的目的就是为所给的字体设置合适的宽度,而没有必要知道字体有多大,在显示时,可通过比较当前字体中的M和X来确定。字体越大,所对应的em和ex也就越大。
  
  以象素为单位的长度是相对于显示器上的象素(或许为方形)的高度和宽度。影像的宽度和高度经常是以象素给出的。象素测量法通常不是个好方法。首先,象素的大小依分辩率变化较大,大多数用户都会将显示器设置成尽可能高的分辩率,从而导致象素太小,而无法阅读。
  
  二、百分比单位
  
  在Dreamweaver4中要使用百分比,首先应该在所选择的选项后面的文本框中写符号部分,这个符号可以是“+”(正号),表示正长度值,也可以是“—”(负号),表示负长度值。如果不写符号,那么默认值是“+”。在符号后紧接着是一个数值,符号后面可以输入任意值,但是由于在某些情况下,浏览器不能处理带小数的百分数,因此最好不用带小数的百分比。然后再在该选项的长度单位下拉列表框中选择“%”。
  
  百分比总是相对于另一个值来说的。那个值可以是长度单位或是其他的。每一个可以使用百分比值单位指定的属性同时也自定义了这个百分比值的参照值。大多数情况下,这个参照值是此元素本身的字体大小。
  
  三、颜色单位
  
  大量地使用图片可能会使网页富有生气。但是,每一个上过网的人都有为等待一个图片而焦急不安的经历。其实,适当地在不同的部位使用不同的颜色,也能起到类似图片的效果,把读者的注意力吸引到关键的部分,然而,下载网页的时间却大幅度地减少了。
  
  color属性用来定义一个元素的前景颜色,在大多数情况下,这个元素中所包含的使文本对象。使用color属性同时还可以用来决定一个元素边框的颜色。通用的定义颜色的语法是:color:颜色值。
  
  定义颜色值最简单也最直接的方法是使用百分比值。在这种情况下,红、绿、蓝颜色值的等级用百分比数来确定。格式是:color:rgb(R%,G%,B%)。使用百分比值来指定颜色还有一个好处是它能够声明一组真正的数字,不论它的值是多少。
  
  指定颜色的另一种方法是使用范围在0~255之间的整数来设置。格式是color:rgb(128,128,128)。
  
  定义颜色的第三种方法是使用十六进制数组定义颜色。这种定义的方法对于经常进行程序设计的人来说比较熟悉。定义颜色时使用三个前后按顺序排列的十六进制数组表示,例如“#FC0EA8”。这种定义的方式就是形如#RRGGBB的格式。即在红、绿、蓝的位置上添上需要的十六进制值。
  
  定义颜色最后一种方法也最简单的方法是指定颜色的名称。例如如下所示的代码指定文本的颜色为紫色。
  
  在Dreamweaver4中,可以单击颜色选择器的图标,从打开的颜色选择器中选择一种合适的颜色。

相关帖子

GMT+8, 2019-10-22 14:25 | 显示全部楼层
css定位呀
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

二十站网

关于20站| 联系我们| 20Z网址导航| 20z站长论坛 ( 闽ICP备13002936号 )

GMT+8, 2019-10-22 14:25 , Processed in 0.107025 second(s), 20 queries .

Powered by Discuz! X3.1

© 2012-2019 bbs.20z.com

快速回复 返回顶部 返回列表