第 10讲 网页布局与 CSS
,网页设计与编程,
网页布局与层叠样式表
样式表的概念并不是新创造的，文字处
理器和桌面印刷系统长期以来都在使用
做某种特殊样式的排版
样式表 最重要 的作用是提供了一种能使
所有 Web页面的样式保持一致的方法
CSS的必要性
许多 HTML元素都有外观属性，如果在元素中
没有指定相应的值，那么浏览器将使用这些属
性的默认值。
例如,<h2>元素中包含 font-size属性，某个浏
览器可能将这个属性的默认值设定为 30个点
（ pt）
而通过样式表则可以将该默认值更改为 26个，
这种改动可以只对某个 <h2>元素有效，也可
以对这个文档中所有的 <h2>元素都有效。
CSS的必要性
样式表的某些功能可能需要借助元素的
各种属性, 字体的样式以及字体的尺寸
元素来实现
然而, 利用样式表可以对这些样式说明
进行更精确, 更一致的描述
目前已经不提倡直接绝大多数用于描述
外观的元素属性, 而是建议使用样式表 。
样式表的层次
样式表的三个层次按照从低层到高层的
顺序依次是,
? 内置 (inline)样式表
? 文档层 (document level)样式表
? 外部 (external)样式表。
样式表的层次
HTML样式表之所以被称为层叠样式表，
是因为文档样式可以三个不同层次上进
行定义
低层样式表可以取代高层样式表，所以
某个元素内容的样式是由样式表的叠加
来确定的。
样式表的层次
? 内置样式表适用于单个元素的内容
? 文档层样式表适用于整个文档的主体
? 外部样式表则可以应用在多个文档的主体中。
在使用时，内置样式表优先于文档样式
表，而文档样式表又优先于外部样式表。
在出现冲突的情况下，低层次的样式表
具有使用上的优先权。
CSS可能遇到的问题
与元素和元素属性所面临的情况一样,
某种特殊的浏览器可能不能处理样式表
中指定的一些属性值 。
对于这种情况, 浏览器要么用一个可选
择的值进行替代, 要么将简单地忽略所
给出的这些属性值 。
内置样式
内置样式说明出现在元素中, 并且仅适
用于那个元素中的内容 。
这种细粒度的样式应用背离了样式表的
主要设计思想 —— 对完整文档的各种元
素进行样式统一
对内置样式说明应当谨慎使用 。
文档层样式
文档层样式说明出现在文档的头部分,
并且适用于文档的整个主体 。
这是对文档所有内容的显示外观进行格
式统一的一种方法 。
外部样式表
在网站建设中，往往希望网站的整体风
格能够一致，这就是外部样式表的主要
应用目的
外部样式表并不是它们所适用的文档的
一部分。外部样式表单独存储，并且在
所有使用它们的文档中都要进行说明。
外部样式表
可以用 MIME类型 text/css将外部样式表编写成
一些文本文件, 它们可以存储在因特网上的任
何一台计算机中, 浏览器获取外部样式表就如
同获取文档一样 。
网页首部的 <link>元素也可用于指定外部样式
表, 在 <link>元素中, rel属性用于指定被链接
的文档与包含该链接的文档之间的关系, 而
href属性用于指定样式表文档的 URL地址
外部样式表的引用
<link rel = stylesheet type=”text/css”
href=”themes/AutoTheme/style.css”></link
>
指向一个外部样式表的链接必须放在
HTML基本文档的头部 （ header容器
中 ） 。
样式说明格式
一个样式说明的格式取决于该样式表的
层次 。 在一个元素中内置样式说明是以
style属性值的形式出现的, 其一般形式
如下：
style =,property_1:value_1；
property_2:value_2;...;proper
ty_n:value_n;”
样式说明格式
内置样式说明的作用范围只限于所处元
素中的内容部分 。
文 档层样式 说明在 文档头部 以一 个
<style>元素内容的形式出现, 该说明的
格式与内置样式表的格式有很大的区别 。
样式说明格式
在 <style>元素中内容的一般形式如下：
<style type=”text/css”>
<!--
rule_list
-->
</style>
样式说明格式
<style>元素中的 type属性向浏览器指明
了在 <style>元素中样式说明的类型。
在上面这个例子中,type属性被设置成
,text/css‘’，即层叠样式表。
由于还有许多其他类型的样式表，因此
样式说明的类型还是必要的。
样式说明格式
注意,<style>元素中的规则列表是出现
在 HTML注释中的。
由于这些规则列表并不是真正的 HTML，
在规则列表中所包含的是提供给浏览器
的有关外观样式的信息，而不是使用者
看到的内容。
<style>元素的注释
由于 <style>元素的内容是一个 HTML注
释，所以必须使用一种不同的方法在
<style>元素的内容中添加真正的注释
在 <style>元素中这种注释由, /*”开始
至, */”结束。
规则列表 ----rule_list
规则列表中的样式规则均包含两部分：
? 选择器 (selector)
? 列表
前者用于指出受规则影响的一个或多个
元素, 后者由若干成对的属性 /值组成 。
规则列表 ----rule_list
与元素属性的属性 /值不同 (在元素符属性
的每一对属性 /值中, 两个部分之间使用
等号相分隔, 而所形成的列表使用双引
号进行界定 )；
在一个样式规则中, 样式属性一值的各
部分使用冒号相分隔, 而所形成的列表
则出现在大括弧之间 。
规则列表 ----rule_list
一 个 样 式 规 则 的 格 式 如 下 所 示,
tag_name_list{property_1:value_1 ；
property_2, value_2 ； … ； property_n,
value_n}
其中, tag_name_list可以是单个元素
名称, 或一个用逗号相隔的若干元素名
称的列表 。
规则列表 ----rule_list
tag_name_list{property_1:value_1 ；
property_2, value_2 ； … ； property_n,
value_n}
这里所用的词是元素名称, 而不是元素,
因此并没有包含尖括号 。
如果某个属性被赋予了若干个值, 那么
这些值通常使用空格进行分隔, 但是某
些属性使用逗号分隔这些属性值 。
规则列表 ----rule_list
外部样式表的格式与文档样式表的格式相类似,
这个外部文件由样式规则的列表构成 。
通常情况下, 一个样式属性在样式表的作用范
围内适用于所有的元素, 一个内置样式表的作
用范围是元素中所包含的内容 。
对于文档样式表来说, 其作用范围是文档的主
体, 而对于外部样式表来说, 其作用范围则是
所有使用它的文档的主体 。
样式类
样式类允许在不同地方出现的同一个元
素使用来自文档样式表或外部样式表不
同样式说明
通过在 <style>元素中给定一个名称来对
样式类进行定义, 这个名称用一个句点
与元素的名称相连 。
样式类
例如, 在某个文档中如果需要设置两种
段落样式, 譬如 normal和 special,那么
可以在 <style>元素的注释中定义这两个
类, 形式如下：
p.normal{property-value list}
p.special{property-value list}
样式类
然后可以有如下的代码：
<p class =”normal”>
这个问题是可以用, 普通, 的风格进行展示
</p>
<p class =,special”>
那个问题是可以用, 特殊, 的风格进行展示
</p>
样式类
有时候需要一种能作用于若干元素的内容的样
式说明类, 这可以使用一个普通类实现, 在定
义这个普通类的时候, 它的名称中不包括元素
的名称, 而用一个以句点开头的通用类的名称
替代元素的名称 。 例如：
<style>
.italic {font-style,italic}
</style>
样式类
然后在某个文档的主体中可以包含下面
这些代码：
<h3 class=”italic”>第 3章 </h3>
首先,需要注意的是,…
<p class =,italic”>
但是,还需要提醒的是, …
</p>
属性和属性值
HTML元素中的属性可以分成六大类：
? 字体
? 颜色及背景
? 文本
? 边框与布局
? 列表
? 元素符等。
属性和属性值
属性值可以有多种表示形式 。 当关键字
属性值的可选范围有限并且均进行了预
定义, 那么就可以使用这些关键字属性
值, 例如 underline和 small。
属性和属性值
属性值度量标准与前述相同。
但长度属性值后面必须紧跟着用两个字
符的缩写词表示的单位名，在数字和单
位名之间不能留有空格。
可能出现的单位名包括,px(像素 )/ in(英
寸 )/ cm(厘米 )/ mm(毫米 )/ pt(点 )和百分
比，百分比形式的值是在数字后面加上
百分号。
属性和属性值
URL属性值的形式与链接中所使用的 URL
的形式则不同, 这些 URL属性值的一般形
式如下：
url(protocol://server/pathname)
? 在 url与左括号之间不能留有空格 。
属性和属性值
在元素中定义属性值之后，该元素中内嵌的所
有元素将通过继承获得这些属性值。
因此，在 <body>元素中使用一个内置样式表
设置某个属性值将会有效地影响整个文档中该
属性值的设置。
除非发生属性值的替代现象，否则文档中的每
个元素都将继承 <body>中的属性值。
<Span>和 <Div>元素
在许多情况下, 要求某些特殊的字体属
性只应用于整个段落中的部分文本 。
例如, 将同一行中的某个字或词组使用
不同的字体尺寸或颜色显示出来通常是
很有帮助的 。
<Span>元素
<span>元素就是针对此目的设计的 。 例
如, 在下例中,, 全面, 这个词与段落
中的其他部分并没有区别显示 。
<p>
能够对文本进行 <span>全面 </span>控制是一件很
有意思的事
</p>
<Span>元素
<span>元素的惟一用法是使用内置样式
表更改属性值, 例如：
<p> 能 够 对 文 本 进 行 <span style = "font-
size:24pt; font-family:黑体 ; color:red">
全面 </span>控制是一件很有意思的事
</p>
<Div>元素
在网页中，节是很常见的形式，每节由若干段
落构成，而且每节都有各自的外观表示样式。
虽然在段落中使用样式类。然而，往往在设计
中希望不仅是对各个段落，而且可以对网页中
的节进行样式设置。
这里,<div>元素可以实现这个要求。因此它
的主要用途是指定网页中某节或某区域的外观
展示细节。
小结
本讲主要介绍 CSS的用途、特点
CSS可以用来控制网站的风格
样式类同一个元素使用来自文档样式表或外部
样式表的样式说明
CSS中 HTML元素的属性、属性值表达方法
<span><div>的基本用途
,网页设计与编程,
网页布局与层叠样式表
样式表的概念并不是新创造的，文字处
理器和桌面印刷系统长期以来都在使用
做某种特殊样式的排版
样式表 最重要 的作用是提供了一种能使
所有 Web页面的样式保持一致的方法
CSS的必要性
许多 HTML元素都有外观属性，如果在元素中
没有指定相应的值，那么浏览器将使用这些属
性的默认值。
例如,<h2>元素中包含 font-size属性，某个浏
览器可能将这个属性的默认值设定为 30个点
（ pt）
而通过样式表则可以将该默认值更改为 26个，
这种改动可以只对某个 <h2>元素有效，也可
以对这个文档中所有的 <h2>元素都有效。
CSS的必要性
样式表的某些功能可能需要借助元素的
各种属性, 字体的样式以及字体的尺寸
元素来实现
然而, 利用样式表可以对这些样式说明
进行更精确, 更一致的描述
目前已经不提倡直接绝大多数用于描述
外观的元素属性, 而是建议使用样式表 。
样式表的层次
样式表的三个层次按照从低层到高层的
顺序依次是,
? 内置 (inline)样式表
? 文档层 (document level)样式表
? 外部 (external)样式表。
样式表的层次
HTML样式表之所以被称为层叠样式表，
是因为文档样式可以三个不同层次上进
行定义
低层样式表可以取代高层样式表，所以
某个元素内容的样式是由样式表的叠加
来确定的。
样式表的层次
? 内置样式表适用于单个元素的内容
? 文档层样式表适用于整个文档的主体
? 外部样式表则可以应用在多个文档的主体中。
在使用时，内置样式表优先于文档样式
表，而文档样式表又优先于外部样式表。
在出现冲突的情况下，低层次的样式表
具有使用上的优先权。
CSS可能遇到的问题
与元素和元素属性所面临的情况一样,
某种特殊的浏览器可能不能处理样式表
中指定的一些属性值 。
对于这种情况, 浏览器要么用一个可选
择的值进行替代, 要么将简单地忽略所
给出的这些属性值 。
内置样式
内置样式说明出现在元素中, 并且仅适
用于那个元素中的内容 。
这种细粒度的样式应用背离了样式表的
主要设计思想 —— 对完整文档的各种元
素进行样式统一
对内置样式说明应当谨慎使用 。
文档层样式
文档层样式说明出现在文档的头部分,
并且适用于文档的整个主体 。
这是对文档所有内容的显示外观进行格
式统一的一种方法 。
外部样式表
在网站建设中，往往希望网站的整体风
格能够一致，这就是外部样式表的主要
应用目的
外部样式表并不是它们所适用的文档的
一部分。外部样式表单独存储，并且在
所有使用它们的文档中都要进行说明。
外部样式表
可以用 MIME类型 text/css将外部样式表编写成
一些文本文件, 它们可以存储在因特网上的任
何一台计算机中, 浏览器获取外部样式表就如
同获取文档一样 。
网页首部的 <link>元素也可用于指定外部样式
表, 在 <link>元素中, rel属性用于指定被链接
的文档与包含该链接的文档之间的关系, 而
href属性用于指定样式表文档的 URL地址
外部样式表的引用
<link rel = stylesheet type=”text/css”
href=”themes/AutoTheme/style.css”></link
>
指向一个外部样式表的链接必须放在
HTML基本文档的头部 （ header容器
中 ） 。
样式说明格式
一个样式说明的格式取决于该样式表的
层次 。 在一个元素中内置样式说明是以
style属性值的形式出现的, 其一般形式
如下：
style =,property_1:value_1；
property_2:value_2;...;proper
ty_n:value_n;”
样式说明格式
内置样式说明的作用范围只限于所处元
素中的内容部分 。
文 档层样式 说明在 文档头部 以一 个
<style>元素内容的形式出现, 该说明的
格式与内置样式表的格式有很大的区别 。
样式说明格式
在 <style>元素中内容的一般形式如下：
<style type=”text/css”>
<!--
rule_list
-->
</style>
样式说明格式
<style>元素中的 type属性向浏览器指明
了在 <style>元素中样式说明的类型。
在上面这个例子中,type属性被设置成
,text/css‘’，即层叠样式表。
由于还有许多其他类型的样式表，因此
样式说明的类型还是必要的。
样式说明格式
注意,<style>元素中的规则列表是出现
在 HTML注释中的。
由于这些规则列表并不是真正的 HTML，
在规则列表中所包含的是提供给浏览器
的有关外观样式的信息，而不是使用者
看到的内容。
<style>元素的注释
由于 <style>元素的内容是一个 HTML注
释，所以必须使用一种不同的方法在
<style>元素的内容中添加真正的注释
在 <style>元素中这种注释由, /*”开始
至, */”结束。
规则列表 ----rule_list
规则列表中的样式规则均包含两部分：
? 选择器 (selector)
? 列表
前者用于指出受规则影响的一个或多个
元素, 后者由若干成对的属性 /值组成 。
规则列表 ----rule_list
与元素属性的属性 /值不同 (在元素符属性
的每一对属性 /值中, 两个部分之间使用
等号相分隔, 而所形成的列表使用双引
号进行界定 )；
在一个样式规则中, 样式属性一值的各
部分使用冒号相分隔, 而所形成的列表
则出现在大括弧之间 。
规则列表 ----rule_list
一 个 样 式 规 则 的 格 式 如 下 所 示,
tag_name_list{property_1:value_1 ；
property_2, value_2 ； … ； property_n,
value_n}
其中, tag_name_list可以是单个元素
名称, 或一个用逗号相隔的若干元素名
称的列表 。
规则列表 ----rule_list
tag_name_list{property_1:value_1 ；
property_2, value_2 ； … ； property_n,
value_n}
这里所用的词是元素名称, 而不是元素,
因此并没有包含尖括号 。
如果某个属性被赋予了若干个值, 那么
这些值通常使用空格进行分隔, 但是某
些属性使用逗号分隔这些属性值 。
规则列表 ----rule_list
外部样式表的格式与文档样式表的格式相类似,
这个外部文件由样式规则的列表构成 。
通常情况下, 一个样式属性在样式表的作用范
围内适用于所有的元素, 一个内置样式表的作
用范围是元素中所包含的内容 。
对于文档样式表来说, 其作用范围是文档的主
体, 而对于外部样式表来说, 其作用范围则是
所有使用它的文档的主体 。
样式类
样式类允许在不同地方出现的同一个元
素使用来自文档样式表或外部样式表不
同样式说明
通过在 <style>元素中给定一个名称来对
样式类进行定义, 这个名称用一个句点
与元素的名称相连 。
样式类
例如, 在某个文档中如果需要设置两种
段落样式, 譬如 normal和 special,那么
可以在 <style>元素的注释中定义这两个
类, 形式如下：
p.normal{property-value list}
p.special{property-value list}
样式类
然后可以有如下的代码：
<p class =”normal”>
这个问题是可以用, 普通, 的风格进行展示
</p>
<p class =,special”>
那个问题是可以用, 特殊, 的风格进行展示
</p>
样式类
有时候需要一种能作用于若干元素的内容的样
式说明类, 这可以使用一个普通类实现, 在定
义这个普通类的时候, 它的名称中不包括元素
的名称, 而用一个以句点开头的通用类的名称
替代元素的名称 。 例如：
<style>
.italic {font-style,italic}
</style>
样式类
然后在某个文档的主体中可以包含下面
这些代码：
<h3 class=”italic”>第 3章 </h3>
首先,需要注意的是,…
<p class =,italic”>
但是,还需要提醒的是, …
</p>
属性和属性值
HTML元素中的属性可以分成六大类：
? 字体
? 颜色及背景
? 文本
? 边框与布局
? 列表
? 元素符等。
属性和属性值
属性值可以有多种表示形式 。 当关键字
属性值的可选范围有限并且均进行了预
定义, 那么就可以使用这些关键字属性
值, 例如 underline和 small。
属性和属性值
属性值度量标准与前述相同。
但长度属性值后面必须紧跟着用两个字
符的缩写词表示的单位名，在数字和单
位名之间不能留有空格。
可能出现的单位名包括,px(像素 )/ in(英
寸 )/ cm(厘米 )/ mm(毫米 )/ pt(点 )和百分
比，百分比形式的值是在数字后面加上
百分号。
属性和属性值
URL属性值的形式与链接中所使用的 URL
的形式则不同, 这些 URL属性值的一般形
式如下：
url(protocol://server/pathname)
? 在 url与左括号之间不能留有空格 。
属性和属性值
在元素中定义属性值之后，该元素中内嵌的所
有元素将通过继承获得这些属性值。
因此，在 <body>元素中使用一个内置样式表
设置某个属性值将会有效地影响整个文档中该
属性值的设置。
除非发生属性值的替代现象，否则文档中的每
个元素都将继承 <body>中的属性值。
<Span>和 <Div>元素
在许多情况下, 要求某些特殊的字体属
性只应用于整个段落中的部分文本 。
例如, 将同一行中的某个字或词组使用
不同的字体尺寸或颜色显示出来通常是
很有帮助的 。
<Span>元素
<span>元素就是针对此目的设计的 。 例
如, 在下例中,, 全面, 这个词与段落
中的其他部分并没有区别显示 。
<p>
能够对文本进行 <span>全面 </span>控制是一件很
有意思的事
</p>
<Span>元素
<span>元素的惟一用法是使用内置样式
表更改属性值, 例如：
<p> 能 够 对 文 本 进 行 <span style = "font-
size:24pt; font-family:黑体 ; color:red">
全面 </span>控制是一件很有意思的事
</p>
<Div>元素
在网页中，节是很常见的形式，每节由若干段
落构成，而且每节都有各自的外观表示样式。
虽然在段落中使用样式类。然而，往往在设计
中希望不仅是对各个段落，而且可以对网页中
的节进行样式设置。
这里,<div>元素可以实现这个要求。因此它
的主要用途是指定网页中某节或某区域的外观
展示细节。
小结
本讲主要介绍 CSS的用途、特点
CSS可以用来控制网站的风格
样式类同一个元素使用来自文档样式表或外部
样式表的样式说明
CSS中 HTML元素的属性、属性值表达方法
<span><div>的基本用途
