CSS中常用的单位

天下言公

天下言公

2016-01-29 11:59

CSS中常用的单位,CSS中常用的单位
 

一、长度单位

长度单位是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 

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

 3.相对长度值

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

使用em和ex的目的就是为所给的字体设置合适的宽度,而没有必要知道字体有多大,在显示时,可通过比较当前字体中的M和X来确定。字体越大,所对应的em和ex也就越大。
 
以象素为单位的长度是相对于显示器上的象素(或许为方形)的高度和宽度。影像的宽度和高度经常是以象素给出的。象素测量法通常不是个好方法。首先,象素的大小依分辩率变化较大,大多数用户都会将显示器设置成尽可能高的分辩率,从而导致象素太小,而无法阅读。
 
二、百分比单位

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

三、颜色单位

大量地使用图片可能会使网页富有生气。但是,每一个上过网的人都有为等待一个图片而焦急不安的经历。其实,适当地在不同的部位使用不同的颜色,也能起到类似图片的效果,把读者的注意力吸引到关键的部分,然而,下载网页的时间却大幅度地减少了。

color属性用来定义一个元素的前景颜色,在大多数情况下,这个元素中所包含的使文本对象。使用color

展开更多 50%)
分享

猜你喜欢

CSS中常用的单位

Html CSS布局 Div+CSS XHTML
CSS中常用的单位

CSS网页制作教程:网页中常用的web安全字体

Web开发
CSS网页制作教程:网页中常用的web安全字体

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页中常用的19个WEB安全字体及CSS写法

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页中常用的19个WEB安全字体及CSS写法

CSS 长度单位参考

Web开发
CSS 长度单位参考

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

常用CSS

Web开发
常用CSS

程序中常用的种代码

Web开发
程序中常用的种代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

PSV《高达破坏者2》各武器模组分析推荐介绍

PSV《高达破坏者2》各武器模组分析推荐介绍

使用 MFC 编写打印程序

使用 MFC 编写打印程序
下拉加载更多内容 ↓