第 10章 CSS的基础知识
10.1 什么是样式表
10.2 样式表的基本结构
10.3 如何在网页中加入 css
10.4 div与 span标签
10.5 CSS的几个特性
?CSS 是 Cascading Style Sheet 的缩
写。译作「层叠样式表单」。
?是用于 控制网页元素的显示方式
?样式表的宗旨就是将结构 (内容 )和格式分离
?CSS也是一种标记语言，有很多属性来源于
HTML，它也需要通过浏览器解释执行。
10.1 什么是样式表
10.2 样式表的基本结构
?一个样式表由许多样式规则组成 的，用以告诉浏览
器怎样去显示一个网页文档。
? 样式表的核心是规则，样式表的规则格式如下,
Selector{property1:value1;property2
:value2;property3:value3;…… }
i,Selector定义样式作用的对象
ii.property为 CSS属性,value为属性对应的值
样式定义的语法示例
H1 {text-align:center; font-family:黑体 }
选择器 样式定义
样式属性 属性取值
常用 Selector类型
? HTML标记符
? 用户定义的类
? 用户定义的 ID
? 虚类
HTML标记符的 Selector
? HTML标记符是最常用的 selector，它
重新定义了 HTML标记符的显示效果。
例如,
? H1{text-align:center;color:red}
? 使所有用 H1标记符修饰的内容都居中和用
红色显示。
? 示例如下
例 10-1：建立一个简单的样式表
<html>
<head><title>简单的样式表 </title>
<style type="text/css">
<!--
h1{color:red;font-size:35px;font-family:黑体 }
p{background:yellow;color:blue;font-size:25px;font-family:隶书 }
--> </style>
</head>
<body bgcolor=lightblue>
<center><h1>样式表 </h1>
<p>这是一个简单的样式表 </p>
</center>
</body></html>
用户定义类
? 定义方式
classname{property:value… }
表示任何 带有 class属性为 classname
的标记符 都采用所定义的样式。
定义方式
?*,classname{样式属性,属性值 ; 样式属性,
属性值 ;......}
?所有 HTML标签都可引用它
?*符号可以省略
?HTML标签, classname{样式属性,属性值 ; 样式
属性,属性值 ;......}
?只有该指定的标签才能引用它
举例如下
.pp{color:lime; font-family:黑体 }
p.pt{color:blue; font-family:仿宋 }
这些类可以使用 class属性在 HTML中引用,
<h1 class=pp> 这是我们定义的 PP类 </h1>
<p class=pp>这是我们定义的 PP </p>
<p class=pt> 这是我们定义的 PT类 </p>
完整示例
用户定义 ID
? idname{property:value… }
表示任何 ID属性为 idname的标记符都
采用所定义的样式。
? 用户定义 ID与 class的作用完全相同，
一般使用其中之一即可。
13
?# idname{样式属性,属性值 ; 样式属性,属性
值 ;......}
?所有 HTML标签都可引用它
?HTML标签 # idname {样式属性,属性值 ; 样
式属性,属性值 ;......}
?只有该指定的标签才能引用它
定义方式
举例如下
#pp{color:lime; font-family:黑体 }
p#pt{color:blue; font-family:仿宋 }
这些类可以使用 id属性在 HTML中引用,
<h1 id=pp> 这是我们定义的 PP类 </h1>
<p id=pp>这是我们定义的 PP </p>
<p id=pt> 这是我们定义的 PT类 </p>
虚类 Selector
?,link 未访问过的超链接
?,visited 访问过的超链接
?,active 活动超链接
?,hover 悬停状态的超链接
虚类 Selector示例
CSS属性单位
? 绝对长度单位,网页定义上常常使用的
绝对长度值由厘米（ 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
? 相对长度单位, CSS还支持下列三种长
度的相对单位
?em（当前字体中字母 M的宽度）
?ex（当前字体中字母 X的高度）
?px（一个象素的大小）。
?颜色单位,
?颜色名, #RRGGBB
?rgb(rrr,ggg,bbb)
?rgb(rrr%,ggg%,bbb%)
10.3 如何在网页中加入 css
可以使用四种方法将样式表加入到网页中
? 内联样式 (Inline Styles )
? 嵌入一个样式表 (Embedding a Style Block)
? 将一个外部样式表链接到网页
? 输入一个样式表
以上四种方法，可分成 内部样式表 （前两者）,外
部样式表 （后两者）两类。
10.3.1内联样式
?样式可以使用 STYLE属性 内联。
?STYLE属性 可以 应用于任意 BODY内的 HTML元
素 (包括 BODY本身 )，除了 BASEFONT,PARAM和
SCRIPT。
?其语法如下,
<HTML标签名称 style="样式属性,属性值；
样式属性,属性值,..">
以下是一个例子
?<h1 style=“text-align:center;color:blue”>
?<P style=“color,red; font-family,?New
Century Schoolbook?,serif”>
这段的样式是红色的 New Century
Schoolbook字体。 </P>
?缺点,因为和需要展示的内容混合在一起，
没有实现两者的分离。
?缺点,在标签中，用设置 style属性的方法，一次
只能控制一个标签的样式
运行示例
10.3.2嵌入一个样式表
?将样式表信息都列于 HTML文档的头部
?基本语法如下,
<STYLE TYPE=―text/css‖ MEDIA=screen>
<!–
样式规则定义
-->
</STYLE>
示例,例 10-1：建立一个简单的样式表
<STYLE TYPE="text/css" MEDIA=screen>
<!–
BODY { background,url(foo.gif);color,black }
P EM { background,yellow; color,black }
.note { margin-left,5em; margin-right,5em }
-->
</STYLE>
? STYLE元素放在文档的 HEAD部分。
? 必须的 TYPE属性用于指定类型为, text/css ‖
? 在 STYLE中可 指定 TITLE和 MEDIA属性。
? 缺点,只限于一个页面内使用
?样式表的规则单独保存在一个文件中
?外部的样式表可以通过 HTML的 LINK元素
连接到 HTML文档中
?一个样式表文件可链接到多个 HTML文件
10.3.3 将一个外部样式表链接到网页
基本语法如下,
<head>
<title>...</title>
<link Rel=stylesheet href="*.css" type="text/css">
</head>
说明,
?外部样式表文件中 不能含有任何 HTML标签 。样式
表仅仅由样式表规则组成。
?外部样式表文件中,无须使用注释标签 。
?必须将 CSS文件与 HTML文件一起发布到服务器中 。
在网页被打开时，浏览器将依照链接标签将含有链接外
部样式表文件的 HTML网页按照样式表规则显示。
?LINK标签,
<LINK REL=StyleSheet HREF=“aaa.css” TYPE=“text/css”
TITLE=“8-bit Color Style” MEDIA=“screen,print”>
?TYPE属性 用于指定类型为 text/css
?MEDIA属性可选,用于指定样式表被接受的介质或媒体。允
许的值有
?screen (缺省值 )，提交到计算机屏幕；
?print,输出到打印机；
?projection，提交到投影机；
?aural，扬声器；
?braille，提交到凸字触觉感知设备；
?tty，电传打字机 (使用固定的字体 )；
?tv，电视机；
?all，所有输出设备。
多样的媒体通过用逗号隔开的列表或值 all指定。
?REL属性,用于定义连接的文件和 HTML文
档之间的关系。 REL=StyleSheet指定一个
固定 或 首选 的样式，而 REL=―Alternate
StyleSheet‖定义一个 交互 样式。 固定 样式
在样式表激活时总被应用。
?TITLE属性：给样式指定一个标题，可将多
个样式指定同一个标题，从而组合成一个首
选样式（示例如下）
?REL=StyleSheet和一个 TITLE属性的组
合指定一个首选的样式
?每个网页不能指定多于一个的首选样式。
多个样式表组合成一个首选样式，例如,
<link rel=stylesheet href="basics.css"
title="contemporary">
<link rel=stylesheet href="tables.css"
title="contemporary">
<link rel=stylesheet href="forms.css"
title="contemporary">
示例
一个样式表可以使用 CSS的 @import 指令输入到网
页中。这个指令用于一个 CSS文件或 HTML的
STYLE元素内部。其语法如下,
<style type="text/css">
<!—
@import url(外部样式表的文件名称 );
-->
</style>
说明,
⑴ import语句后的, ；, 号是必须的。
⑵ 要输入的样式表文件的扩展名为,css。
10.3.4 输入 一个样式表
样式的优先级
? 样式的优先级 遵循, 就近优先, 的原则,
也就是说，距离所修饰对象越近的样式，
其优先级越高。
? 样式 如果冲突，则采用高优先级样式 ；
如果 不冲突，则采用叠加的样式效果 。
样式的优先级示例
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="test.css">
<STYLE>
P {color,red}
</STYLE >
</HEAD>
<BODY>
<P>正文内容 </P>
</BODY>
</HTML>
其中,test.css 的内容如下,
P {color,green}
样式的优先级示例
<HTML>
<HEAD>
<STYLE>
P {color,red}
</STYLE >
<LINK rel="stylesheet" type="text/css" href="test.css">
</HEAD>
<BODY>
<P>正文内容 </P>
</BODY>
</HTML>
其中,test.css 的内容如下,
P {color,green}
10.5 div与 span标签
div标签
?DIV元素：, division‖,,部分, 的简称，是
一个 块级元素 。它是一个 成对标签
?DIV可以包含段落、标题、表格甚至其它部分。
这使 DIV便于建立不同集成的类，如章节、摘要或
备注。
?通过它可以直接引用样式，不再需要依附于
HTML标签了
?它能接受 STYLE,CLASS和 ID属性。
35
其语法如下,
<div id=指定样式名称 >......</div>
或者,<div class=指定样式名称 >......</div>
或者,
<div style="样式属性,属性值；样式属性,属性
值,.." >......</div>
在使用 <div>标记时，可以使用 width与
height属性设置区域的大小。
请看示例
span标签
?<span>标签一般用在网页中某一小段文字。
?其语法如下,
<span id=指定样式名称 >......</span>
或者
<span class=指定样式名称 >......</span>
?span标签被加入到 HTML中的主要目的是用于样
式表，所以当样式表失效时它就没有任何作用。
?span标签可以使用 clsss和 id类选择符。
37
<div>与 <span>的差异,
⑴ 在 <div>区域内的对象与区域外的上下文
会自动换行；而 <span>区域内的对象与区域外
的上下文不会自动换行。
⑵ <div>与 <span>标签可同时使用，但建议
<div>标签可包含 <span>，但 <span>最好不要
包含 <div>标签，否则会造成 <span>标签的区域
不完整，而形成断行的现象。
请看示例
10.6 CSS的几个特性
1．定义规则时 可以归类 CSS的规则，即 多
个 HTML标签采用同一样式,例,
h1,p{font-family:黑体 }
这项规则设定所有被 <h1>和 <p>标签包含的
网页内容将用黑体显示。
2,样式表的规则具有继承性
样式表的规则可从母体延续到子体,例,
b{color:blue}
这项规则告诉浏览器将所有 <b>之内的文字
用蓝色显示。但是在下列情况下，浏览器该如何
处理呢？
<b>这是一个 <i>样式表 </i>实例 </b>
对于 <i>标签并没有设定样式，但因为 <i>位
于 <b>之中，所以它将继承母体 <b>设定的样式，
也以蓝色显示。
3．情景选择
如果 想让某个规则在特定的情景下才有效，可
定义一个带 情景选择的样式表 。
带 情景选择的样式表的格式如下,
情景标签 标识符 {属性,属性值 }
请看示例
10.1 什么是样式表
10.2 样式表的基本结构
10.3 如何在网页中加入 css
10.4 div与 span标签
10.5 CSS的几个特性
?CSS 是 Cascading Style Sheet 的缩
写。译作「层叠样式表单」。
?是用于 控制网页元素的显示方式
?样式表的宗旨就是将结构 (内容 )和格式分离
?CSS也是一种标记语言，有很多属性来源于
HTML，它也需要通过浏览器解释执行。
10.1 什么是样式表
10.2 样式表的基本结构
?一个样式表由许多样式规则组成 的，用以告诉浏览
器怎样去显示一个网页文档。
? 样式表的核心是规则，样式表的规则格式如下,
Selector{property1:value1;property2
:value2;property3:value3;…… }
i,Selector定义样式作用的对象
ii.property为 CSS属性,value为属性对应的值
样式定义的语法示例
H1 {text-align:center; font-family:黑体 }
选择器 样式定义
样式属性 属性取值
常用 Selector类型
? HTML标记符
? 用户定义的类
? 用户定义的 ID
? 虚类
HTML标记符的 Selector
? HTML标记符是最常用的 selector，它
重新定义了 HTML标记符的显示效果。
例如,
? H1{text-align:center;color:red}
? 使所有用 H1标记符修饰的内容都居中和用
红色显示。
? 示例如下
例 10-1：建立一个简单的样式表
<html>
<head><title>简单的样式表 </title>
<style type="text/css">
<!--
h1{color:red;font-size:35px;font-family:黑体 }
p{background:yellow;color:blue;font-size:25px;font-family:隶书 }
--> </style>
</head>
<body bgcolor=lightblue>
<center><h1>样式表 </h1>
<p>这是一个简单的样式表 </p>
</center>
</body></html>
用户定义类
? 定义方式
classname{property:value… }
表示任何 带有 class属性为 classname
的标记符 都采用所定义的样式。
定义方式
?*,classname{样式属性,属性值 ; 样式属性,
属性值 ;......}
?所有 HTML标签都可引用它
?*符号可以省略
?HTML标签, classname{样式属性,属性值 ; 样式
属性,属性值 ;......}
?只有该指定的标签才能引用它
举例如下
.pp{color:lime; font-family:黑体 }
p.pt{color:blue; font-family:仿宋 }
这些类可以使用 class属性在 HTML中引用,
<h1 class=pp> 这是我们定义的 PP类 </h1>
<p class=pp>这是我们定义的 PP </p>
<p class=pt> 这是我们定义的 PT类 </p>
完整示例
用户定义 ID
? idname{property:value… }
表示任何 ID属性为 idname的标记符都
采用所定义的样式。
? 用户定义 ID与 class的作用完全相同，
一般使用其中之一即可。
13
?# idname{样式属性,属性值 ; 样式属性,属性
值 ;......}
?所有 HTML标签都可引用它
?HTML标签 # idname {样式属性,属性值 ; 样
式属性,属性值 ;......}
?只有该指定的标签才能引用它
定义方式
举例如下
#pp{color:lime; font-family:黑体 }
p#pt{color:blue; font-family:仿宋 }
这些类可以使用 id属性在 HTML中引用,
<h1 id=pp> 这是我们定义的 PP类 </h1>
<p id=pp>这是我们定义的 PP </p>
<p id=pt> 这是我们定义的 PT类 </p>
虚类 Selector
?,link 未访问过的超链接
?,visited 访问过的超链接
?,active 活动超链接
?,hover 悬停状态的超链接
虚类 Selector示例
CSS属性单位
? 绝对长度单位,网页定义上常常使用的
绝对长度值由厘米（ 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
? 相对长度单位, CSS还支持下列三种长
度的相对单位
?em（当前字体中字母 M的宽度）
?ex（当前字体中字母 X的高度）
?px（一个象素的大小）。
?颜色单位,
?颜色名, #RRGGBB
?rgb(rrr,ggg,bbb)
?rgb(rrr%,ggg%,bbb%)
10.3 如何在网页中加入 css
可以使用四种方法将样式表加入到网页中
? 内联样式 (Inline Styles )
? 嵌入一个样式表 (Embedding a Style Block)
? 将一个外部样式表链接到网页
? 输入一个样式表
以上四种方法，可分成 内部样式表 （前两者）,外
部样式表 （后两者）两类。
10.3.1内联样式
?样式可以使用 STYLE属性 内联。
?STYLE属性 可以 应用于任意 BODY内的 HTML元
素 (包括 BODY本身 )，除了 BASEFONT,PARAM和
SCRIPT。
?其语法如下,
<HTML标签名称 style="样式属性,属性值；
样式属性,属性值,..">
以下是一个例子
?<h1 style=“text-align:center;color:blue”>
?<P style=“color,red; font-family,?New
Century Schoolbook?,serif”>
这段的样式是红色的 New Century
Schoolbook字体。 </P>
?缺点,因为和需要展示的内容混合在一起，
没有实现两者的分离。
?缺点,在标签中，用设置 style属性的方法，一次
只能控制一个标签的样式
运行示例
10.3.2嵌入一个样式表
?将样式表信息都列于 HTML文档的头部
?基本语法如下,
<STYLE TYPE=―text/css‖ MEDIA=screen>
<!–
样式规则定义
-->
</STYLE>
示例,例 10-1：建立一个简单的样式表
<STYLE TYPE="text/css" MEDIA=screen>
<!–
BODY { background,url(foo.gif);color,black }
P EM { background,yellow; color,black }
.note { margin-left,5em; margin-right,5em }
-->
</STYLE>
? STYLE元素放在文档的 HEAD部分。
? 必须的 TYPE属性用于指定类型为, text/css ‖
? 在 STYLE中可 指定 TITLE和 MEDIA属性。
? 缺点,只限于一个页面内使用
?样式表的规则单独保存在一个文件中
?外部的样式表可以通过 HTML的 LINK元素
连接到 HTML文档中
?一个样式表文件可链接到多个 HTML文件
10.3.3 将一个外部样式表链接到网页
基本语法如下,
<head>
<title>...</title>
<link Rel=stylesheet href="*.css" type="text/css">
</head>
说明,
?外部样式表文件中 不能含有任何 HTML标签 。样式
表仅仅由样式表规则组成。
?外部样式表文件中,无须使用注释标签 。
?必须将 CSS文件与 HTML文件一起发布到服务器中 。
在网页被打开时，浏览器将依照链接标签将含有链接外
部样式表文件的 HTML网页按照样式表规则显示。
?LINK标签,
<LINK REL=StyleSheet HREF=“aaa.css” TYPE=“text/css”
TITLE=“8-bit Color Style” MEDIA=“screen,print”>
?TYPE属性 用于指定类型为 text/css
?MEDIA属性可选,用于指定样式表被接受的介质或媒体。允
许的值有
?screen (缺省值 )，提交到计算机屏幕；
?print,输出到打印机；
?projection，提交到投影机；
?aural，扬声器；
?braille，提交到凸字触觉感知设备；
?tty，电传打字机 (使用固定的字体 )；
?tv，电视机；
?all，所有输出设备。
多样的媒体通过用逗号隔开的列表或值 all指定。
?REL属性,用于定义连接的文件和 HTML文
档之间的关系。 REL=StyleSheet指定一个
固定 或 首选 的样式，而 REL=―Alternate
StyleSheet‖定义一个 交互 样式。 固定 样式
在样式表激活时总被应用。
?TITLE属性：给样式指定一个标题，可将多
个样式指定同一个标题，从而组合成一个首
选样式（示例如下）
?REL=StyleSheet和一个 TITLE属性的组
合指定一个首选的样式
?每个网页不能指定多于一个的首选样式。
多个样式表组合成一个首选样式，例如,
<link rel=stylesheet href="basics.css"
title="contemporary">
<link rel=stylesheet href="tables.css"
title="contemporary">
<link rel=stylesheet href="forms.css"
title="contemporary">
示例
一个样式表可以使用 CSS的 @import 指令输入到网
页中。这个指令用于一个 CSS文件或 HTML的
STYLE元素内部。其语法如下,
<style type="text/css">
<!—
@import url(外部样式表的文件名称 );
-->
</style>
说明,
⑴ import语句后的, ；, 号是必须的。
⑵ 要输入的样式表文件的扩展名为,css。
10.3.4 输入 一个样式表
样式的优先级
? 样式的优先级 遵循, 就近优先, 的原则,
也就是说，距离所修饰对象越近的样式，
其优先级越高。
? 样式 如果冲突，则采用高优先级样式 ；
如果 不冲突，则采用叠加的样式效果 。
样式的优先级示例
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="test.css">
<STYLE>
P {color,red}
</STYLE >
</HEAD>
<BODY>
<P>正文内容 </P>
</BODY>
</HTML>
其中,test.css 的内容如下,
P {color,green}
样式的优先级示例
<HTML>
<HEAD>
<STYLE>
P {color,red}
</STYLE >
<LINK rel="stylesheet" type="text/css" href="test.css">
</HEAD>
<BODY>
<P>正文内容 </P>
</BODY>
</HTML>
其中,test.css 的内容如下,
P {color,green}
10.5 div与 span标签
div标签
?DIV元素：, division‖,,部分, 的简称，是
一个 块级元素 。它是一个 成对标签
?DIV可以包含段落、标题、表格甚至其它部分。
这使 DIV便于建立不同集成的类，如章节、摘要或
备注。
?通过它可以直接引用样式，不再需要依附于
HTML标签了
?它能接受 STYLE,CLASS和 ID属性。
35
其语法如下,
<div id=指定样式名称 >......</div>
或者,<div class=指定样式名称 >......</div>
或者,
<div style="样式属性,属性值；样式属性,属性
值,.." >......</div>
在使用 <div>标记时，可以使用 width与
height属性设置区域的大小。
请看示例
span标签
?<span>标签一般用在网页中某一小段文字。
?其语法如下,
<span id=指定样式名称 >......</span>
或者
<span class=指定样式名称 >......</span>
?span标签被加入到 HTML中的主要目的是用于样
式表，所以当样式表失效时它就没有任何作用。
?span标签可以使用 clsss和 id类选择符。
37
<div>与 <span>的差异,
⑴ 在 <div>区域内的对象与区域外的上下文
会自动换行；而 <span>区域内的对象与区域外
的上下文不会自动换行。
⑵ <div>与 <span>标签可同时使用，但建议
<div>标签可包含 <span>，但 <span>最好不要
包含 <div>标签，否则会造成 <span>标签的区域
不完整，而形成断行的现象。
请看示例
10.6 CSS的几个特性
1．定义规则时 可以归类 CSS的规则，即 多
个 HTML标签采用同一样式,例,
h1,p{font-family:黑体 }
这项规则设定所有被 <h1>和 <p>标签包含的
网页内容将用黑体显示。
2,样式表的规则具有继承性
样式表的规则可从母体延续到子体,例,
b{color:blue}
这项规则告诉浏览器将所有 <b>之内的文字
用蓝色显示。但是在下列情况下，浏览器该如何
处理呢？
<b>这是一个 <i>样式表 </i>实例 </b>
对于 <i>标签并没有设定样式，但因为 <i>位
于 <b>之中，所以它将继承母体 <b>设定的样式，
也以蓝色显示。
3．情景选择
如果 想让某个规则在特定的情景下才有效，可
定义一个带 情景选择的样式表 。
带 情景选择的样式表的格式如下,
情景标签 标识符 {属性,属性值 }
请看示例
