J2EE Web
J2EE Web
应用程序开发系列教程
应用程序开发系列教程
级联样式表
级联样式表
(
(
Cascading Style Sheets
Cascading Style Sheets
)
)
西安索创软件技术培训中心
西安索创软件技术培训中心
李向宁
李向宁
1
1
基础知识
基础知识
1.1 概念
CSS是英文Cascading Style Sheets的缩写，翻译成中文时有
多种译法，常见的有级联样式表、叠层样式表等。
CSS的用途是定义Web的显示风格和样式。
在Web中，HTML关注文档的结构和内容，CSS关注于这些内
容如何显示。
样式表按其所在的位置不同可以分为3种：
z 内嵌样式（Inline Style）
z 内部样式表（Internal Style Sheet）
z 外部样式表（External Style Sheet）
1
1
基础知识
基础知识
1.2 样式表的分类
内嵌样式（Inline Style）：以属性的形式写在标签里面，作用
范围仅限所在标签。
例：examples/STYLE.Inline.html
内部样式表（Internal Style Sheet）：以<STYLE></STYLE>
的形式写在<HEAD></HEAD>标签之间，作用范围为所在网页。
例：examples/STYLE.Internal.html
外部样式表（External Style Sheet）：样式表定义在一个
以.css为后缀的样式文件中，在每个需要这些样式的页面里引
用这个文件。外部方式有两种使用方式：
z 链接样式表：例：examples/STYLE.External.link.html
z 输入样式表：例：examples/STYLE.External.import.html
注意：内部样式表的样式规则将覆盖输入样式表的同名规则。
2
2
样式表的定义和使用
样式表的定义和使用
2.1 样式规则
样式规则：样式表由样式规则组成，规则分为两部分：选择器
和样式定义。选择器是样式的名称，包括HTML标签、样式类
上下文选择器、样式ID和CSS伪类。 样式规则的组成形式为：
选择器{属性1:值1; 属性2:值2; …}
多个“属性:值”对之间用分号分开。也可以将一组“属性:值”对赋
给多个选择器，形式为：
选择器1,选择器2,…{属性1:值1; 属性2:值2; …}
例：examples/STYLE.Rule.html
样式类：在需要将同样的标签设置成不同样式的场合，可以给
选择器加上一个“类”的属性，用法为：
标签名.类名{属性1:值1; 属性2:值2; …}
2
2
样式表的定义和使用
样式表的定义和使用
2.1 样式规则
也可以不使用标签名，直接用“.”加上类名作为选择器，从而使
不同的标签显示相同的样式。
.类名{属性1:值1; 属性2:值2; …}
使用样式类的语法如下：
<标签 class=“类名”>
例：examples/STYLE.class.html
上下文选择器：用来为嵌入特定标签中的标签设定样式，语法
为：
父标签 子标签{属性1:值1; 属性2:值2; …}
例：examples/STYLE.contextual.html
