读书频道 > web开发 > 其他综合 > CSS Web开发学习实录
1.6.1 基础知识——CSS中的单位
2013-03-19 13:32:44     我来说两句 
收藏    我要投稿   

本文所属图书 > CSS Web开发学习实录

CSS是用于控制网页样式,并允许将样式信息与网页内容分离的一种标记性语言。只需在CSS代码中做一些简单的修改,就可以改变同一页面中的不同部分,或者统一网站页面的外观和格式,例如颜色、边框、背景图片、透明...  立即去当当网订购

1.6  CSS中风格不一的文字

CSS既然要标识样式,就少不了使用数量词的形式表示物体的度量。当然,使用数量词就少不了单位。

平常我们生活中经常使用的单位有长度、重量、温度、时间、速度、面积、体积等很多种。而在Web页面中,我们只需要使用CSS样式在页面中展示一个平面图像即可,所以这里我们只需要表示一些长度、颜色之类的可视化信息。

下面我们就来了解一下CSS中的单位。

1.6.1  基础知识——CSS中的单位

CSS中的值一般可以分为几种:数值、字符串、常量、url等。

数值在CSS中一般指的是长度,是对页面中对象大小的说明;字符串一般是一些特定的值,例如字体等;常量一般指的就是一些特定的值了,比如颜色red、blue等;url就是指一个资源路径了。

其中最常见的也就是长度、颜色、url这几种单位了,另外还有一种比较特殊的长度单位就是百分比单位。

下面我们分别对它们进行介绍。

1. 长度单位

长度单位主要分为两种:相对长度单位和绝对长度单位。

相对长度单位主要有以下几种。

em:元素的字体的高度。

ex:相对于字母x的高度。

px:像素(Pixels)。该单位是相对于显示器分辨率的长度单位。因为计算机可视化界面都主要显示在显示器中,所以px是计算机中最常用的长度单位。同样在Web页面中,px也是最常用的单位。

我们在页面中定义元素的宽度和高度经常会使用px作单位,例如下面代码:

div {
 width:350px;
 height:80px;
}

 

有一个百分比长度单位,也算是一个相对单位。因为其比较特殊,我们将会单独对它进行讲解。

绝对长度单位有以下几种。

in:英寸Inches。1英寸相当于25.4毫米。

cm:厘米(Centimeters)。

mm:毫米(Millimeters)。

pt:点(Points)。1点相当于1/72英寸。

pc:皮卡(Picas)。这个是打印机使用的字体大小。

绝对长度单位视输出介质而定,所以在Web页面中使用起来很不方便。

绝对单位的换算关系:1in = 6pc = 72pt = 25.4mm = 2.54cm

2. 百分比单位

百分比单位是一个比较特殊的长度单位。一般它指定的是当前元素本身相对于父级元素的大小。

比如我们经常会在表格的同一行的单元格中使用该单位,以便使同一行的单元格能等比地均分表格的宽度。代码如下:
<table style="width:100px;">
<tr>
 <td style="width:30%;">&nbsp;</td>
 <td style="width:70%;">&nbsp;</td>
</tr>
</table>

这样同一行中的两个单元格一个宽度为30%,一个宽度为70%。那么如果表格宽度为100像素,它们两个的宽度就分别为30像素和70像素;如果表格宽度为300像素,它们两个的宽度分别为90像素和210像素。

3. 颜色单位

颜色值有两种形式:使用关键字表示的常用颜色和使用RGB值表示的具体颜色值。

颜色关键字比较直观,比如代表红色的red、代表蓝色的blue、代表黄色的yellow和代表绿色的green。但是使用颜色关键字只能表示最常用的一些颜色,如果需要表示得更加丰富多彩,就可以使用RGB值的方式来表示颜色。

用RGB值表示颜色有4种方式。

#rrggbb:三个两位的十六进制无符号整数,取值范围在00~ff之间,如#e7cc5b。

#rgb:三个一位的十六进制无符号整数,取值范围在0~f之间,如#ce8,等同于第一种形式的#ccee88。

rgb(r,g,b) :括号中的r、g、b都是一个0~255的十进制整数。

rgb(r%,g%,b%):括号中的r、g、b都是一个0~100的十进制数字。
比如要表示蓝色,我们可以使用下面5种方式中的任意一种:
blue
rgb(0%,0%,100%)
rgb(0,0,255)
#00f
#0000ff

4. url

url是一个地址。

一个URL值的格式为

url(foo)

上面参数foo是一个URL(统一资源定位符),是一个资源的地址。该地址可以是绝对路径,也可以是相对路径。URL可以选择用单引号(')或者双引号(")引用,或者直接写进括号也可以。
例如要表示当前目录中的一个名为Logo.gif的图片资源,可以使用以下语句:
url(Logo.gif)

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.5.4 !important声明强制优先
下一篇:1.6.2 实例描述
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站