css文档

最新推荐文章于 2024-08-25 22:12:40 发布

iteye_12709

最新推荐文章于 2024-08-25 22:12:40 发布

阅读量96

点赞数

文章标签： css

本文链接：https://blog.csdn.net/iteye_12709/article/details/82126648

版权

自从W3C制定了代号为Cougar 的HTML 的4.0 版本以来，存在在Web 页面中的动态效果首次被正式的承认了，W3C 把动态超文本（Dynamic HTML ）的实现分为了三个部分：脚本、支持动态效果的浏览器和CSS 。前两者也许你经常用到，但CSS 是什么或许你并不清楚，如果有过制作Web 页面的经历，你可能听说过样式单或风格单，如果对此你亦无耳闻，不要紧，只要你想制作出具有更多新特性的Web 页，本文将同样适合于你。（请使用IE4或IE5对CSS手册中的属性实例进行验证）

一、什么是CSS ？

CSS 是Cascading Style Sheet 的缩写，有些书上把它译为" 层叠样式单" 或" 级联样式单" （下文简称" 样式单" ），在1997 年W3C 颁布HTML4 标准的同时也公布了有关样式单的第一个标准CSS1 。样式单是对以前的HTML （3.2 以前的HTML 版本）语法的一次重大革新，以前的HTML 版本中，各种功能的实现是通过标记元素实现的，这也造成了各个浏览器厂商为了标新立意创建各种只有自家支持的标记，各种标记互相嵌套，就可以达到不同的效果，比如要在一段文字中把一部分文字变成红色，HTML3.2 中应该是这样的：

<p><font color=red> 这里显示红色字</font></p>

而在样式单中，把某些标记（如上例中的"font" 标记）属性化，利用样式单，上例可以变成：

<p style="color:red"> 这里显示红色字</p>

这就是样式单的全部功能吗？远远不是！前面说过样式单是DHTML 的一部分，建立样式单的真正意义在于把对象真正引入了HTML ，使得可以使用脚本程序（如Javascript 、VBScript ）调用对象属性，并且可以改变对象属性，达到动态的目的，这在以前的HTML 中是无法实现的，如果你使用过如VB 等面向对象的编程工具，你会更快的发现，用样式单做DHTML 是多么容易。样式单的另一项贡献是简化了HTML 中各种繁琐的标记，使得各个标记的属性更具有一般性和通用性，并且样式单扩展了原先的标记功能，能够实现更多的效果，样式单甚至超越了Web 页面的本身显示功能，而把样式扩展到多种媒体上，显示了难以抗拒的魅力。

样式单自从CSS1 的版本之后，又在1998 年5 月发布了CSS2 版本，样式单得到了更多的充实。Internet Explorer4 和Netscape Navigator4 都宣传支持样式单，但从各方面来看IE4 的效果都要超过NE4 ，这是因为IE4 和NE4 的Javascript 文档模型（DOM ）不同而造成的，从表面看，二者的模型区别不大，但实质上却是大相径庭，IE4 的模型能够更加容易的把动态效果引入Web 页面，虽然现在IE4 的模型只有微软自己支持，但它却已被清楚的写入了W3C 的DHTML 标准；而NE4 的样式单并不能通过脚本调用对象的属性，说的不好听一点，它的样式单只是徒有其表罢了。（Netscape 公司自己开发了一种样式单称作JSSS ，它利用Javascript 来定义样式，但是并没有得到W3C 的承认。）

二、进一步了解样式单

Cascading Style Sheet 中的Cascading 是" 层叠" 的意思，也就是说在同一个Web 文档中可以有多个样式单存在，这些样式单根据所在的位置，拥有不同的优先级，优先级越高，就会被最后在显示时采用。从样式单插入的形式来看可以分为三种：

