程序设计基础教程(第2版)第3章 层叠样式表(CSS)技术
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<style type="text/css"> .university_name { font-weight: bold; } a { text-decoration: none; } </style>
2020/10/17
中山大学计算机科学系
8
3.3.2 链接外部样式表
定义:把 CSS 样式定义写入一个以 css 为扩展名 的文本文件中，如 mystyle.css
body { font-size: 12pt; }
h1 { font-size: 150%; }
2020/10/17
中山大学计算机科学系
19
3.5.3 样式层叠
样式层叠性：所有样式规则将按继承层次传递作 用于相关 HTML 元素，并按层叠规则解决 CSS 属性 的重复定义问题
层叠规则：
规则1：HTML 标签 ＜ 类 ＜ ID 优先级依次升高 规则2：外部样式表 ＜ 嵌入样式表 ＜ 内嵌样式。但 是，当选择器更有针对性时，规则1优先于规则2
例3.13
2020/10/17
中山大学计算机科学系
24
3.5.6 伪元素
伪元素是指在 HTML 文档中没有用 HTML 标签明 确标记的元素
:first-letter 首字母 :first-line 首行 :before 在某元素内容之前插入内容 :after 在某元素内容之后插入内容
例3.14
2020/10/17
2020/10/17
中山大学计算机科学系
22
3.5.4 结构性选择器
属性选择器: 为具有某个属性值的 HTML 元素定 义样式
⑴简易匹配属性选择器：
li[class] { color: red;}
⑵精确匹配属性选择器：
li[class="term"] { font-weight: bold; }
⑶部分匹配属性选择器：
li[class~="att"] { font-style: italic; }
⑷前缀匹配属性选择器：
li[class|="term"] { text-decoration: underline; }
2020/10/17
中山大学计算机科学系
23
3.5.5 伪类
常用伪类
:link 未访问超链接 :visited 已被访问超链接 :active 激活状态 :hover 鼠标悬停状态 :focus 已获取焦点状态 :first-child 第1个子元素
规则3：定义的样式覆盖继承的样式
例3.12 超链接的字体为“隶书”，没有下划线， 但其中一个超链接有下划线
2020/10/17
中山大学计算机科学系
20
3.5.4 结构性选择器
通配选择器 * * { padding: 0; margin: 0; } 清除所有元素的内边距和外边距
后代选择器 address i { color:red; }
中山大学计算机科学系
25
3.6 元素框模型 3.6.1 框模型概述
元素框:可显示的页面元素都显示为一个矩形框， 包括内容区、内边距、边框和外边距4个区域
例3.15
2020/10/17
中山大学计算机科学系
26
3.6.2 框属性
一、边框属性 CSS 边框属性包括边框设置和方向的组合:
边框设置:包括边框颜色（color）、边框样式（style） 和边框宽度（width） 边框方向：上（top）、右（right）、下（bottom）和 左（left）
2020/10/17
中山大学计算机科学系
16
3.4.4 背景属性
背景属性用于控制页面元素的背景颜色和背景图 案 常用背景属性: background-color、backgroundimage、background-position、backgroundrepeat、background-attachment、background 例3.10 一个小图像填充整个页面背景，并且程序 代码设置为银灰色背景
将位于 <address> 元素内的 <i> 元素设置为红色字
子选择器 body > h1{ color:red;} 将 <body> 元素的 <h1> 子元素设置为红色字
2020/10/17
中山大学计算机科学系
21
3.5.4 结构性选择器
相邻兄弟选择器 h1 + p { color:red;}
将与 <h1> 元素相邻的下一个 <p> 兄弟元素设置为红色字
2020/10/17
中山大学计算机科学系
29
3.6.3 外边距重叠
当两个元素的垂直外边距相遇时，它们将重叠为 一个外边距。重叠后的外边距高度等于两个发生重 叠的外边距的高度中的较大者 例3.19 标题的下外边距高度为 1cm，列表项上、 下外边距高度为 0.5 cm。易知：标题与第1个列表 项之间的外边距高度为 1cm
2020/10/17
中山大学计算机科学系
15
3.4.3 文本属性
文本属性用于控制文本块的段落格式，如首行缩 进、段落对齐方式等 常用文本属性:text-align、vertical-align、 text-indent、line-height、letter-spacing、 word-spacing、white-space 例3.9 将标题居中，并使正文段落首行缩进2个字 符、行间距150%、字间距1磅
形式:在 <head> 元素内加入代码：
<link rel="stylesheet" type="text/css" href="mystyle.css" />
效果:外部样式表中的样式作用于页面
好处：一个外部样式表可以控制多个页面的显示 外观，从而确保这些页面外观的一致性
例3.6 设计多个页面，要求这些页面中所有大学 名称的显示样式为“加粗”，并且所有超链接没有 下划线
中山大学计算机科学系
3
3.2.2 基本选择器
三、ID 选择器 形式:一个井号（#）和一个 ID
#IDname { property:value;…} 效果:使具有指定 ID 属性的元素具有指定格式 例3.4 使术语“级联样式表(CSS)”显示为“倾斜、 加粗、大字体” #css_name { font-style: italic; font-weight: bold; font-size: large; }
例3.16 为段落设置灰色边框，其中，上、下边框 宽度分别为 thin 和 thick，而左、右边框宽度都 为 medium
2020/10/17
中山大学计算机科学系
27
3.6.2 框属性
二、内边距属性 内边距属性 padding-top、padding-right、 padding-bottom 和 padding-left 分别设置上、 右、下、左内边距的宽度 例3.17 为段落设置内边距，其中，上、下内边距 宽度为 10px，而左、右内边距宽度为 20px
2020/10/17
中山大学计算机科学系
9
3.3.3 内嵌样式
定义:直接使用 HTML 标签的 style 属性定义的 样式,如：
<p style="font-size:large;color:red">Hello</p>
效果:只作用于这个元素 例3.7 使大学名显示为“加粗”，并且超链接没 有下划线
样式继承是指 HTML 元素可以继承父元素的 CSS 属性
有些属性被自动继承，如字体、文本等属性；但有些属 性不被自动继承，如背景、边框等属性
对于相对长度单位值（如百分比），继承的是相对值的 实际计算值
特殊的属性值:inherit 例3.11 定义样式，将页面的普通文字大小设置为 12pt， 而将 h1 标题的文字大小设置为普通文字的 150%
2020/10/17
中山大学计算机科学系
17
3.5 样式层叠性 3.5.1 文档结构
HTML 文档的结构:是指 HTML 元素之间的嵌套关 系，可以用文档结构树表示
节点表示 HTML 元素 若一个元素直接包含另一个元素，则画一条连线
2020/10/17
中山大学计算机科学系
18
3.5.2 样式继承
2020/10/17
中山大学计算机科学系
10
3.4 CSS 基本格式化属性
CSS 属性分类：
基本格式化属性：包括字体、文本和背景属性等 布局性属性：包括框属性、定位属性、布局属性、列表 属性和表格属性等。
可视化设置方法:“样式”对话框、“CSS 属性” 窗格
2020/10/17
中山大学计算机科学系
带类名的 HTML 标签选择器 span.term { color: red; }
将具有类名为“term”的 <span> 元素设置为红色字
带 id 的 HTML 标签选择器 span#id_name { color: red; }
将其 id 属性为“id_name”的 <span> 元素设置为红色字
2020/10/17
中山大学计算机科学系
30
3.6.4 框大小
一、替换元素与非替换元素
替换元素：是指其元素内容来自 HTML 标签的属 性值。如 img 元素
非替换元素：是指其元素内容来自 HTML 标签自 身或标签对之间的内容。如 p、h1、h2、hr 等
示例
p {color:red} /* 将普通 p 段落文字显示为红色 */
h1,h2,h3 { color:red } /* 将 h1,h2,h3 标题文字显示 为红色 */
h2 { font-size: small; color:blue } /* 将 h2 标题文
字指定为小的蓝色字 */
2020/10/17
SharePoint Designer 2007操作
2020/10/17
中山大学计算机科学系
2
3.2 定义样式 3.2.1 样式定义格式
样式定义由样式规则组成，每条样式规则包括选 择器和样式声明,如：
selector {property:value; …}
样式声明由一系列属性声明组成,而属性声明又由 属性名和属性值构成
2020/10/17
中山大学计算机科学系
6
3.3 使用样式
CSS 样式的三种使用方式: 嵌入样式表 链接外部样式表(标准方法，实现网页结构和表现 的完全分离) 内嵌样式
2020/10/17
中山大学计算机科学系
7
3.3.1 嵌入样式表
形式:使用 <style> 元素把 CSS 样式定义在 HTML 文档的 <head> 元素内 效果:作用于当前页面的有关元素 例3.5 所有大学名显示为“加粗”，并且所有超 链接没有下划线
2020/10/17
中山大学计算机科学系
28
3.6.2 框属性
三、外边距属性 外边距属性 margin-top、margin-right、 margin-bottom 和 margin-left 分别设置上、右、 下、左外边距的宽度 例3.18 为页面体设置外边距，其中，上、下外边 距宽度为 1cm，而左、右外边距宽度为 2cm
第三章 层叠样式表（CSS）技术
基于 CSS,本章介绍网页的基本格式化和布局
技术
CSS 简介 定义样式 使用样式 CSS 基本属性 样式层叠性 元素框模型
元素定位 元素布局 列表样式 表格制作 页面布局
2020/10/17
中Hale Waihona Puke Baidu大学计算机科学系
1
3.1 CSS 简介
CSS 是层叠样式表（Cascading Style Sheets， 或称级联样式表）的简称，是格式化网页的标准技 术 例3.1 使用 CSS 将所有文字显示为“倾斜”
2020/10/17
中山大学计算机科学系
13
3.4.1 属性值与单位
三、颜色值 可以下表所列方式为 CSS 属性（如前景色、背景色） 指定颜色值
2020/10/17
中山大学计算机科学系
14
3.4.2 字体属性
字体属性用于控制文本中的字体格式，如文字的 字体、大小、粗细、颜色和修饰等 常用字体属性:font-family、font-size、fontstyle、font-weight、font-variant、font、 text-transform、text-decoration、color 例3.8 将文字“JavaScript”设置为Times New Roman 字体、加粗、倾斜、字体大小36磅、红色字， 并且小体大写
11
3.4.1 属性值与单位
一、属性值分类 单词。如
font-style: italic; 数字值。通常带有单位，如
font-size:12px; 颜色值。如
color: red;
2020/10/17
中山大学计算机科学系
12
3.4.1 属性值与单位
二、数字值单位 数字值用于定义各种元素的长度（包括高度、宽度 和粗细等），可以使用下表单位
2020/10/17
中山大学计算机科学系
8
3.3.2 链接外部样式表
定义:把 CSS 样式定义写入一个以 css 为扩展名 的文本文件中，如 mystyle.css
body { font-size: 12pt; }
h1 { font-size: 150%; }
2020/10/17
中山大学计算机科学系
19
3.5.3 样式层叠
样式层叠性：所有样式规则将按继承层次传递作 用于相关 HTML 元素，并按层叠规则解决 CSS 属性 的重复定义问题
层叠规则：
规则1：HTML 标签 ＜ 类 ＜ ID 优先级依次升高 规则2：外部样式表 ＜ 嵌入样式表 ＜ 内嵌样式。但 是，当选择器更有针对性时，规则1优先于规则2
例3.13
2020/10/17
中山大学计算机科学系
24
3.5.6 伪元素
伪元素是指在 HTML 文档中没有用 HTML 标签明 确标记的元素
:first-letter 首字母 :first-line 首行 :before 在某元素内容之前插入内容 :after 在某元素内容之后插入内容
例3.14
2020/10/17
2020/10/17
中山大学计算机科学系
22
3.5.4 结构性选择器
属性选择器: 为具有某个属性值的 HTML 元素定 义样式
⑴简易匹配属性选择器：
li[class] { color: red;}
⑵精确匹配属性选择器：
li[class="term"] { font-weight: bold; }
⑶部分匹配属性选择器：
li[class~="att"] { font-style: italic; }
⑷前缀匹配属性选择器：
li[class|="term"] { text-decoration: underline; }
2020/10/17
中山大学计算机科学系
23
3.5.5 伪类
常用伪类
:link 未访问超链接 :visited 已被访问超链接 :active 激活状态 :hover 鼠标悬停状态 :focus 已获取焦点状态 :first-child 第1个子元素
规则3：定义的样式覆盖继承的样式
例3.12 超链接的字体为“隶书”，没有下划线， 但其中一个超链接有下划线
2020/10/17
中山大学计算机科学系
20
3.5.4 结构性选择器
通配选择器 * * { padding: 0; margin: 0; } 清除所有元素的内边距和外边距
后代选择器 address i { color:red; }
中山大学计算机科学系
25
3.6 元素框模型 3.6.1 框模型概述
元素框:可显示的页面元素都显示为一个矩形框， 包括内容区、内边距、边框和外边距4个区域
例3.15
2020/10/17
中山大学计算机科学系
26
3.6.2 框属性
一、边框属性 CSS 边框属性包括边框设置和方向的组合:
边框设置:包括边框颜色（color）、边框样式（style） 和边框宽度（width） 边框方向：上（top）、右（right）、下（bottom）和 左（left）
2020/10/17
中山大学计算机科学系
16
3.4.4 背景属性
背景属性用于控制页面元素的背景颜色和背景图 案 常用背景属性: background-color、backgroundimage、background-position、backgroundrepeat、background-attachment、background 例3.10 一个小图像填充整个页面背景，并且程序 代码设置为银灰色背景
将位于 <address> 元素内的 <i> 元素设置为红色字
子选择器 body > h1{ color:red;} 将 <body> 元素的 <h1> 子元素设置为红色字
2020/10/17
中山大学计算机科学系
21
3.5.4 结构性选择器
相邻兄弟选择器 h1 + p { color:red;}
将与 <h1> 元素相邻的下一个 <p> 兄弟元素设置为红色字
2020/10/17
中山大学计算机科学系
29
3.6.3 外边距重叠
当两个元素的垂直外边距相遇时，它们将重叠为 一个外边距。重叠后的外边距高度等于两个发生重 叠的外边距的高度中的较大者 例3.19 标题的下外边距高度为 1cm，列表项上、 下外边距高度为 0.5 cm。易知：标题与第1个列表 项之间的外边距高度为 1cm
2020/10/17
中山大学计算机科学系
15
3.4.3 文本属性
文本属性用于控制文本块的段落格式，如首行缩 进、段落对齐方式等 常用文本属性:text-align、vertical-align、 text-indent、line-height、letter-spacing、 word-spacing、white-space 例3.9 将标题居中，并使正文段落首行缩进2个字 符、行间距150%、字间距1磅
形式:在 <head> 元素内加入代码：
<link rel="stylesheet" type="text/css" href="mystyle.css" />
效果:外部样式表中的样式作用于页面
好处：一个外部样式表可以控制多个页面的显示 外观，从而确保这些页面外观的一致性
例3.6 设计多个页面，要求这些页面中所有大学 名称的显示样式为“加粗”，并且所有超链接没有 下划线
中山大学计算机科学系
3
3.2.2 基本选择器
三、ID 选择器 形式:一个井号（#）和一个 ID
#IDname { property:value;…} 效果:使具有指定 ID 属性的元素具有指定格式 例3.4 使术语“级联样式表(CSS)”显示为“倾斜、 加粗、大字体” #css_name { font-style: italic; font-weight: bold; font-size: large; }
例3.16 为段落设置灰色边框，其中，上、下边框 宽度分别为 thin 和 thick，而左、右边框宽度都 为 medium
2020/10/17
中山大学计算机科学系
27
3.6.2 框属性
二、内边距属性 内边距属性 padding-top、padding-right、 padding-bottom 和 padding-left 分别设置上、 右、下、左内边距的宽度 例3.17 为段落设置内边距，其中，上、下内边距 宽度为 10px，而左、右内边距宽度为 20px
2020/10/17
中山大学计算机科学系
9
3.3.3 内嵌样式
定义:直接使用 HTML 标签的 style 属性定义的 样式,如：
<p style="font-size:large;color:red">Hello</p>
效果:只作用于这个元素 例3.7 使大学名显示为“加粗”，并且超链接没 有下划线
样式继承是指 HTML 元素可以继承父元素的 CSS 属性
有些属性被自动继承，如字体、文本等属性；但有些属 性不被自动继承，如背景、边框等属性
对于相对长度单位值（如百分比），继承的是相对值的 实际计算值
特殊的属性值:inherit 例3.11 定义样式，将页面的普通文字大小设置为 12pt， 而将 h1 标题的文字大小设置为普通文字的 150%
2020/10/17
中山大学计算机科学系
17
3.5 样式层叠性 3.5.1 文档结构
HTML 文档的结构:是指 HTML 元素之间的嵌套关 系，可以用文档结构树表示
节点表示 HTML 元素 若一个元素直接包含另一个元素，则画一条连线
2020/10/17
中山大学计算机科学系
18
3.5.2 样式继承
2020/10/17
中山大学计算机科学系
10
3.4 CSS 基本格式化属性
CSS 属性分类：
基本格式化属性：包括字体、文本和背景属性等 布局性属性：包括框属性、定位属性、布局属性、列表 属性和表格属性等。
可视化设置方法:“样式”对话框、“CSS 属性” 窗格
2020/10/17
中山大学计算机科学系
带类名的 HTML 标签选择器 span.term { color: red; }
将具有类名为“term”的 <span> 元素设置为红色字
带 id 的 HTML 标签选择器 span#id_name { color: red; }
将其 id 属性为“id_name”的 <span> 元素设置为红色字
2020/10/17
中山大学计算机科学系
30
3.6.4 框大小
一、替换元素与非替换元素
替换元素：是指其元素内容来自 HTML 标签的属 性值。如 img 元素
非替换元素：是指其元素内容来自 HTML 标签自 身或标签对之间的内容。如 p、h1、h2、hr 等
示例
p {color:red} /* 将普通 p 段落文字显示为红色 */
h1,h2,h3 { color:red } /* 将 h1,h2,h3 标题文字显示 为红色 */
h2 { font-size: small; color:blue } /* 将 h2 标题文
字指定为小的蓝色字 */
2020/10/17
SharePoint Designer 2007操作
2020/10/17
中山大学计算机科学系
2
3.2 定义样式 3.2.1 样式定义格式
样式定义由样式规则组成，每条样式规则包括选 择器和样式声明,如：
selector {property:value; …}
样式声明由一系列属性声明组成,而属性声明又由 属性名和属性值构成
2020/10/17
中山大学计算机科学系
6
3.3 使用样式
CSS 样式的三种使用方式: 嵌入样式表 链接外部样式表(标准方法，实现网页结构和表现 的完全分离) 内嵌样式
2020/10/17
中山大学计算机科学系
7
3.3.1 嵌入样式表
形式:使用 <style> 元素把 CSS 样式定义在 HTML 文档的 <head> 元素内 效果:作用于当前页面的有关元素 例3.5 所有大学名显示为“加粗”，并且所有超 链接没有下划线
2020/10/17
中山大学计算机科学系
28
3.6.2 框属性
三、外边距属性 外边距属性 margin-top、margin-right、 margin-bottom 和 margin-left 分别设置上、右、 下、左外边距的宽度 例3.18 为页面体设置外边距，其中，上、下外边 距宽度为 1cm，而左、右外边距宽度为 2cm
第三章 层叠样式表（CSS）技术
基于 CSS,本章介绍网页的基本格式化和布局
技术
CSS 简介 定义样式 使用样式 CSS 基本属性 样式层叠性 元素框模型
元素定位 元素布局 列表样式 表格制作 页面布局
2020/10/17
中Hale Waihona Puke Baidu大学计算机科学系
1
3.1 CSS 简介
CSS 是层叠样式表（Cascading Style Sheets， 或称级联样式表）的简称，是格式化网页的标准技 术 例3.1 使用 CSS 将所有文字显示为“倾斜”
2020/10/17
中山大学计算机科学系
13
3.4.1 属性值与单位
三、颜色值 可以下表所列方式为 CSS 属性（如前景色、背景色） 指定颜色值
2020/10/17
中山大学计算机科学系
14
3.4.2 字体属性
字体属性用于控制文本中的字体格式，如文字的 字体、大小、粗细、颜色和修饰等 常用字体属性:font-family、font-size、fontstyle、font-weight、font-variant、font、 text-transform、text-decoration、color 例3.8 将文字“JavaScript”设置为Times New Roman 字体、加粗、倾斜、字体大小36磅、红色字， 并且小体大写
11
3.4.1 属性值与单位
一、属性值分类 单词。如
font-style: italic; 数字值。通常带有单位，如
font-size:12px; 颜色值。如
color: red;
2020/10/17
中山大学计算机科学系
12
3.4.1 属性值与单位
二、数字值单位 数字值用于定义各种元素的长度（包括高度、宽度 和粗细等），可以使用下表单位