Embed Size (px)
DESCRIPTION
第 4 章 层叠样式表 CSS. CSS 样式简介 “ CSS 样式 ” 面板 创建 CSS 样式 应用 CSS 样式 管理 CSS 样式. 一、 CSS 样式简介. CSS （ Cascading Style Sheet, 层叠样式表） , 是用于控制网页样式的一种标记语言，它以 HTML 为基础，扩展了 HTML 的功能，提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。 通过 CSS ，可以实现网页的样式信息与网页内容分离 。 能 大大简化网页的设计工作，网页可以轻松维护。 - PowerPoint PPT Presentation
Citation preview
1
第第 44 章 章 层叠样式表 层叠样式表 CSSCSS
CSSCSS 样式简介样式简介 ““CSSCSS 样式”面板样式”面板 创建创建 CSSCSS 样式样式 应用应用 CSSCSS 样式 样式 管理管理 CSSCSS 样式 样式
2
一、 一、 CSSCSS 样式简介样式简介 CSS （ Cascading Style Sheet, 层叠样式表） , 是用
于控制网页样式的一种标记语言，它以 HTML 为基础，扩展了 HTML 的功能，提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。
通过通过 CSSCSS ，可以实现网页的样式信息与网页内容分离，可以实现网页的样式信息与网页内容分离。。能能大大简化网页的设计工作，网页可以轻松维护。
例如，修改某个 CSS 样式定义后，所有应用此样式的网页元素的外观则统一更改，而采用 HTML 样式的网页却需要设计者逐个修改每个元素的 HTML 样式。
3
二、创建二、创建 CSSCSS 样式样式 CSSCSS 样式面板样式面板 新建新建 CSSCSS 样式规则样式规则
新 建 CSS 规则
编 辑 CSS 规则
删 除 CSS 规则
CSS 样 式的属性名
CSS 样 式的属性值
CSS样式名
4
CSSCSS 选择器 选择器 选择器（选择器（ seletorseletor ）是）是 CSSCSS 中很重要的概念，所中很重要的概念，所
有有 HTMLHTML 语言中的标记都是通过不同的语言中的标记都是通过不同的 CSSCSS 选选择器进行控制的。用户只需要对不同的择器进行控制的。用户只需要对不同的 HTMLHTML标签进行控制，并赋予各种样式声明，即可实现标签进行控制，并赋予各种样式声明，即可实现各种效果。各种效果。
CSSCSS 选择器包括标签选择器、类选择器、选择器包括标签选择器、类选择器、 IDID 选选择器和复合内容选择器四种。 择器和复合内容选择器四种。
5
标签选择器 标签选择器 标签也称标记。而标签也称标记。而 CSSCSS 标签选择器就是声明哪些标签选择器就是声明哪些
标签采用哪种标签采用哪种 CSSCSS 样式。例如，样式。例如， h2h2 选择器就用选择器就用于声明页面中所有于声明页面中所有 <h2><h2> 标记的样式风格。标记的样式风格。
6
在上页图中点击“确定在上页图中点击“确定””按钮后，则弹出按钮后，则弹出““ h2”h2” 的的csscss 规则定义对话框。规则定义对话框。
7
类选择器 类选择器 类选择器可以类选择器可以
用于任何用于任何HTMLHTML 标记。标记。
类选择器的名类选择器的名字需要设计者字需要设计者自己定义。自己定义。
8
IDID 选择器 选择器 IDID 选择器和“类选择器”的作用类似。二者的区别在于：选择器和“类选择器”的作用类似。二者的区别在于：
IDID 选择器的名字以“选择器的名字以“ #”#” 开头，而“类选择器”的名开头，而“类选择器”的名字以“字以“ .”.” 开头；开头；
应用了“应用了“ IDID 选择器”的选择器”的 HTMLHTML 标记增加了标记增加了 idid 属性设属性设置，应用了“类选择器”的置，应用了“类选择器”的 HTMLHTML 标记增加了标记增加了 classclass属性设置。属性设置。
9
复合内容选择器 复合内容选择器 若要定义同时影响两个或多个标签、类或 若要定义同时影响两个或多个标签、类或 ID ID 的复合规则，的复合规则，
请选择“复合内容（基于选择的内容）”选项并输入用于请选择“复合内容（基于选择的内容）”选项并输入用于复合规则的选择器。例如，如果输入 复合规则的选择器。例如，如果输入 div pdiv p ，则 ，则 div div 标标签内的所有 签内的所有 p p 元素都将受此规则影响。说明文本区域准元素都将受此规则影响。说明文本区域准确说明您添加或删除选择器时该规则将影响哪些元素。确说明您添加或删除选择器时该规则将影响哪些元素。
10
伪类选择器 伪类选择器 伪类选择器用于设置页面上的超链接在不同状态下的显示伪类选择器用于设置页面上的超链接在不同状态下的显示
方式，这四种状态为：超链接被激活、鼠标指针悬停于其方式，这四种状态为：超链接被激活、鼠标指针悬停于其上、未访问过、已访问过。上、未访问过、已访问过。
11
四个伪类选择器的作用四个伪类选择器的作用 a:activea:active 用于设置超链接被选中时的用于设置超链接被选中时的 CSSCSS 样样
式，即鼠标被按下时超链接的显示方式。式，即鼠标被按下时超链接的显示方式。a:hovera:hover 用于设置鼠标指针悬停于超链接之上用于设置鼠标指针悬停于超链接之上
时的时的 CSSCSS 样式，即鼠标经过时超链接的显示方式。样式，即鼠标经过时超链接的显示方式。a:linka:link 用于设置尚未被访问过的超链接的用于设置尚未被访问过的超链接的CSSCSS 样式。样式。
a:visiteda:visited 用于设置已访问过的超链接的用于设置已访问过的超链接的 CSSCSS样式，即超链接被鼠标单击后的显示方式。样式，即超链接被鼠标单击后的显示方式。
12
CSSCSS 样式的定义位置样式的定义位置 不管创建哪种不管创建哪种 CSSCSS 选择器，都要指定选择器，都要指定 CSSCSS 样式定义的存样式定义的存
放位置。使用放位置。使用 Dreamweaver“Dreamweaver“ 新建新建 CSSCSS 规则”对话框，规则”对话框，可以指定两种存放位置，即内嵌式和链接式。可以指定两种存放位置，即内嵌式和链接式。
11 ．内嵌式．内嵌式 CSSCSS 样式具体内容嵌入在网页首部。样式具体内容嵌入在网页首部。
22 ．链接式．链接式 先创建外部样式表文件，用于保存先创建外部样式表文件，用于保存 CSSCSS 样式信息，其样式信息，其
扩展名为“扩展名为“ .css”.css” 。。 应用这种外部样式表文件中的样式时，将位于网页外部应用这种外部样式表文件中的样式时，将位于网页外部
的的 CSSCSS 样式表文件链接到本网页。样式表文件链接到本网页。
13
CSSCSS 样式的定义位置（续） 样式的定义位置（续）
11 ．内嵌式．内嵌式 在“新建在“新建 CSSCSS 规则”对话框的“规则定义：规则”对话框的“规则定义：
选择规则定义位置”选项中，选择“（仅限该选择规则定义位置”选项中，选择“（仅限该文档）”，则在当前文档的首部嵌入文档）”，则在当前文档的首部嵌入 CSSCSS 样样式表。（即嵌入在式表。（即嵌入在 <head><head> 和和 </head></head> 标标记之间，参见例记之间，参见例 4-14-1 ））
14
CSSCSS 样式的定义位置（续） 样式的定义位置（续） 外部样式表文件外部样式表文件 创建外部样式表文件，该文件用于保存创建外部样式表文件，该文件用于保存 CSSCSS 样式信样式信
息，其扩展名为“息，其扩展名为“ .css”.css” 。。
15
CSSCSS 样式的定义位置（续） 样式的定义位置（续） 创建外部样式表文件步骤如下：创建外部样式表文件步骤如下：
点击“确定”按钮后：
16
CSSCSS 样式中边界、填充、边框的含义 样式中边界、填充、边框的含义 网页元素的盒子模型网页元素的盒子模型
17
Dreamweaver Dreamweaver 支持支持 88 个类别的个类别的 CSSCSS属性属性
““ 类型”类型”类别：用于设置文字的有关属性，如字体。类别：用于设置文字的有关属性，如字体。 ““背景”背景”类别：用于设置背景有关的属性，如表格的背类别：用于设置背景有关的属性，如表格的背景色。景色。
““ 区块”区块”类别：用于设置网页中文本的“单词间距”等类别：用于设置网页中文本的“单词间距”等属性。属性。
““ 方框”方框”类别：用于设置网页元素的放置位置。可以对类别：用于设置网页元素的放置位置。可以对表格、层与网页元素位置关系的“浮动”、“填充”、表格、层与网页元素位置关系的“浮动”、“填充”、“边界”等属性。“边界”等属性。
““边框”边框”类别：用于设置网页表格的各种边框线的样式。类别：用于设置网页表格的各种边框线的样式。 ““列表”列表”类别：用于设置网页文本列表的项目符号和编类别：用于设置网页文本列表的项目符号和编号。号。
““ 定位”定位”类别：用于设置层的属性。类别：用于设置层的属性。 ““ 扩展”扩展”类别：用于设置网页的一些特殊效果，利用类别：用于设置网页的一些特殊效果，利用
“滤镜”给所控制的对象添加特殊的滤镜效果。“滤镜”给所控制的对象添加特殊的滤镜效果。
18
类型设置类型设置
19
背景设置背景设置
20
区块设置区块设置 ““ 区块”指网页中文本、图像和区块”指网页中文本、图像和 AP DivAP Div 元素等元素等替代元素，主要用于控制块中元素的间距和对齐替代元素，主要用于控制块中元素的间距和对齐方式等。方式等。
21
方框设置方框设置 用于设置网页元素的放置位置。可以对表格、 用于设置网页元素的放置位置。可以对表格、
AP DivAP Div 元素与网页元素位置关系的“浮动”、元素与网页元素位置关系的“浮动”、“填充”、“边界”等属性。“填充”、“边界”等属性。
22
边框设置边框设置 用于设置网页表格的各种边框线的样式。用于设置网页表格的各种边框线的样式。
23
列表设置列表设置 用于设置网页文本列表的项目符号和编号。用于设置网页文本列表的项目符号和编号。
24
定位设置定位设置 用于设置用于设置 AP DivAP Div 元素定位属性元素定位属性
25
扩展设置扩展设置 用于设置网页的一些特殊效果，利用“滤镜”给用于设置网页的一些特殊效果，利用“滤镜”给
所控制的对象添加特殊的滤镜效果。所控制的对象添加特殊的滤镜效果。
26
CSSCSS 样式表内容实例样式表内容实例
CSS样式面板
27
首先应选择要应用样式的页面元素；然后通过属首先应选择要应用样式的页面元素；然后通过属性面板或性面板或 CSSCSS 样式面板，把样式面板，把 CSSCSS 样式应用到页样式应用到页面元素上。面元素上。
三、应用三、应用 CSSCSS 样式样式
CSS样式面板
28
实例实例（详见教材第（详见教材第 69-7069-70 页例页例 4-44-4 ））
29
30
应用外部样式表文件中的应用外部样式表文件中的 CSSCSS 样式样式 需要使用样式面板的附加样式表按钮 ，需要使用样式面板的附加样式表按钮 ， 然后选择样式表文件：然后选择样式表文件：
31
取消已应用的取消已应用的 CSSCSS 样式样式 首先，在网页编辑窗口选择需要取消已应用首先，在网页编辑窗口选择需要取消已应用 CSSCSS
样式的对象或文本样式的对象或文本 然后，在文本属性面板中，从“目标规则然后，在文本属性面板中，从“目标规则””下拉列下拉列
表中选择“删除类”。表中选择“删除类”。
32
四、管理四、管理 CSSCSS 样式样式 修改修改 CSSCSS 样式 样式 单击位于面板底部的“编辑样式单击位于面板底部的“编辑样式…”…”按钮 按钮 删除删除 CSSCSS 样式 样式 复制复制 CSSCSS 样式 样式 重命名重命名 CSSCSS 样式 样式