内联式样式单 ：它利于现有的HTML 标记，把特殊的样式加入到那些由标记控制的信息中，比如刚才的例子。
嵌入式样式单 ：它和Javascript 一样可以嵌入到HTML 文件的头部中去（<html> 和<body> 标记之间），使用<Style> 和</Style> 容器装载，例如："<style> p {color : red ; font-weight : bold} </style>" ，这样会对页面中所有<p> 标记都起作用。
外部式样式单 ：是一种保存在外部的样式单文件，外部文件以.CSS 为扩展名，例如"<link rel=stylesheet href="main-sheet.css" type="text/css">" 。

在应用时可以根据需要随意运用以上三种方式，但在实际中内联式样式单和嵌入式样式单使用得更多一些。

三、样式单的语法特征

样式单有自己独特的书写方法，掌握了它的语法特征，再了解它的各种属性，那么你会发现在Web 页面中运用样式单会是多么轻松。例如有一个最简单的HTML 文档：

<html>
<body>
<p>Text goes here …<p>
</body>
</html>

我们可以用嵌入式样式单规定样式。

<html>
<style>
<!--
p {color:red; font-weight : bold}
- ->
</style>
<body>
<p> 这里显示红色字</p>
</bdoy>
</html>

可以看到，在这个文档里，多了"Style" 标记，之间用<!-- ……… - -> 注释，以防止不能识别样式单的低版本浏览器把样式单当作内容显示出来，然后是关键的一句：

p {color:red ；font-weight : bold }

这整行称为一个声明（Statement ），在样式单中，声明分为两种，一种是象这样的，叫做"rule set" ，另一种则称为"at-rule" 。

At-rule 以"@" 作为关键字，放在元素的最前面，at-rule 通常用来对媒体（Media ）的声明，并且如果对同一个at-rule 进行声明，那么只有位置靠前的会起到作用，如：

@import "subs.css"
H1
@import "list.css"

后一个At-Rule 无效。

而rule set 就象我们前面看到的样子了，它由几个部分组成，其中包括选择器、属性和属性值。一般的书写是这样的：

Selector1 {property1:value1; property2:value2; ……}
Selector2 { ……}

其中刚才例子中的"P" 代表段落标记元素，为选择器，"{}" 为一个块（Block ），表示对标记属性的声明（Declaration ），有多个属性的时候使用";" 隔开，属性在样式单中的一般表示方法是前面是一类属性的名称，后面是具体属性的名称，中间用"-" 隔开，而在脚本中使用属性的时候，则把"-" 去掉，并把第二部分的开头字母大写。属性值的表示可以使用10 进制，16 进制数值（如#FFFFFF ），百分数（如100% ），字符串，URL （如url(http://www.mysite.com ) ）和RGB （如rgb(255,255,255) ）等多种方式表示。下面我将对其中的重点部分进行更详细的解释。

1 、选择器（Selector ）

选择器不只是文档中的元素标记，它还可以是类（Class ，这不同于Java 或C ＋＋中的类）、ID （给予元素特殊的名称，也便于在脚本中使用）或是元素的某种状态（如：a:link ）。如：

<html>
<style>

</style>
<body>
<p> 利用<span class="bigFont">Class</span> 和<span id="blueBack">ID</span> 显示内容。</p>
</body>
</html>

其中.someclass 代表类，#someID 代表ID 。类和ID 也可以和元素标记合用，比如：

p.bigFont { ……}

则表示必须在某个为bigFont 类的P 标记（<p class="bigFont"> ）才执行样式单，同样的也适合于ID 。
为了简化声明某些重复属性的标记，可以用"," 把不同的选择器隔开，表示它们都表示成相同的属性，如：

H1,H2
Div, p.mytext { ……}

有时我们还希望能够在特定的范围内使样式单生效：

p em

元素标记间又空格隔开，表示在<p> 和</p> 间的<em> 、<em> 用红色表示。另外还可以利用"~" 表示一个选择器后面紧跟另一个选择器，并且两边以"/" 围住：

/ Selector1 ~ Selector2/ { ……}

表示如果Selector2 紧跟着Selector1 则使用该样式单。

2 、属性值的单位

