第 11章 CSS的属性
11.1 设置字体样式
11.2 控制图文布局
11.3 颜色及背景
11.4 美化网页与超链接的设置
11.5 CSS定位
11.1 设置字体样式
11.1.1 字体属性 font-family
利用 CSS的 font-family属性，设置要使用的字体
语法,
font-family:<字体 1>,<字体 2>...,<字体 n>
对比,font的 face属性
说明,
?浏览器将在字体列表中依次寻找有效
字体 。若浏览器完全找不到指定的字体
时，则使用默认字体。
?应该将一种常见的字体列在字体列表
的最后 。
?在对英文字体进行设置时,如果两个
英文单词之间有空格时必须使用单引号
（ '）或双引号（ "） 。
利用 font-style属性，达到字体风格的变化。
语法,
font-style:normal|italic|oblique
对比,<I>标签
font-style参数值说明
11.1.2 字体风格 font-style
参数值 说明
normal 正常显示，初始值为 normal。
italic 斜体显示
oblique 倾斜显示
11.1.3 字体变形 font-variant
语法,
font-variant:normal|small-caps
font-variant参数值说明
参数值 说明
normal 正常显示，初始值为 normal。
small-caps 小型大写字母,即小写的英文字体将转换为大写且字体较小的英文字
11.1.4 字体加粗 font-weight
在 HTML里，可以利用 <b>标签，将文字设置为粗体。
在 CSS内，则可利用 font-weight属性，
设置字体的粗细 。
语法,
font-weight:normal|bold|bolder|lighter|
100|200|300|400|500|600|70|800|900
font-weight参数值说明
参数值 说明
normal 浏览器默认的字体为 7，字体粗细约为 400。
bold 粗体，字体粗细约为 700。
bolder 粗体再加粗，字体粗细约为 900。
lighter 比默认字体还细。
100-900 数字越小字体越细、数字越大字体越粗
利用 HTML的标签 <font size=x>只能设定 7种字号，
在 CSS中可以使用 font-size属性对文
字的字号进行随心所欲的设置。
语法,
font-size:<绝对尺度 >|<关键字 >|<相对尺度 >|<比
例尺度 >
说明,
⑴ 绝对尺寸可以使用的单位有,
in（英寸）,cm（厘米）,mm（毫米）,pt（ 磅 ）和
px（像素）。
11.1.5 字号的控制 font-size
⑵ 用关键字来说明文字大小,共有 7种关键字，
相对应于 HTML标签 <font size>中所用的数字参数。
这 7种关键字如下,
? xx-small
? x-small
? small
? medium
? large
? x-large
? xx-large
利用这些参数，浏览器可以自由决定每一种关键
字所适合的尺寸（在不同浏览器中它的大小是有区别
的）。
⑶ 相对尺寸
相对尺寸只有两种 larger和 smaller。
smaller参数告诉浏览器将当前文字在关键字
规格基础上, 缩小一级, 。而 larger参数的作用与
smaller相反。
⑷ 比例尺寸
还可以使用比例参数来设定文字大小，例如,
p{font-size:15pt}
b{font-size:300%}
这些规则的含义为：使所有包含在 <p>中的被
<b>标识的文字的尺寸为 <p>尺寸设定值的 3倍，即
45pt。 比例参数常用于从母体对象继承参数值 。
注意,
1．在 CSS中设置文字尺寸的单位很多，但 有些浏
览器对有些尺寸单位是不支持的
2,Px(像素） 单位所有的操作平台都支持它，但
因为访问者的屏幕分辨率的不同，网页的显示将可能
不稳定，字体可能大也可能小 。
3,Pt(磅 )是确定文字尺寸最好的单位，因为它在
所有的浏览器和操作平台上都适用。
4,关键字这种尺寸单位在不同浏览器中它的大小
是有区别的。
5．低版本的浏览器不支持相对尺寸这种单位。
text-transform属性可以控制字母的大小写。
语法,
text-transform:uppercase|lowercase|
capitalize|none
text-transform参数值说明如下
11.1.6 文字的更改 text-transform
14
参数值 说明
uppercase 使所有字母大写显示。
lowercase 使所有字母小写显示。
capitalize 词首字母大写。
none 字母以正常形式显示。
语法,
text-decoration:underline|overline|line-
throungh|none
text-decoration参数值说明
11.1.7 文字修饰 text-decoration
参数值 说明
underline 给文字加下划线。
overline 给文字加上划线。
line-throungh 给文字加删除线。
none 使得上述效果那不会发生。
其中 none参数也非常有用，它可以使链
接的文字不以下划线的形式显示。
如,取消超级链接时带下划线的形式 。
A:link{text-decoration:none}
A:active{text-decoration:none}
A:visited{text-decoration:none}
font属性，可以同时设置许多跟文字有关的属性 。
例如：字体、字体效果、字号、字体粗细等。
语法,
font:font-family||font-style||font-
variant||font-weight||font-size
说明,
?可以同时设置多种属性。
?属性与属性之间必须利用空隔隔开。
实例,
p{font:bold 12pt/14pt 隶书,宋体 }
指定该段为 bold（粗体）和隶书或宋体,12点大
小，行高为 14点。
11.1.8 字体属性 font
11.2 控制图文布局
样式表中对图文布局的控制 是指字符、单词和
行与行之间是如何定位的,包括如何设定字与字之
间、字母之间的距离，以及行距（垂直间距）、文
字的对齐方式、边距、边框及浮动对象等。
11.2.1 设置字间距及字母间距
语法,
word-spacing:normal|长度单位
letter-spacing,normal|长度单位
说明,
⑴ Word-spacing,用于设置 英文单词 之间的距离；
(2)letter-spacing,用于设置 英文字母 之间的距离。
⑵ 两者 可以使用前面讲到的任何一种长度单位 。
⑶ 如果使用 normal参数，将按照浏览器默认设置显示。
11.2.2 设置行距 line-height
语法,
line-height:normal|数字 |长度单位 |比例
说明,
设置相邻两行的基准线之间的垂直距离 。
（基准线就是英文小写字母如 x,a的下阶线，但不包括
诸如 y,g等字母超过下阶线的部分）
实例,
⑴ 用数字设定行距
b{font-size=12pt;line-height:2}
表示将利用字号来确定行距，将字号乘以设定
的参数值，即 12X2=24，所以在本例中行高将是 24
点。
⑵ 用长度单位设定行距
b{line-height:11pt}
⑶ 用比例设定行距
b{font-size:10pt;line-height:140%}
表示行距是文字的基准大小 10pt的 140%，即
14pt。
语法,
text-align:left|right|center|justify
vertical-align:top|bottom|text-top|text-
bottom|baseline|middle|sub|super
11.2.3 文字对齐
说明,
⑴ text-align属性用于文字的水平对齐,但
这项属性 只用于整块的内容,如 <p>,<h1>到 <h6>
和 <ul>等。
text-align参数值说明
参数值 说 明
left 浏览器默认的对齐方式，左对齐。
right 右对齐。
center 居中。
justify 左右对齐。
⑵ vertical-align属性用于控制文字或其他
网页对象相对于母体对象的垂直位置 。
vertical-align参数值说明
参数值 说 明
top 使元素和行中最高的元素向上对齐
bottom 使元素和行中最低的元素向下对齐
text-top 使元素和上级元素的字体向上对齐
text-bottom 使元素和上级元素的字体向下对齐
baseline 使元素和上级元素的基线对齐（默认）
middle 纵向对齐元素基线加上上级元素字母, x”高度的一半的中点
sub 将对象以下标的形式显示。
super 将对象以上标的形式显示。
11.2.4 首行缩进属性 text-indent
首行缩进属性 用来指定段文字的第一行文字缩
进的距离，而浏览器的默认值不缩进 。
语法,
text-indent:数字 |百分比
说明,
在 IE浏览器中 使用比例参数时，是相对于整个
浏览器窗口的宽度，而不是相对于段落的宽度 。
11.3 颜色及背景
11.3.1 颜色属性 color
语法,
color,<颜色 >
实例,
h1{color:blue}
h2{color:#000080}
利用 backgroud-color属性设置背景颜色。
语法,
background-color,<颜色 >|transparent（透明）
说明：初始值为 transparent（透明）。
实例,
body{background-color:white}
h1{background-color:#000080}
11.3.2 背景颜色属性
11.3.3 背景图像属性
在 CSS里，可利用 background-image属性，
将网页背景以图片的方式显示。
语法,
background-image,<url>|none（无）
11.3.4 背景图片重复属性
设定一个指定的背景图片如何被重复 。
语法,
background-repeat,repeat|repeat-
x|repeat-y|no-repeat
background-repeat属性参数值说明
参数值 说 明
repeat 背景图片水平与垂直方向同时平铺（默认值）
repeat-x 背景图片横向重复
repeat-y 背景图片纵向重复
no-repeat 不重复
11.3.5 固定背景图片属性
设置指定的背景图片是跟随内容滚动，还是保
持固定。
语法,
background-attachment,scroll|fixed
说明,
scroll表示滚动,fixed表示固定。初始值
为 scroll。
11.3.6 背景图片的位置属性
?background-position设置背景图片的最初位置
?这个属性只能应用于 块级元素和替换元素 (替换元素
仅指一些已知原有尺寸的元素。 HTML替换元素包括 IMG,
INPUT,TEXTAREA,SELECT,和 OBJECT。 )
语法,
background-position,<百分比 >|<长度 >|<关键字 >
说明如下,
⑴ 以百分比方法设置 background-position属
性的语法如下,
background-position,x% y%
其中 x%代表设置图片的水平位置； y%代表图片的
垂直位置。初始值为 0% 0%。
实例,
P{background-position:70% 50%;repeat-
y;url(..\pic\sky.jpg)｝
表示背景图片的水平位置为 70%，垂直位置为 50%。
⑵ 以长度单位设置 background-position属性
的语法如下,
background-position,x y
使用长度单位可以对背景图片的位置作出更精确
的控制，可以设定水平和垂直定位起点。
实例,
{background-position:70px 10px;url(..\pic\sky.jpg)｝
表示从左起 70像素、垂直 10像素的位置开始显示
图像。
⑶ 以关键字设置 background-position属性的
语法如下,
background-position,
[top|center|bottom]||[left|center|right]
（注,|表示或的意思,||表示二者同时使用,[]表示可搭配使用）
实例,
{background-position:right top;url(..\pic\sky.jpg)｝
11.3.7 背景
语法,background,<值 >
允许值,<背景颜色 >||<背景图像 >||<背景重复 >||<背景附
件 >||<背景位置 >
初始值：未定义
以下是一些背景的声明,
body{background:white url(tree.jpg)}
h1{background:#7fffd4}
p{background:url(tree.jpg) #f0f8ff fixed}
table{background:#0c0 url(tree.jpg) no-repeat
bottom right}
11.4 美化网页与超链接的设置
11.4.1 网页链接属性 anchor
在 CSS里，可以通过网页链接属性 anchor来设置网页
链接文字的效果。
网页链接属性 anchor语法说明
a:link 尚未链接过的超链接文字的样式。
a:visited 已链接过的超链接文字的样式。
a:active 当鼠标点击超链接后，超链接文字所显示的样式。
a:hover 当鼠标移到超链接文字上方时，超链接文字所显示的样式。
11.4.2 设置滚动条属性 scrollbar
在 CSS里，可以通过滚动条属性
scrollbar来美化滚动条。
说明如下
滚动条 scrollbar的参数说明
参数值 说 明
scrollbar-face-color 设置 A区域的颜色。
scrollbar-shadow-color 设置 A区域阴影的颜色。
scrollbar-highlight-color 设置 A区域的边框颜色。
scrollbar-3dlight-color 设置 A区域的 3D光影。
scrollbar-darkshadow-color 设置 A区域的 3D阴影。
scrollbar-track-color 设置 B区域的滚动条轨道颜色。
scrollbar-arrow-color 设置 A区域内内小三角形的颜色。
11.4.3 光标属性的设置 cursor
光标属性 cursor可设置光标的图形, cursor属性
共提供了 16种属性值，如下表所示。
11.4.4 边框的设置
在 CSS中，可以通过 margin属性,border属性
和 padding属性控制段落、图片和表格等对象的样
式。如：边框的宽度、颜色、样式以及对象与边框
之间的空白距离 。
上述三种属性通常用于文件段落、图片、表格
与网页边界的空白距离，或者是设置表格内的边框
及空白样式等，如下图所示。
边框属性说明
说明,
?margin属性：控制对象边界与文件其他内容的空
白距离。
?border属性：控制表格四边边框的宽度、颜色及
样式。
?padding属性：控制表格中的内容或图片与对象边
界的空白距离。
1．边界的设置 margin
通过 margin属性可以设定对象与四周文字之间
的距离。
其语法如下,
margin-(top,right,bootom,left)：长度 |百分比 |auto
说明,
⑴ margin属性有 margin-top（顶部空白区域）、
margin-bottom（底部空白区域）,margin-left
（左边空白区域）和 margin-right（右边空白区域）
四个边界属性。通过设置这 4项属性,可以控制一个
对象四周空白区域的大小 。
⑵ 可以使用任何长度单位 。
⑶ 如将边距设为负值，就可以将两个对象重叠在一起。
用法如下
利用 margin属性设置边界值的方法有,
⑴ 设置一个边界值：若 margin属性只设置一个边界
值时，则上、右、下和左四个边界都将调用此值。
实例,
margin:2cm
⑵ 设置对应边值：在 margin属性中设置对应边值，
是指上边界与下边界、左边界与右边界为相对应的边
界，所以若设置对应边其中一边的值时，另一边将调
用此值。
实例,
margin,2cm 4cm
上边界与下边界的值为 2cm，左边界与右边界的
值为 4cm。
⑶ 设置四个边界值：利用 margin属性，顺序输
入上、右、下、左边界的值，就可以完成四个边
界的设置了。
实例,
margin:20pt 30% 30px 2cm
上边界为 20pt，右边界为 30%，下边界为
30px，左边界为 2cm。
2．设置边框的宽度 border-width
在 CSS里，可以利用 border-width属性来控制
边框的宽度。
语法 1,
border-width:thin|medium|thick|长度
说明,border-width的参数值 thin代表细、
medium代表中等,thick代表粗。
语法 2,
border-top-width:长度
border-bottom-width:长度
border-left-width:长度
border-right-width:长度
用法如下
border-width属性设置宽度有 4种方法,
?设置一个值：四条边框宽度均使用同一个设置值。
?设置两个值：上边框与下边框宽度调用第一个值，
右边框与左边框宽度调用第二个值。
?设置三个值：上边框宽度调用第一个值，右边框
与左边框宽度调用第二个值，下边框宽度调用第三
个值。
?设置四个值：四条边框宽度的调用顺序，顺序为
上、右、下、左。
3．设置边框的颜色 border-color
border-color属性用于设置边框的颜色，它的使
用方法与 border-width相同。
语法 1,
border-color:#rrggbb
border-color:#rrggbb #rrggbb #rrggbb #rrggbb
说明：其中第 1种颜色为顶部边框颜色，其中第
2种颜色为右边边框颜色，其中第 3种颜色为底部边
框颜色，其中第 4种颜色为左边边框颜色。
语法 2,
border-top-color:#rrggbb
border-bottom-color:#rrggbb
border-left-color:#rrggbb
border-right-color:#rrggbb
4．设置边框的样式 border-style
border-style属性用于设置边框的样式。
其语法设置如下,
border-style:none|solid|double|dotted|
dashed|groove|ridge|inset|outset
说明如下,
border-style属性设置值
属性 说明
solid 实线
double 双直线
dotted 小点虚线
dashed 大点虚线
groove 3D凹线
ridge 3D凸线
inset 3D框入线
outset 3D隆起线
5．设置边框属性 border
在 CSS里，通过 border属性可以快速设置边框的宽
度、边框颜色及边框样式。其语法如下,
border:<border-width>||<border-style>||<color>
实例,
border:1pt double #ff0000
设置边框的宽度为 1pt、样式为双直线、颜色为红
色。
6．内边界的设置 padding
padding属性主要是控制元素的内容与元素外框
内缘的距离 。其语法如下,
padding-(top,right,bottom,left):长度 |百分比
说明：其用法与 border-color相同。
11.5.1 CSS定位属性
利用样式表的定位属性，就可以精确地设定对象的位置，
还能将各对象进行叠放处理。
语法,
position:<absolute|relative>;left:<值 >;top:<值 >;
[width:<值 >];[height:<值 >];[visibility:<值 >];
[z-index:<值 >]
说明,
⑴ position属性 用于对象的定位，它的参数值有
absolute和 relative两种。
absolute表示绝对定位,在绝对定位中对象的位置
是相对于浏览器窗口而言的。
relative表示相对定位 。被定位的对象的位置是相
对于它通常应在的位置而言的。如果停止使用相对
定位，则文字的显示位置将恢复正常。
⑵ left属性 用于设定对象距浏览器窗口左边的距离；
top属性 用于设定对象距离浏览器窗口顶部的距离。
⑶ width属性用于设定对象的宽度 。宽度属性只在绝对定位时
使用。
⑷ height属性用于设定对象的高度 。高度和宽度的设置类似，
只不过是在垂直方向上进行的。
⑸ visibility属性用于设定对象是否显示 。这条属性对于被
定位和未定位的对象都适用。
该属性的参数有三种,
? isible:使对象可以被看见
? hidden:使对象被隐藏
? inherit：对象被继承母体对象的可视性设置
⑹ z-index属性用于在网页上重叠文字和图像 。当定位多个对
象并将其重叠时，可以使用 z-index来设定哪一个对象应出现
在最上层。 z-index参数值使用整数，用于绝对定位或相对定
位了的对象，也可以给图像设定属性。
示例,
div{position:absolute;left:200px;top:40px;width:150px}
浏览器执行到这项规则时，它将文字块按照规则规定
的效果显示，将段落的最大水平尺寸限制在 150像素。
实例,
h4{visibility:hidden}
控制用 H4标识的对象不可见。
当一个对象被隐藏后，它仍然 1要占据浏览器窗口中
的原有空间。
示例 1,absolute绝对定位
示例 2：设置文字及图片的层次
示例 3：设置文字的三维效果
11.1 设置字体样式
11.2 控制图文布局
11.3 颜色及背景
11.4 美化网页与超链接的设置
11.5 CSS定位
11.1 设置字体样式
11.1.1 字体属性 font-family
利用 CSS的 font-family属性，设置要使用的字体
语法,
font-family:<字体 1>,<字体 2>...,<字体 n>
对比,font的 face属性
说明,
?浏览器将在字体列表中依次寻找有效
字体 。若浏览器完全找不到指定的字体
时，则使用默认字体。
?应该将一种常见的字体列在字体列表
的最后 。
?在对英文字体进行设置时,如果两个
英文单词之间有空格时必须使用单引号
（ '）或双引号（ "） 。
利用 font-style属性，达到字体风格的变化。
语法,
font-style:normal|italic|oblique
对比,<I>标签
font-style参数值说明
11.1.2 字体风格 font-style
参数值 说明
normal 正常显示，初始值为 normal。
italic 斜体显示
oblique 倾斜显示
11.1.3 字体变形 font-variant
语法,
font-variant:normal|small-caps
font-variant参数值说明
参数值 说明
normal 正常显示，初始值为 normal。
small-caps 小型大写字母,即小写的英文字体将转换为大写且字体较小的英文字
11.1.4 字体加粗 font-weight
在 HTML里，可以利用 <b>标签，将文字设置为粗体。
在 CSS内，则可利用 font-weight属性，
设置字体的粗细 。
语法,
font-weight:normal|bold|bolder|lighter|
100|200|300|400|500|600|70|800|900
font-weight参数值说明
参数值 说明
normal 浏览器默认的字体为 7，字体粗细约为 400。
bold 粗体，字体粗细约为 700。
bolder 粗体再加粗，字体粗细约为 900。
lighter 比默认字体还细。
100-900 数字越小字体越细、数字越大字体越粗
利用 HTML的标签 <font size=x>只能设定 7种字号，
在 CSS中可以使用 font-size属性对文
字的字号进行随心所欲的设置。
语法,
font-size:<绝对尺度 >|<关键字 >|<相对尺度 >|<比
例尺度 >
说明,
⑴ 绝对尺寸可以使用的单位有,
in（英寸）,cm（厘米）,mm（毫米）,pt（ 磅 ）和
px（像素）。
11.1.5 字号的控制 font-size
⑵ 用关键字来说明文字大小,共有 7种关键字，
相对应于 HTML标签 <font size>中所用的数字参数。
这 7种关键字如下,
? xx-small
? x-small
? small
? medium
? large
? x-large
? xx-large
利用这些参数，浏览器可以自由决定每一种关键
字所适合的尺寸（在不同浏览器中它的大小是有区别
的）。
⑶ 相对尺寸
相对尺寸只有两种 larger和 smaller。
smaller参数告诉浏览器将当前文字在关键字
规格基础上, 缩小一级, 。而 larger参数的作用与
smaller相反。
⑷ 比例尺寸
还可以使用比例参数来设定文字大小，例如,
p{font-size:15pt}
b{font-size:300%}
这些规则的含义为：使所有包含在 <p>中的被
<b>标识的文字的尺寸为 <p>尺寸设定值的 3倍，即
45pt。 比例参数常用于从母体对象继承参数值 。
注意,
1．在 CSS中设置文字尺寸的单位很多，但 有些浏
览器对有些尺寸单位是不支持的
2,Px(像素） 单位所有的操作平台都支持它，但
因为访问者的屏幕分辨率的不同，网页的显示将可能
不稳定，字体可能大也可能小 。
3,Pt(磅 )是确定文字尺寸最好的单位，因为它在
所有的浏览器和操作平台上都适用。
4,关键字这种尺寸单位在不同浏览器中它的大小
是有区别的。
5．低版本的浏览器不支持相对尺寸这种单位。
text-transform属性可以控制字母的大小写。
语法,
text-transform:uppercase|lowercase|
capitalize|none
text-transform参数值说明如下
11.1.6 文字的更改 text-transform
14
参数值 说明
uppercase 使所有字母大写显示。
lowercase 使所有字母小写显示。
capitalize 词首字母大写。
none 字母以正常形式显示。
语法,
text-decoration:underline|overline|line-
throungh|none
text-decoration参数值说明
11.1.7 文字修饰 text-decoration
参数值 说明
underline 给文字加下划线。
overline 给文字加上划线。
line-throungh 给文字加删除线。
none 使得上述效果那不会发生。
其中 none参数也非常有用，它可以使链
接的文字不以下划线的形式显示。
如,取消超级链接时带下划线的形式 。
A:link{text-decoration:none}
A:active{text-decoration:none}
A:visited{text-decoration:none}
font属性，可以同时设置许多跟文字有关的属性 。
例如：字体、字体效果、字号、字体粗细等。
语法,
font:font-family||font-style||font-
variant||font-weight||font-size
说明,
?可以同时设置多种属性。
?属性与属性之间必须利用空隔隔开。
实例,
p{font:bold 12pt/14pt 隶书,宋体 }
指定该段为 bold（粗体）和隶书或宋体,12点大
小，行高为 14点。
11.1.8 字体属性 font
11.2 控制图文布局
样式表中对图文布局的控制 是指字符、单词和
行与行之间是如何定位的,包括如何设定字与字之
间、字母之间的距离，以及行距（垂直间距）、文
字的对齐方式、边距、边框及浮动对象等。
11.2.1 设置字间距及字母间距
语法,
word-spacing:normal|长度单位
letter-spacing,normal|长度单位
说明,
⑴ Word-spacing,用于设置 英文单词 之间的距离；
(2)letter-spacing,用于设置 英文字母 之间的距离。
⑵ 两者 可以使用前面讲到的任何一种长度单位 。
⑶ 如果使用 normal参数，将按照浏览器默认设置显示。
11.2.2 设置行距 line-height
语法,
line-height:normal|数字 |长度单位 |比例
说明,
设置相邻两行的基准线之间的垂直距离 。
（基准线就是英文小写字母如 x,a的下阶线，但不包括
诸如 y,g等字母超过下阶线的部分）
实例,
⑴ 用数字设定行距
b{font-size=12pt;line-height:2}
表示将利用字号来确定行距，将字号乘以设定
的参数值，即 12X2=24，所以在本例中行高将是 24
点。
⑵ 用长度单位设定行距
b{line-height:11pt}
⑶ 用比例设定行距
b{font-size:10pt;line-height:140%}
表示行距是文字的基准大小 10pt的 140%，即
14pt。
语法,
text-align:left|right|center|justify
vertical-align:top|bottom|text-top|text-
bottom|baseline|middle|sub|super
11.2.3 文字对齐
说明,
⑴ text-align属性用于文字的水平对齐,但
这项属性 只用于整块的内容,如 <p>,<h1>到 <h6>
和 <ul>等。
text-align参数值说明
参数值 说 明
left 浏览器默认的对齐方式，左对齐。
right 右对齐。
center 居中。
justify 左右对齐。
⑵ vertical-align属性用于控制文字或其他
网页对象相对于母体对象的垂直位置 。
vertical-align参数值说明
参数值 说 明
top 使元素和行中最高的元素向上对齐
bottom 使元素和行中最低的元素向下对齐
text-top 使元素和上级元素的字体向上对齐
text-bottom 使元素和上级元素的字体向下对齐
baseline 使元素和上级元素的基线对齐（默认）
middle 纵向对齐元素基线加上上级元素字母, x”高度的一半的中点
sub 将对象以下标的形式显示。
super 将对象以上标的形式显示。
11.2.4 首行缩进属性 text-indent
首行缩进属性 用来指定段文字的第一行文字缩
进的距离，而浏览器的默认值不缩进 。
语法,
text-indent:数字 |百分比
说明,
在 IE浏览器中 使用比例参数时，是相对于整个
浏览器窗口的宽度，而不是相对于段落的宽度 。
11.3 颜色及背景
11.3.1 颜色属性 color
语法,
color,<颜色 >
实例,
h1{color:blue}
h2{color:#000080}
利用 backgroud-color属性设置背景颜色。
语法,
background-color,<颜色 >|transparent（透明）
说明：初始值为 transparent（透明）。
实例,
body{background-color:white}
h1{background-color:#000080}
11.3.2 背景颜色属性
11.3.3 背景图像属性
在 CSS里，可利用 background-image属性，
将网页背景以图片的方式显示。
语法,
background-image,<url>|none（无）
11.3.4 背景图片重复属性
设定一个指定的背景图片如何被重复 。
语法,
background-repeat,repeat|repeat-
x|repeat-y|no-repeat
background-repeat属性参数值说明
参数值 说 明
repeat 背景图片水平与垂直方向同时平铺（默认值）
repeat-x 背景图片横向重复
repeat-y 背景图片纵向重复
no-repeat 不重复
11.3.5 固定背景图片属性
设置指定的背景图片是跟随内容滚动，还是保
持固定。
语法,
background-attachment,scroll|fixed
说明,
scroll表示滚动,fixed表示固定。初始值
为 scroll。
11.3.6 背景图片的位置属性
?background-position设置背景图片的最初位置
?这个属性只能应用于 块级元素和替换元素 (替换元素
仅指一些已知原有尺寸的元素。 HTML替换元素包括 IMG,
INPUT,TEXTAREA,SELECT,和 OBJECT。 )
语法,
background-position,<百分比 >|<长度 >|<关键字 >
说明如下,
⑴ 以百分比方法设置 background-position属
性的语法如下,
background-position,x% y%
其中 x%代表设置图片的水平位置； y%代表图片的
垂直位置。初始值为 0% 0%。
实例,
P{background-position:70% 50%;repeat-
y;url(..\pic\sky.jpg)｝
表示背景图片的水平位置为 70%，垂直位置为 50%。
⑵ 以长度单位设置 background-position属性
的语法如下,
background-position,x y
使用长度单位可以对背景图片的位置作出更精确
的控制，可以设定水平和垂直定位起点。
实例,
{background-position:70px 10px;url(..\pic\sky.jpg)｝
表示从左起 70像素、垂直 10像素的位置开始显示
图像。
⑶ 以关键字设置 background-position属性的
语法如下,
background-position,
[top|center|bottom]||[left|center|right]
（注,|表示或的意思,||表示二者同时使用,[]表示可搭配使用）
实例,
{background-position:right top;url(..\pic\sky.jpg)｝
11.3.7 背景
语法,background,<值 >
允许值,<背景颜色 >||<背景图像 >||<背景重复 >||<背景附
件 >||<背景位置 >
初始值：未定义
以下是一些背景的声明,
body{background:white url(tree.jpg)}
h1{background:#7fffd4}
p{background:url(tree.jpg) #f0f8ff fixed}
table{background:#0c0 url(tree.jpg) no-repeat
bottom right}
11.4 美化网页与超链接的设置
11.4.1 网页链接属性 anchor
在 CSS里，可以通过网页链接属性 anchor来设置网页
链接文字的效果。
网页链接属性 anchor语法说明
a:link 尚未链接过的超链接文字的样式。
a:visited 已链接过的超链接文字的样式。
a:active 当鼠标点击超链接后，超链接文字所显示的样式。
a:hover 当鼠标移到超链接文字上方时，超链接文字所显示的样式。
11.4.2 设置滚动条属性 scrollbar
在 CSS里，可以通过滚动条属性
scrollbar来美化滚动条。
说明如下
滚动条 scrollbar的参数说明
参数值 说 明
scrollbar-face-color 设置 A区域的颜色。
scrollbar-shadow-color 设置 A区域阴影的颜色。
scrollbar-highlight-color 设置 A区域的边框颜色。
scrollbar-3dlight-color 设置 A区域的 3D光影。
scrollbar-darkshadow-color 设置 A区域的 3D阴影。
scrollbar-track-color 设置 B区域的滚动条轨道颜色。
scrollbar-arrow-color 设置 A区域内内小三角形的颜色。
11.4.3 光标属性的设置 cursor
光标属性 cursor可设置光标的图形, cursor属性
共提供了 16种属性值，如下表所示。
11.4.4 边框的设置
在 CSS中，可以通过 margin属性,border属性
和 padding属性控制段落、图片和表格等对象的样
式。如：边框的宽度、颜色、样式以及对象与边框
之间的空白距离 。
上述三种属性通常用于文件段落、图片、表格
与网页边界的空白距离，或者是设置表格内的边框
及空白样式等，如下图所示。
边框属性说明
说明,
?margin属性：控制对象边界与文件其他内容的空
白距离。
?border属性：控制表格四边边框的宽度、颜色及
样式。
?padding属性：控制表格中的内容或图片与对象边
界的空白距离。
1．边界的设置 margin
通过 margin属性可以设定对象与四周文字之间
的距离。
其语法如下,
margin-(top,right,bootom,left)：长度 |百分比 |auto
说明,
⑴ margin属性有 margin-top（顶部空白区域）、
margin-bottom（底部空白区域）,margin-left
（左边空白区域）和 margin-right（右边空白区域）
四个边界属性。通过设置这 4项属性,可以控制一个
对象四周空白区域的大小 。
⑵ 可以使用任何长度单位 。
⑶ 如将边距设为负值，就可以将两个对象重叠在一起。
用法如下
利用 margin属性设置边界值的方法有,
⑴ 设置一个边界值：若 margin属性只设置一个边界
值时，则上、右、下和左四个边界都将调用此值。
实例,
margin:2cm
⑵ 设置对应边值：在 margin属性中设置对应边值，
是指上边界与下边界、左边界与右边界为相对应的边
界，所以若设置对应边其中一边的值时，另一边将调
用此值。
实例,
margin,2cm 4cm
上边界与下边界的值为 2cm，左边界与右边界的
值为 4cm。
⑶ 设置四个边界值：利用 margin属性，顺序输
入上、右、下、左边界的值，就可以完成四个边
界的设置了。
实例,
margin:20pt 30% 30px 2cm
上边界为 20pt，右边界为 30%，下边界为
30px，左边界为 2cm。
2．设置边框的宽度 border-width
在 CSS里，可以利用 border-width属性来控制
边框的宽度。
语法 1,
border-width:thin|medium|thick|长度
说明,border-width的参数值 thin代表细、
medium代表中等,thick代表粗。
语法 2,
border-top-width:长度
border-bottom-width:长度
border-left-width:长度
border-right-width:长度
用法如下
border-width属性设置宽度有 4种方法,
?设置一个值：四条边框宽度均使用同一个设置值。
?设置两个值：上边框与下边框宽度调用第一个值，
右边框与左边框宽度调用第二个值。
?设置三个值：上边框宽度调用第一个值，右边框
与左边框宽度调用第二个值，下边框宽度调用第三
个值。
?设置四个值：四条边框宽度的调用顺序，顺序为
上、右、下、左。
3．设置边框的颜色 border-color
border-color属性用于设置边框的颜色，它的使
用方法与 border-width相同。
语法 1,
border-color:#rrggbb
border-color:#rrggbb #rrggbb #rrggbb #rrggbb
说明：其中第 1种颜色为顶部边框颜色，其中第
2种颜色为右边边框颜色，其中第 3种颜色为底部边
框颜色，其中第 4种颜色为左边边框颜色。
语法 2,
border-top-color:#rrggbb
border-bottom-color:#rrggbb
border-left-color:#rrggbb
border-right-color:#rrggbb
4．设置边框的样式 border-style
border-style属性用于设置边框的样式。
其语法设置如下,
border-style:none|solid|double|dotted|
dashed|groove|ridge|inset|outset
说明如下,
border-style属性设置值
属性 说明
solid 实线
double 双直线
dotted 小点虚线
dashed 大点虚线
groove 3D凹线
ridge 3D凸线
inset 3D框入线
outset 3D隆起线
5．设置边框属性 border
在 CSS里，通过 border属性可以快速设置边框的宽
度、边框颜色及边框样式。其语法如下,
border:<border-width>||<border-style>||<color>
实例,
border:1pt double #ff0000
设置边框的宽度为 1pt、样式为双直线、颜色为红
色。
6．内边界的设置 padding
padding属性主要是控制元素的内容与元素外框
内缘的距离 。其语法如下,
padding-(top,right,bottom,left):长度 |百分比
说明：其用法与 border-color相同。
11.5.1 CSS定位属性
利用样式表的定位属性，就可以精确地设定对象的位置，
还能将各对象进行叠放处理。
语法,
position:<absolute|relative>;left:<值 >;top:<值 >;
[width:<值 >];[height:<值 >];[visibility:<值 >];
[z-index:<值 >]
说明,
⑴ position属性 用于对象的定位，它的参数值有
absolute和 relative两种。
absolute表示绝对定位,在绝对定位中对象的位置
是相对于浏览器窗口而言的。
relative表示相对定位 。被定位的对象的位置是相
对于它通常应在的位置而言的。如果停止使用相对
定位，则文字的显示位置将恢复正常。
⑵ left属性 用于设定对象距浏览器窗口左边的距离；
top属性 用于设定对象距离浏览器窗口顶部的距离。
⑶ width属性用于设定对象的宽度 。宽度属性只在绝对定位时
使用。
⑷ height属性用于设定对象的高度 。高度和宽度的设置类似，
只不过是在垂直方向上进行的。
⑸ visibility属性用于设定对象是否显示 。这条属性对于被
定位和未定位的对象都适用。
该属性的参数有三种,
? isible:使对象可以被看见
? hidden:使对象被隐藏
? inherit：对象被继承母体对象的可视性设置
⑹ z-index属性用于在网页上重叠文字和图像 。当定位多个对
象并将其重叠时，可以使用 z-index来设定哪一个对象应出现
在最上层。 z-index参数值使用整数，用于绝对定位或相对定
位了的对象，也可以给图像设定属性。
示例,
div{position:absolute;left:200px;top:40px;width:150px}
浏览器执行到这项规则时，它将文字块按照规则规定
的效果显示，将段落的最大水平尺寸限制在 150像素。
实例,
h4{visibility:hidden}
控制用 H4标识的对象不可见。
当一个对象被隐藏后，它仍然 1要占据浏览器窗口中
的原有空间。
示例 1,absolute绝对定位
示例 2：设置文字及图片的层次
示例 3：设置文字的三维效果
