CSS中常用的单位

2016-01-29 11:59 3 1 收藏

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

【 tulaoshi.com - Html 】

 

一、长度单位

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

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

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

 3.相对长度值

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

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

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

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

三、颜色单位

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

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

来源:http://www.tulaoshi.com/n/20160129/1484150.html

延伸阅读
标签: PS 快捷键
文件菜单下的快捷键 新建 CTRL+N 打开 CTRL+O 打开为 ALT+CTRL+O 关闭 CTRL+W 保存 CTRL+S 另存为 CTRL+SHIFT+S 另存为网页格式 CTRL+ALT+S 打印设置 CTRL+ALT+P 页面设置 CTRL+SHIFT+P 打印 CTRL+P 退出 CTRL+Q 编辑菜单下的快捷键 撤消 CTRL+Z 向前一步 CTRL+SHIFT+Z ...
标签: Web开发
1. Block和inline元素对比 所有的HTML元素都属于block和inline之一。 block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度 div, p, h1, form, ul 和 li是块元素的例子。 相反地,inline元素的特点是: 和其他元素都在一行上; 高,行高及顶和底边距不可改变; ...
标签: Web开发
$(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”#msg”).text(); //返回id为msg的元素节点的文本内容。 $(”#msg”).text(”new content“); //将“new content” 作为普通文本串写入id为msg的...
标签: Web开发
事件处理 ready(fn) 代码: $(document).ready(function(){   // Your code here... }); 作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。 bind(type,[data],fn) 代码: $("p").bind(&q...
/* 豆腐制作,都是精品 http://www.asp888.net 豆腐技术站 如转载 请注明版权信息 */ 在ASP+中,我们要使用MS 给我们提供的 众多的功能,必须引用和功能相应的 NameSpace(命名空间), 豆腐在这里给大家 大致 列出了一些 经常会 用到的 一些 NameSpaces,比如:FileSystem,Ado+ 等等 FileSystemObject (文件操作) <%@ IMPORT Namespace="System.I...

经验教程

543

收藏

9
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部