在样式单中，属性的单位多为长度单位，包括px （象素）、pt （磅）、em （一种排版中的单位，1em ＝12pt ）、mm （毫米）、cm （厘米）、pc （1pc ＝12pt ）、in （英寸），这些单位可以使用整数（如px ）表示，也可以使用实数（如em ）表示，并且元素中对数值还有继承（inherit ）的关系比如：

body
H1

那么在显示中H1 的text-indent 属性就不是36pt 而是45pt 。

有的属性的单位甚至可以是负值，如margin ，可以达到一些特殊的效果，如元素之间的重叠。另外还有一些其他的单位如角度，它的单位有deg （度）、grad （梯度）和rad （弧度）；频率的单位，Hz 和kHz ，这些都是我们非常熟悉的。

3 、注释及空格

样式单也有注释语句：可以用"/* ……*/" 作为注释标记，在浏览器中有一个对样式单的分析器，它负责对样式单的检查，分析器将忽略注释标记之间的内容。空格在样式单中是有效的，如果字符之间有超过一个空格存在，它将省略其余空格，而只保留一个，特别是在声明某些字体的时候，空格一定不能省略。

2 要注意的方面

首先，样式单是区分大小写的，所以要注意拼写；其次对于CSS2 未声明的属性和方法，样式单的分析器会忽略它的存在，如：

H1 ,H2
H3 ,H4 & H5
P {color:blue ;font-variant:small-caps}

其中"&" 是样式单中没有的标号，第二行整个被分析器略过，第三行中的font-variant 不是一个合法属性，也被略过（"color:blue" 有效）。

了解了以上规则，你就已经对样式单入门了，下面将详细介绍样式单的各种属性及属性值。

CSS 属性：

1 、媒体（Media ）类型

样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如"font-size" 属性只对可卷动的媒体类型有效（屏幕）。

声明一个媒体属性可以用@import 或@media 引入：

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

也可以在文档标记中引入媒体：

<LINK rel="stylesheet" type="text/css" media="print" href="foo.css">

可以看出，@import 和@media 的区别在于，前者引入外部的样式单用于媒体类型，后者直接引入媒体属性。@import 的使用方法是@import 加样式单文件的URL 地址再加媒体类型，可以多个媒体共用一个样式单，媒体类型之间用" ，" 分割符分开。@media 用法则是把媒体类型放在前面，其他规则和rule-set 基本一样。下面列出各种媒体类型：

SCREEN ：指计算机屏幕。
PRINT ：指用于打印机的不透明介质。
PROJECTION ：指用于显示的项目。
BRAILLE ：盲文系统，指有触觉效果的印刷品。
AURAL ：指语音电子合成器。
TV ：指电视类型的媒体。
HANDHELD ：指手持式显示设备（小屏幕，单色）
ALL ：适合于所有媒体。

CSS 属性：

2 、BOX 模型（BOX Model ）属性

什么是BOX ？CSS 把HTML 中以<somesign> ……</somesign> 的部分称为BOX （容器），BOX 有三类属性：padding 、margin 和border 。

Margin 属性：

Margin 属性分为margin-top 、margin-right 、margin-bottom 、margin-left 和margin 五个属性，分别表示BOX 里内容离边框的距离，它的属性值是数值单位，可以是长度、百分比或auto ，margin 甚至可以设为负值，造成BOX 与BOX 之间的重叠显示，关于margin 的属性详见下表：

属性名称: 'margin-top' 、'margin-right' 、'margin-bottom' 、'margin-left'
属性值: <margin-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX 的宽度

例如：

H1 { margin-top: 2em }
H2 { margin-right: 12.3% }

Margin 还有一个快捷的书写方法，就是直接用margin 属性，例如：

BODY { margin: 1em 2em 3em 2em}

等同于：

BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}

margin 属性后面可以有四个值，中间用空格隔开（记住不是逗号），顺序是" 上右下左" ，当然margin 后面可以不足四个值，例如：

