一、什么是Cascading Style Sheets(层叠样式表)
* CSS是Cascading Style Sheets(层叠样式表)的简称.
* CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
* 在标准网页设计中CSS负责网页内容(XHTML)的表现.
* CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
* 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.
* CSS是由W3C的CSS工作组产生和维护的
二、如何将样式表加入到网页
可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。
1、链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:
<head>
<title>文档标题</title>
<link rel=stylesheet href="http://www.dhtmlet.com/dhtmlet.css" type="text/css">
</head>
而在XML中,你应该如下例所示在声明区中加入:
<? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
2、定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 定义方式请参阅样式表语法。示例如下:
<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。
3、内联定义 (Inline Styles)
<Div style="margin-left: 0.5in; margin-right:0.5in">CSS内联定义</Div>
三、CSS的语法
CSS的定义是由三个部分构成:
选择符(selector), 属性(properties)和 属性的取值(value)。
语法: selector {property: value} (选择符 {属性:值})
四、选择符 Selectors
1、通配选择符 Universal Selector
语法:
* { sRules }
说明:
通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。
示例:
*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }
2、类型选择符 Type Selectors
语法:
E { sRules }
说明:
类型选择符。以文档语言对象(Element)类型作为选择符。
示例:
td { font-size:14px; width:120px; }
a { text-decoration:none; }
3、属性选择符 Attribute Selectors
语法:
1. E1[attr]
2. E1[attr=value]
3. E1[attr~=value]
4. E1[attr|=value]
说明:
1. 选择具有attr属性的E1
2. 选择具有attr属性且属性值等于value的E1
3. 选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E1。这里的value不能包含空格
4. 选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E1
目前IE5.5+尚不支持此种选择符。
示例:
h[title] { color: blue; }
/* 所有具有title属性的h对象 */
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }
3、包含选择符 Descendant Selectors
语法:
E1 E2
说明:
选择所有被E1包含的E2。即E1.contains(E2)==true。
示例:
table td { font-size:14px; }
div.sub a { font-size:14px; }
4、子对象选择符 Child Selectors
语法:
E1 > E2
说明:
选择所有作为E1子对象的E2。
目前IE5.5+尚不支持此种选择符。
示例:
body > p { font-size:14px; }
/* 所有作为body的子对象的p对象字体尺寸为14px */
div ul>li p { font-size:14px; }
5、ID选择符 ID Selectors
语法:
#sID
说明:
以文档目录树(DOM)中作为对象的唯一标识符的ID作为选择符。
示例:
#note { font-size:14px; width:120px;}
6、选择符分组 Grouping
语法:
E1,E2,E3
说明:
将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。
示例:
.td1,div a,body { font-size:14px; }
7、伪类与伪对象选择符 Pseudo Selectors
语法:
E : Pseudo-Classes { sRules }
E : Pseudo-Elements { sRules }
说明:
伪类及伪对象选择符。
伪类选择符。请参阅伪类( Pseudo-Classes )。
伪对象选择符。请参阅伪对象( Pseudo-Elements )。
示例:
div:first-letter { font-size:14px; }
a.fly :hover { font-size:14px; color:red; }
伪类
:link
:hover
:active
:visited
:focus
:first-child
:first
:left
:right
:lang
伪对象
:first-letter
:first-line
:before
:after
五、属性 Properties
1、字体 Font
属性 版本 兼容性 继承性 简介
font CSS1/2 IE4+ , NS4+ 有 复合属性。设置或检索对象中的文本特性
color CSS1 IE4+ , NS4+ 有 检索或设置对象的文本颜色
font-family CSS1 IE4+ , NS4+ 有 设置或检索用于对象中文本的字体名称序列
font-size CSS1 IE4+ , NS4+ 有 设置或检索对象中的字体尺寸
font-size-adjust CSS2 NONE 有 设置或检索用于对象中文本的字体名称序列是否强制使用同一尺寸
font-stretch CSS2 NONE 有 设置或检索用于对象中文本的文字是否横向的拉伸变形
font-style CSS1 IE4+ , NS4+ 有 设置或检索对象中的字体样式
font-weight CSS1 IE4+ , NS4+ 有 设置或检索对象中的文本字体的粗细
text-decoration CSS1 IE4+ , NS4+ 无 检索或设置对象中的文本的装饰,如下划线、闪烁等
text-shadow CSS2 NONE 无 设置或检索对象中文本的文字是否有阴影及模糊效果
font
语法:
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
参数:
该属性是复合属性。第一种声明方式请参阅各参数对应的属性。
第二种声明方式中的参数属于CSS2。
caption : 使用有标题的系统控件的文本字体(如按钮,菜单等)
icon : 使用图标标签的字体
menu : 使用菜单的字体
message-box : 使用信息对话框的文本字体
small-caption : 使用小控件的字体
status-bar : 使用窗口状态栏的字体
说明:
设置或检索对象中的文本特性。该属性是复合属性。
第一种声明方式参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
示例:
p { font: italic small-caps 600 12pts/18pts 宋体; }
p { font: italic small-caps 600 12pts/150% Courier; }
p { font: italic small-caps 600 12pts/1.5 Courier; }
p { font: italic small-caps 600 12pts/18pts Courier; }
p { font: /18pts serif; }
p { font: oblique 100 24pts; }
H1 { font: 15pt/17pt bold "Arial" normal }
2、文本 Text
属性 版本 兼容性 继承性 简介
text-indent CSS1 IE4+ , NS4+ 有 检索或设置对象中的文本的缩进
vertical-align CSS1/2 IE4+ , NS4+ 无 设置或检索对象内容的垂直对其方式
text-align CSS1 IE4+ , NS4+ 有 设置或检索对象中文本的对齐方式
direction CSS2 IE5+ 无 用于设置文本流的方向
unicode-bidi CSS2 IE5+ 无 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
vertical-align
语法:
vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length
参数:
baseline : 将支持valign特性的对象的内容与基线对齐
sub : 垂直对齐文本的下标
super : 垂直对齐文本的上标
top : 将支持valign特性的对象的内容与对象顶端对齐
text-top : 将支持valign特性的对象的文本与对象顶端对齐
middle : 将支持valign特性的对象的内容与对象中部对齐
bottom : 将支持valign特性的对象的文本与对象底端对齐
text-bottom : 将支持valign特性的对象的文本与对象顶端对齐
length : CSS2 由浮点数字和单位标识符组成的长度值 | 或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。目前IE5尚不支持。请参阅长度单位
说明:
设置或检索对象内容的垂直对其方式。
对应的脚本特性为verticalAlign。请参阅我编写的其他书目。
text-align
语法:
text-align : left | right | center | justify
参数:
left : 左对齐
right : 右对齐
center : 居中
justify : 两端对齐
说明:
设置或检索对象中文本的对齐方式。
unicode-bidi
语法:
unicode-bidi : normal | bidi-override | embed
参数:
normal : 对象不打开附加的嵌入层,对于内联要素,隐式重排序跨对象边界进行工作
embed : 对象打开附加的嵌入层,direction属性的值指定嵌入层,在对象内部进行隐式重排序
bidi-override : 严格按照direction属性的值重排序。忽略隐式双向运算规则
说明:
用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用。
假如您想应用direction属性于内联文本,您必须设定unicode-bidi属性为embed或bidi-override。
对应的脚本特性为unicodeBidi。
direction
语法:
direction : ltr | rtl | inherit
参数:
ltr : 文本流从左到右
rtl : 文本流从右到左
inherit : 文本流的值不可继承
说明:
用于设置文本流的方向。
假如您想应用direction属性于内联文本,您必须设定unicode-bidi属性为embed或bidi-override。
对应的脚本特性为direction。
3、背景 Background
属性 版本 兼容性 继承性 简介
background CSS1 IE4+ , NS4+ 无 复合属性。设置或检索对象的背景特性
background-attachment CSS1 IE4+ , NS6+ 无 设置或检索背景图像是随对象内容滚动还是固定的
background-color CSS1 IE4+ , NS4+ 无 设置或检索对象的背景颜色
background-image CSS1 IE4+ , NS4+ 无 设置或检索对象的背景图像
background-position CSS1 IE4+ , NS6+ 无 设置或检索对象的背景图像位置
background-repeat CSS1 IE4+ , NS4+ 无 设置或检索对象的背景图像是否及如何铺排
background-attachment
参数:
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
background-position
语法:
background-position : length || length
background-position : position || position
参数:
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
background-repeat
参数:
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
4、定位 Positioning
属性 版本 兼容性 继承性 简介
position CSS2 IE4+ , NS4+ 无 检索对象的定位方式
z-index CSS2 IE4+ , NS6+ 无 检索或设置对象的层叠顺序
top CSS2 IE4+ , NS4+ 无 检索或设置对象与其最近一个定位的父对象顶部相关的位置
right CSS2 IE5+ 无 检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom CSS2 IE5+ 无 检索或设置对象与其最近一个定位的父对象底边相关的位置
left CSS2 IE4+ , NS4+ 无 检索或设置对象与其最近一个定位的父对象左边相关的位置
position
语法:
position : static | absolute | fixed | relative
参数:
static : 无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
fixed : IE5.5及NS6尚不支持此属性
说明:
检索对象的定位方式。
5、尺寸 Dimensions
属性 版本 兼容性 继承性 简介
height CSS1 IE4+ , NS6+ 无 检索或设置对象的高度
max-height CSS2 NONE 无 设置或检索对象的最大高度
min-height CSS2 IE6+ 无 设置或检索对象的最小高度
width CSS1 IE4+ , NS6+ 无 检索或设置对象的宽度
max-width CSS2 NONE 无 设置或检索对象的最大宽度
min-width CSS2 NONE 无 设置或检索对象的最小宽度
6、布局 Layout
属性 版本 兼容性 继承性 简介
clear CSS1 IE4+ , NS4+ 无 该属性的值指出了不允许有浮动对象的边。
float CSS1 IE4+ , NS4+ 无 该属性的值指出了对象是否及如何浮动。
clip CSS2 IE4+ , NS6+ 无 检索或设置对象的可视区域。区域外的部分是透明的
overflow CSS2 IE4+ , NS6+ 无 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
display CSS1/2 IE4+ , NS4+ 无 设置或检索对象是否及如何显示
visibility CSS2 IE4+ , NS6+ 无 设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间
overflow
参数:
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
float
语法:
float : none | left |right
参数:
none : 对象不浮动
left : 对象浮在左边
right : 对象浮在右边
说明:
该属性的值指出了对象是否及如何浮动。请参阅clear属性。
当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。
对应的脚本特性为styleFloat。请参阅我编写的其他书目。
示例:
div { clear : left }
img { float: right }
7、外补丁 Margins
属性 版本 兼容性 继承性 简介
margin CSS1 IE4+ , NS4+ 无 检索或设置对象四边的外延边距
margin-top CSS1 IE4+ , NS4+ 无 检索或设置对象顶边的外延边距
margin-right CSS1 IE4+ , NS4+ 无 检索或设置对象右边的外延边距
margin-bottom CSS1 IE4+ , NS4+ 无 检索或设置对象底边的外延边距
margin-left CSS1 IE4+ , NS4+ 无 检索或设置对象左边的外延边距
8、轮廓 Outlines
属性 版本 兼容性 继承性 简介
outline CSS2 NONE 无 复合属性。设置或检索对象外的线条轮廓
outline-color CSS2 NONE 无 设置或检索对象外的线条轮廓的颜色
outline-style CSS2 NONE 无 设置或检索对象外的线条轮廓的样式
outline-width CSS2 NONE 无 设置或检索对象外的线条轮廓的宽度
9、边框 Borders
属性 版本 兼容性 继承性 简介
border CSS1 IE4+ , NS4+ 无 复合属性。设置对象边框的特性
border-color CSS1 IE4+ , NS6+ 无 设置或检索对象边框颜色
border-style CSS1 IE4+ , NS4+ 无 设置或检索对象边框样式
border-width CSS1 IE4+ , NS4+ 无 设置或检索对象边框宽度
border-top CSS1 IE4+ , NS6+ 无 复合属性。设置对象顶边的特性
border-top-color CSS2 IE4+ , NS6+ 无 设置或检索对象顶边颜色
border-top-style CSS2 IE4+ , NS6+ 无 设置或检索对象顶边样式
border-top-width CSS1 IE4+ , NS4+ 无 设置或检索对象顶边宽度
border-right CSS1 IE4+ , NS6+ 无 复合属性。设置对象右边的特性
border-right-color CSS2 IE4+ , NS6+ 无 设置或检索对象右边颜色
border-right-style CSS2 IE4+ , NS6+ 无 设置或检索对象右边样式
border-right-width CSS1 IE4+ , NS4+ 无 设置或检索对象右边宽度
border-bottom CSS1 IE4+ , NS6+ 无 复合属性。设置对象底边的特性
border-bottom-color CSS2 IE4+ , NS6+ 无 设置或检索对象底边颜色
border-bottom-style CSS2 IE4+ , NS6+ 无 设置或检索对象底边样式
border-bottom-width CSS1 IE4+ , NS4+ 无 设置或检索对象底边宽度
border-left CSS1 IE4+ , NS6+ 无 复合属性。设置对象左边的特性
border-left-color CSS2 IE4+ , NS6+ 无 设置或检索对象左边颜色
border-left-style CSS2 IE4+ , NS6+ 无 设置或检索对象左边样式
border-left-width CSS1 IE4+ , NS4+ 无 设置或检索对象左边宽度
border
语法:
border : border-width || border-style || border-color
参数:
该属性是复合属性。请参阅各参数对应的属性。
说明:
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
默认值为:medium none。border-color的默认值将采用文本颜色。
要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
对应的脚本特性为border。请参阅我编写的其他书目。
关于对象的尺寸与边框,内外补丁等样式表属性的关系,请参看图例以及height和width属性。
示例:
p { border: thick double yellow; }
blockquote { border: dotted gray; }
p { border: 25px; }
border-style
参数:
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
10、内补丁 Paddings
属性 版本 兼容性 继承性 简介
padding CSS1 IE4+ , NS4+ 无 检索或设置对象四边的补丁边距
padding-top CSS1 IE4+ , NS4+ 无 检索或设置对象顶边的补丁边距
padding-right CSS1 IE4+ , NS4+ 无 检索或设置对象右边的补丁边距
padding-bottom CSS1 IE4+ , NS4+ 无 检索或设置对象底边的补丁边距
padding-left CSS1 IE4+ , NS4+ 无 检索或设置对象左边的补丁边距
11、内容 Content
属性 版本 兼容性 继承性 简介
include-source CSS2 NONE 无 这个属性插入另一个文档到当前文档,取代当前对象的内容
quotes CSS2 NONE 无 设置或检索对象内使用的嵌套标记
content CSS2 NONE 无 用来和:after及:before 伪元素一起使用,在对象前或后显示内容
counter-increment CSS2 NONE 无 设定当一个selector发生时计数器增加的值
counter-reset CSS2 NONE 无 将指定selector的计数器复位
12、列表项目 Lists
属性 版本 兼容性 继承性 简介
list-style CSS1 IE4+ , NS4+ 有 复合属性。设置列表项目相关内容
list-style-image CSS1 IE4+ , NS6+ 有 设置或检索作为对象的列表项标记的图像
list-style-position CSS1 IE4+ , NS6+ 有 设置或检索作为对象的列表项标记如何根据文本排列
list-style-type CSS1/2 IE4+ , NS4+ 有 设置或检索对象的列表项所使用的预设标记
marker-offset CSS2 NONE 无 设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距
list-style
语法:
list-style : list-style-image || list-style-position || list-style-type
参数:
该属性是复合属性。请参阅各参数对应的属性。
说明:
设置列表项目相关内容。
对应的脚本特性为listStyle。请参阅我编写的其他书目。
示例:
li { list-style: url("http://www.dhtmlet.com/devgurupix.gif"), inside, circle; }
ul { list-style: outside, upper-roman; }
ol { list-style: square; }
list-style-type
参数:
disc : CSS1 实心圆
circle : CSS1 空心圆
square : CSS1 实心方块
decimal : CSS1 阿拉伯数字
lower-roman : CSS1 小写罗马数字
upper-roman : CSS1 大写罗马数字
lower-alpha : CSS1 小写英文字母
upper-alpha : CSS1 大写英文字母
none : CSS1 不使用项目符号
armenian : CSS2 传统的亚美尼亚数字
cjk-ideographic : CSS2 浅白的表意数字
georgian : CSS2 传统的乔治数字
lower-greek : CSS2 基本的希腊小写字母
hebrew : CSS2 传统的希伯莱数字
hiragana : CSS2 日文平假名字符
hiragana-iroha : CSS2 日文平假名序号
katakana : CSS2 日文片假名字符
katakana-iroha : CSS2 日文片假名序号
lower-latin : CSS2 小写拉丁字母
upper-latin : CSS2 大写拉丁字母
13、表格属性 Table
属性 版本 兼容性 继承性 简介
border-collapse CSS2 IE5+ 有 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
border-spacing CSS2 NONE 有 设置或检索当表格边框独立时,行和单元格的边框在横向和纵向上的间距
caption-side CSS2 NONE 有 设置或检索表格的caption对象是在表格的那一边
empty-cells CSS2 NONE 有 设置或检索当表格的单元格无内容时,是否显示该单元格的边框
table-layout CSS2 IE5+ 有 设置或检索表格的布局算法
speak-header CSS2 NONE 有 设置或检索表格头与其后的一系列单元格发生多少次关系
14、打印 Printing
属性 版本 兼容性 继承性 简介
page CSS2 IE5.5+ 有 检索或指定显示对象容器时使用的页面类型(pagetype)。参阅@page规则
page-break-after CSS2 IE4+ 无 检索或设置对象后出现的页分割符
page-break-before CSS2 IE4+ 无 检索或设置对象前出现的页分割符
page-break-inside CSS2 NONE 有 检索或设置对象容器中出现的页分割符
marks CSS2 NONE 无 设置或检索什么样的标志是应该在页容器外边被给予
orphans CSS2 NONE 有 设置或检索对象内容内一定要留在一页范围底端以内的行的最少数量
size CSS2 NONE 有 检索或指定页面规格的调整
widows CSS2 NONE 有 检索或指定一定要留在页面顶部的行数
15、声音 Aural
属性 版本 兼容性 继承性 简介
voice-family CSS2 NONE 有 设置或检索当前声音类型
volume CSS2 NONE 有 设置或检索音量
elevation CSS2 NONE 有 设置或检索当前声音的音源仰角
azimuth CSS2 NONE 有 设置或检索当前声音的音场角度
stress CSS2 NONE 有 和pitch-range相似。设置或检索当前声音波形的最高峰值
richness CSS2 NONE 有 设置或检索当前声音的音色
speech-rate CSS2 NONE 有 设置或检索发音速度
cue CSS2 NONE 无 设置在对象前后播放的声音
cue-after CSS2 NONE 无 设置在对象后播放的声音
cue-before CSS2 NONE 无 设置在对象前播放的声音
pause CSS2 NONE 无 设置对象前后的声音暂停
pause-after CSS2 NONE 无 定义对象内容被发音后的暂停
pause-before CSS2 NONE 无 定义对象内容发音前的暂停
pitch CSS2 NONE 有 设置或检索音高
pitch-range CSS2 NONE 有 设置或检索声音的平滑程度
play-during CSS2 NONE 无 设置或检索背景音乐的播放
speak CSS2 NONE 有 设置或检索声音是否给出
speak-numeral CSS2 NONE 有 设置或检索数字如何发音
speak-punctuation CSS2 NONE 有 设置或检索标点符号如何发音
16、其它
cursor CSS2 IE4+ 无 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
zoom IE4+ , NS6+ IE5.5+ 无 设置或检索对象的缩放比例
cursor
参数:
crosshair | default | hand | pointer |
move | help | wait | text |
w-resize | s-resize | n-resize | e-resize |
ne-resize | sw-resize | se-resize | nw-resize |
auto | url(img/1001.gif) |
六、单位 Units
相对长度单位 Relative Length Units:
px 相对长度单位 像素(Pixel) 像素是相对于显示器屏幕分辨率而言的。
em 相对长度单位 相对于当前对象内文本的字体尺寸 如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
ex 相对长度单位 相对于字符“x”的高度 此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
绝对长度单位 Absolute Length Units ptpcincmmm:
pt 绝对长度单位 点(Point) 1 in = 2.54 cm = 25.4 mm = 72pt = 6 pc
pc 绝对长度单位 派卡(Pica) 相当于我国新四号铅字的尺寸。
in 绝对长度单位 英寸(Inch)
mm 绝对长度单位 毫米(Millimeter)
cm 绝对长度单位 厘米(Centimeter)
颜色单位 Color Units Reference:
#RRGGB:
Brgb(R,G,B):
Color Name:
时间单位 Time Units Reference:
s:
ms:
角度单位 Angle Units Reference:
deg: 度 一个圆圈的360等分之一。
grad: 梯度 一个直角的100等分之一。一个圆圈相当于400grad。
rad: 弧度 把一个圆圈分成2*PI单位。
频率单位 Frequency Units Reference:
kHz:
Hz:
参考
http://www.86w3.com/css/http://www.w3.org/Style/CSS/