BODY { margin: 2em } /* 所有的margin 都设为2em */
BODY { margin: 1em 2em } /* 上下margin 为1em ，右左margin 为2em */
BODY { margin: 1em 2em 3em } /* 上margin 为1em ，右左margin 为2em ，下margin 为3em*/

Padding 属性：

Padding 属性用来描述BOX 的边框和内容之间插入多少空间，和margin 属性类似，它也分为上右下左和一个快捷方式padding ，关于padding 的属性详见下表：

属性名称: 'padding-top' 、'padding-right' 、'padding-bottom' 、'padding-left' 、'padding'
属性值: <padding-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX 的宽度

例如：

BLOCKQUOTE { padding-top: 0.3em }

padding 属性和margin 类似此处略去。

Border 属性：

平时我们在查看HTML 文档时，看到一段文字，并不会把它当作一个BOX ，实际上BOX 是有边框的，只是平时不显示出来罢了，而border 属性就是用来描述BOX 边框的。Border 属性分为border-width 、border-color 和border-style ，而这些属性下面又有分支。

border-width 属性：

border-width 属性又分为：border-top-width 、border-right-width 、border-bottom-width 、border-left-width 和border-width 属性，border-width 用长度表示为"thin/medium/thick" 或长度单位表示，下面是border-width 属性的详细列表：

属性名称: 'border-top-width' 、'border-right-width' 、'border-bottom-width' 、'border-left-width' 、'border-width'
属性值: <border-width>
初始值: medium
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-width 为快捷方式，顺序为上右下左，值之间用空格隔开。

border-color 属性：

border-color 属性用来显示BOX 边框颜色，分为border-top-color 、border-right-color 、border-bottom-color 、border-right-color 和border-color 属性，属性值为颜色，可以用十六进制表示，也可用rgb() 表示，属性见下：
属性名称: 'border-top-color' 、'border-right-color' 、'border-bottom-color' 、'border-left-color' 、
'border-color'

属性值: <color>
初始值: 元素颜色的初始值
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-color 为快捷方式，顺序为上右下左，值之间用空格隔开。

border-style 属性：

border-style 属性用来设置BOX 对象边框的样式，它的属性值为CSS 规定的关键字，平常看不到border 是因为，初始值是none 的缘故。属性见下：

属性名称: 'border-top-style' 、'border-right-style' 、'border-bottom-style' 、'border-left-style' 、'border-style'
属性值: <border-style>
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

border-color 为快捷方式，顺序为上右下左，值之间用空格隔开。

属性值的名称和代表意义如下：

none ：无边框。
dotted ：边框为点线。
dashed ：边框为长短线。
solid ：边框为实线。
double ：边框为双线。
groove 、ridge 、inset 和outset ：显示不同效果的3D 边框（根据color 属性）。

border 属性：

border 属性为Border 的快捷方式，属性值间用空格隔开，顺序是" 边框宽度边框样式边框颜色" ，例如：

<h1 style="border:.5em outset red">hello!</h1>

还可以用border-top 、border-right 、border-bottom 、border-left 分别作为上右下左的快捷方式，属性值顺序同border 属性。

CSS 属性：

3 、布局（Layout ）属性：

在以前的HTML 里，元素的位置只能靠元素的依次排列觉得，而在CSS 里你可以更精确的定位元素。Netscape 曾提出过Layer 标记，它对于精确布局很有好处，但是并没有被W3C 承认，W3C 在CSS 提出了类似于Layer 标记的功能。

position 属性：

position 属性用来决定元素的位置类型，详见属性：

属性名称: 'position'
属性值: absolute | relative | static
初始值: static
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其属性值分别代表：
absolute ：屏幕上的绝对位置。
relative ：屏幕上的相对位置。
static ：固有位置。

direction 属性：

direction 属性决定BOX 的排列方向，详见属性：

属性名称: 'direction'
属性值: ltr| rtl
初始值: ltr
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

float 和clear 属性：

在HTML 中图片可以选择飘浮的位置，现在BOX 对象通过CSS 对于也可以选择飘浮的位置。改变BOX 的float 属性，BOX 将飘浮在其他元素的左或右方：

属性名称: 'float'
属性值: left| right|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

例如：

<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG src=img.gif>
Some sample text that has no other...
</BODY>

相反的，使用clear 属性将禁止元素在BOX 的左方或右方飘浮：

属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

绝对位置属性：

绝对位置属性有四个属性：top 、right 、bottom 和left ，属性值为长度单位或百分数：

属性名称: 'top' 、'right' 、'bottom' 、'left'
属性值: <length>|<percentage>|auto
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

利用以上属性，用户就可以精确定义元素的位置，如：

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
word.</P>

z-index 属性：

在CSS 中允许元素的重叠显示，这样就有一个显示顺序的问题，z-index 属性描述了元素的前后位置，如果把电脑屏幕看作X-Y 平面的话，那么Z 轴就是垂直于屏幕的，z-index 使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS 同意在z-index 中使用负数。

属性名称: 'z-index'
属性值: auto|<integer>
初始值: auto
适合对象: 使用position 属性的元素
是否继承: no
百分比备注: 被禁止

width 属性：

规定BOX 的width 属性，可以使BOX 的宽度不依靠它所包含的内容的多少：

属性名称: 'width'
属性值: <length> | <percentage> | auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注: 根据父元素的width 而定

在CSS 中还提供了min-width 和max-width 属性，使得BOX 的宽度在最小宽度和最大宽度之间。

属性名称: 'min-width'
属性值: <length> | <percentage>
初始值: 0
适合对象: all
是否继承: no
百分比备注: 根据父元素的width 而定

属性名称: 'max-width'
属性值: <length> | <percentage>
初始值: 100%
适合对象: all
是否继承: no
百分比备注: 根据父元素的width 而定

height 属性：

相同的BOX 还有height 属性来控制本身的高度：

属性名称: 'height'
属性值: <length> | <percentage> | auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注: 根据父元素的height 而定

在CSS 中还提供了min-height 和max-height 属性，使得BOX 的高度在最小高度和最大高度之间。

属性名称: 'min-height'
属性值: <length> | <percentage>
初始值: 0
适合对象: all
是否继承: no
百分比备注: 根据父元素的height 而定

属性名称: 'max-height'
属性值: <length> | <percentage>
初始值: 100%
适合对象: all
是否继承: no
百分比备注: 根据父元素的height 而定

overflow 属性：

在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到overflow 属性：

属性名称: 'overflow'
属性值: visible | hidden | scroll | auto
初始值: visible
适合对象: 元素的position 属性
是否继承: no
百分比备注: 被禁止

属性值含义如下：

visible ：扩大面积以显示所有内容。
hidden ：隐藏超出范围的内容。
scroll ：在元素的右边显示一个滚动条。
auto ：当内容超出元素面积时，显示滚动条。

clip 属性：

CSS 还提供了一种clip 属性，可以把元素区域剪切成各种形状，但目前提供的只有方形一种：

属性名称: 'clip'
属性值: <shape> | auto
初始值: auto
适合元素: 元素的position 属性被设为absolute
是否继承: no
百分比备注: 被禁止

<shape> 值为rect(top right bottom left) 。

line-height 和vertical-align 属性：

line-height 属性可以规定元素内部的行间距，使用长度单位或百分数：

属性名称: 'line-height'
属性值: normal | <number> | <length> | <percentage>
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 根据元素的字体大小而定

例如下面的例子，虽然表达方式不同，但结果一样：

DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }

vertical-align 属性决定元素在垂直位置的显示：

属性值含义如下：
baseline ：与元素的基线对齐。
middle ：与元素中部对齐。
sub ：字下沉。
super ：字上升。
text-top ：文本顶部对齐。
text-bottom ：文本底部对齐。
Top ：和本行位置最高元素对齐。
Bottom ：和本行位置最低元素对齐。

Visibility 属性:

该属性用于控制元素的显示或隐藏：

属性名称: 'visibility'
属性值: inherit | visible | hidden
初始值: inherit
适合对象: 所有元素
是否继承: 如果该值为inherit ，则继承父元素属性
百分比备注: 被禁止

CSS 属性：

4 、颜色和背景（Color and Background ）属性：

这里介绍有关CSS 中前景色和背景颜色、图片的设定方法。

color 属性：

color 属性用于设定元素的前景色：

属性名称: 'color'
属性值: <color>
初始值: 根据用户的初始值而定
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

color 属性的值可以是十六进制数值、rgb() 函数或CSS 承认的颜色名称。如：

EM { color: red }
EM { color: rgb(255,0,0) }

背景属性：

background-color 属性用于设定背景色，初始值为透明：

属性名称: 'background-color'
属性值: <color> | transparent
初始值: transparent
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

backgroud-image 属性用于设定背景的图片：

属性名称: 'background-image'
属性值: <url> | none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

其中url 可以为绝对地址，也可以是相对地址，例如：

BODY { background-image: url(marble.gif) }
P { background-image: none }

以上两个属性利用普通的HTML 属性也可以实现，下面的属性是CSS 对原有HTML 的扩展。
background-repeat 属性用来描述背景图片的重复排列方式：

属性名称: 'background-repeat'
属性值: repeat | repeat-x | repeat-y | no-repeat
初始值: repeat
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

其中属性值的含义为：
repeat ：沿X 轴和Y 轴两个方向重复显示图片。
repeat-x ：沿X 轴方向重复图片。
repeat-y ：沿Y 轴方向重复图片。
none ：不重复图片。

例如：

BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
/* 表示沿Y 轴重复图片"pendant.gif" ，其余部分以红色为背景色*/

background-attachment 属性表示在滚动整个文档时，背景图片的显示方式。它的属性值有两种：fixed 和scroll ，fixed 相当于IE4 里的水印效果，也就是说在拖动文档时，背景相对是静止的，scroll 则和文档一起滚动。

background-position 属性用来指定背景图片显示的位置：

属性名称: 'background-position'
属性值: [<percentage> | <length> ] | [top | center | bottom] || [left | center | right]
初始值: 0% 0%
适合对象: 容器元素
是否继承: no
百分比备注 : refer to the size of the element itself

其中属性值含义为：
"top left" 和"left top" 表示"0% 0%" 。
"top" 、"top center" 和"center top" 表示"50% 0%" 。
"right top" 和"top right" 都表示"100% 0%" 。
"left" 、"left center" 和"center left" 表示"0% 50%" 。
"center" 和"center center" 表示"50% 50%" 。
"right" 、"right center" 和"center right" 都表示"100% 50%" 。
"bottom left" 和"left bottom" 表示"0% 100%" 。
"bottom" 、"bottom center" 和"center bottom" 都表示"50% 100%"
"bottom right" 和"right bottom" 表示"100% 100%" 。
例如：

BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */

background 属性是以上背景属性的快捷方式，属性和顺序如下：

属性名称: 'background'
属性值: <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>
适合对象: 所有元素
是否继承: no
百分比备注: 只在background-position 中容许使用

CSS 属性：

5 、字体（Font ）属性：

这里定义了关于字体的各种属性。

font-family 属性定义字体的名称，可以是一个字体的名称，也可以是一类字体的名称，字体的名称一定要和计算机系统里的完全一样：

属性名称: 'font-family'
属性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]
初始值: 根据用户定义而定
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

有些计算机系统里如果没有样式单要求的字体，可以再设一个次字体以备万一。例如：

BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

family-name 是指确定的某字体，如Heisi Mincho W3 ，generic-family 指某一类字体，如serif 。

font-style 属性描述字体的倾斜程度：

属性名称: 'font-style'
属性值: normal | italic | oblique
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

font-variant 属性：

属性名称: 'font-variant'
属性值: normal | small-caps
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

一个使用了small-caps 属性的元素中的小写字母看起来要比正常的大写字母小一些。

font-weight 属性用来描述字重。

属性名称: 'font-weight'
属性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

100 到900 代表9 种不同的字重，400 代表normal ，700 代表bold ，900 是最重的字体，bolder 或lighter 表示字体的字重比父元素高或低一级，比如父元素字重为400 ，则bolder 代表字重500 ，如果父元素本身字重为900 ，那么bolder 后，字重还是900 ，同样的lighter 也一样。有些字体并没有100 到900 那么全的字重，也许是从300 到700 ，那么字重的最小和最大值也为300 到700 。例如：

P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */

font-size 属性描述字体的大小：

属性名称: 'font-size'
属性值: <absolute-size> | <relative-size> | <length> | <percentage>
初始值: medium
适合对象: 所有元素
是否继承: yes
百分比备注: relative to parent element's font size

该属性可以使用绝对大小，也可以使用相对大小，其中绝对大小可以使用，如下关键字表示：

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

Font 属性是以上属性的快捷方式，属性如下：

属性名称: 'font'
属性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
适合对象: 所有元素
是否继承: yes
百分比备注: 只在font-size 使用

例如：

P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

CSS 属性：

6 、文本（Text ）属性：

这里的属性将影响WEB 文档中的文本显示情况。

text-indent 属性描述文本的缩进程度：

属性名称: 'text-indent'
属性值: <length> | <percentage>
初始值: 0
适合对象: 容器元素
是否继承: yes
百分比备注: 根据父元素的宽度而定

下面的例子表明段落的缩进值为3em ：

P { text-indent: 3em }

Alignment 属性表明文本的对齐方式：

属性名称: 'alignment'
属性值: left | right | center | justify
初始值: 依照用户定义
适合对象: block-level elements
是否继承: yes
百分比备注: 被禁止

text-decoration 属性描述对文本的修饰方法：

属性名称: 'text-decoration'
属性值: none | [ underline || overline || line-through || blink ]
初始值: none
适合对象: 所有元素
是否继承: no (see clarification below)
百分比备注: 被禁止

属性值含义分别为：
underline ：下划线。
overline ：上划线。
line-through ：删除线。
blink ：闪烁（如同Navigator 中的blink 标记的功能）

text-shadow 属性可以为文本加入阴影的特效：

属性名称: 'text-shadow'
属性值: none | <color> [, <color> ]*
初始值: none
适合对象: all
是否继承: No
百分比备注: 只在描述透明度时有效

例如：

P { text-shadow: black }

上例将在文本的右下方显示黑色阴影，另外阴影将增大BOX 的面积。

letter-spacing 属性表明文本的字间距：属性名称: 'letter-spacing'

属性值: normal | <length> | auto
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

例如：

BLOCKQUOTE { letter-spacing: 0.1em }

word-spacing 属性表明文本中单词间距：

属性名称: 'word-spacing'
属性值: normal | <length>
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

例如：

H1 { word-spacing: 1em }

text-transform 属性可以将BOX 内的文本按指定的大写或小写形式显示：

属性名称: 'text-transform'
属性值: capitalize | uppercase | lowercase | none
初始值: none
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止

属性值含义为：
capitalize ：把BOX 中的每句句首字母变成大写。
uppercase ：把BOX 中所有的字母变成大写。
lowercase ：把BOX 中所有的字母变成小写。

White-space 属性描述如何显示文本中的空格 ，在HTML 中，空格是被省略的，也就是说你在一个段落标记的开头无论输入多少个空格都是无效的，要输入空格有两个方法，一是直接输入空格的代码" " ，或者使用<pre> 标记，CSS 中也制定了类似于pre 的属性：

属性名称: 'white-space'
属性值: normal | pre | nowrap
初始值: normal
适合对象: 容器元素
是否继承: yes
百分比备注: 被禁止