第08章 使用CSS样式控制网页外观
合集下载
网页制作：项目08 使用CSS控制购物网页外观--电子教案
《中文Dreamweaver 8网页制作教程与上机实训》，魏聪等编著，机械工业出版社
《非常容易Dreamweaver 8网页制作》，导向科技编著，人民邮电出版社
备注
附加样式表的方法
要求掌握
的知识点和分析方法
要求掌握【CSS样式】面板、CSS样式的类别、定义CSS样式的方法、CSS的【类型】等属性对话框、3种选择器各自的特点、创建超级链接的高级CSS样式、设置单元格ID名称和样式、修改CSS样式、删除CSS样式、应用CSS样式、附加样式表、重命名样式等知识点。
项目的主要目的是让学生掌握CSS样式的基本知识。项目主要通过CSS样式控制购物网页的外观，一方面要熟悉CSS样式的基本使用方法，另一方面要了解购物网页页面的基本特点。本项目使用的网页布局技术仍然是表格，另外还涉及文本、图像等网页元素。这些内容在前面的项目中已经介绍过，读者并不陌生。在本项目的制作中，读者需要了解许多网页元素的属性不一定必须通过【属性】面板来设置，也可以通过【CSS样式】面板来创建CSS样式进行控制，包括类、标签和高级CSS样式等。
中等职业学校教案
教研室：
课程名称：网页设计与制作—Dreamweaver 8
任课教师：
XXXX学校教务处制
中等职业学校教案
第8次课6学时
章节
项目八使用CSS控制购物网页外观
讲授主
要内容
1.CSS样式的作用
2.CSS样式的创建和设置方法
3.CSS样式的编辑方法
4.附加样式表的方法
重点
难点
创建和设置CSS样式的方法
授课思路，采用的教学方法和辅助手段，板书设计，重点如何突出，难点如何解决，师生互动等
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
《非常容易Dreamweaver 8网页制作》，导向科技编著，人民邮电出版社
备注
附加样式表的方法
要求掌握
的知识点和分析方法
要求掌握【CSS样式】面板、CSS样式的类别、定义CSS样式的方法、CSS的【类型】等属性对话框、3种选择器各自的特点、创建超级链接的高级CSS样式、设置单元格ID名称和样式、修改CSS样式、删除CSS样式、应用CSS样式、附加样式表、重命名样式等知识点。
项目的主要目的是让学生掌握CSS样式的基本知识。项目主要通过CSS样式控制购物网页的外观，一方面要熟悉CSS样式的基本使用方法，另一方面要了解购物网页页面的基本特点。本项目使用的网页布局技术仍然是表格，另外还涉及文本、图像等网页元素。这些内容在前面的项目中已经介绍过，读者并不陌生。在本项目的制作中，读者需要了解许多网页元素的属性不一定必须通过【属性】面板来设置，也可以通过【CSS样式】面板来创建CSS样式进行控制，包括类、标签和高级CSS样式等。
中等职业学校教案
教研室：
课程名称：网页设计与制作—Dreamweaver 8
任课教师：
XXXX学校教务处制
中等职业学校教案
第8次课6学时
章节
项目八使用CSS控制购物网页外观
讲授主
要内容
1.CSS样式的作用
2.CSS样式的创建和设置方法
3.CSS样式的编辑方法
4.附加样式表的方法
重点
难点
创建和设置CSS样式的方法
授课思路，采用的教学方法和辅助手段，板书设计，重点如何突出，难点如何解决，师生互动等
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
第8章 在网页中使用CSS样式
网页设计与制作
Block（文本块、区块）面板各选项的含义如下： A、单词间距(word spacing):设置单词之间的 距离(仅限于英文) B、字母间距(letter spacing):设置字母之间的 距离。中文字间距用此设置 C、垂直对齐(Vertical alignment):设置文本的 纵向对齐方式。可设置文本与图像之间的对 齐方式。基线、上标、下标、顶部、文本顶 对齐、中线对齐、底部、文本底部对齐等。
网页设计与制作
注意：
样式定义对话框的各类属性面板中有一些带 星号“*”的属性，这些属性的格式化效果不在文 档窗口中显示，只在浏览器中显示。有些不带星 号的属性也不在文档窗口显示，具体是哪些属性 则视实际情况而定。所以在文档窗口看不到效果 时，可以到浏览器窗口试试。
网页设计与制作
(3) 定义Block（文本 块）面板 如图所示，选择 “block(区块)”项， 出现设置面板，设置 mycss1样式的属性， 单击“确定”按钮。 则在CSS样式面板上 出现新定义的样式 mycss1
网页设计与制作
(2) 定义“type（文字）”面板 在弹出的“样式定义”对话框的“样式定义”对话框中选择 “类型”项，出现“类型”设置面板，设置mycss1样式的各 种属性：
网页设计与制作
“类型（文字）”面板各选项的含义如下： A、font(字体)：为样式设置字体。 B、size(字号)：设置字体大小，可以通过选择数 字和单位来指定字体大小，也可以选择相对的 字体大小。字体大小的单位有pixels(像素)、 points(磅)、in(英寸)、cm(厘米)、%（百 分比）等。 C、style(样式):指定字体样式，有normal(普 通)，italic(斜体)和oblique(倾斜)三种，后两种 明显区别。
css页面外观设计与布局
CSS页面设计的原则
保持一致性
在设计过程中，应保持整体风格和设 计元素的一致性，以增强用户体验。
注重可读性
确保文字和图片易于阅读，避免使用 过于花哨的字体或颜色。
考虑可访问性
确保设计的网页对所有用户都易于访 问，特别是对于残障人士和老年用户。
响应式设计
根据不同设备的屏幕尺寸和分辨率进 行适配，确保网页在不同设备上都能 正常显示。
02 CSS页面布局基础
块级元素与内联元素
块级元素
块级元素在页面上表现为一个矩形框，占据一行空间，如 `<div>`, `<p>`, `<h1>`-`<h6>`, `<ul>`, `<ol>`, `<li>` 等。块级元素可以设置宽度、高度、 内外边距等属性。
内联元素
内联元素不会独占一行，多个内联元素会排列在同一行内，如 `<span>`, `<a>`, `<img>` 等。内联元素只能设置左右边距，不能设置宽度和高度。
THANKS FOR WATCHING
感谢您的观看
Flexbox布局
01
总结词
Flexbox布局是一种现代的网页布局技术，通过设置元素为弹性盒模型，
使元素在容器中以灵活的方式排列和对齐。
02 03
详细描述
Flexbox布局提供了强大的对齐和分布控制能力，可以轻松实现水平居 中、垂直居中、等分布等效果。它还支持弹性容器和弹性子项，可以方 便地调整子项的尺寸和位置。
盒模型
盒模型是CSS布局的基础，每个HTML元素都可以看作是一个盒子，由内容、内边距（padding）、边框（border）和外边距 （margin）组成。
网页制作：项目08使用CSS控制购物网页外观幻灯片PPT
任务一 任务二 任务三 实训 小结
【CSS样式】面板
网页设计与制作
Dreamweaver 8
项目八：
使用CSS控制购物网 页外观
任务一 任务二 任务三 实训 小结
操作一 定义“body”的CSS规则
2.重新定义特定标签外观的方法
在【CSS样式】面板中单击 （新建CSS规则）按钮，弹出 【新建CSS规则】对话框，在对话框中【选择器类型】选择【标 签（重新定义特定标签的外观）】选项，在【标签】下拉列表框 中选择需要重新定义样式的标签，如“body”，然后根据需要 在【定义在】选项选择适合的选项，最后在【类型】、【背景】、 【方框】等对话框中根据需要设置参数即可。
使用CSS控制购物网 页外观
任务一 任务二 任务三 实训 小结
操作二 定义页眉的CSS规则
对话框中的【定义在】选项右侧是两个单选项，它们决定了 所创建的CSS样式的保存方法。点选【仅对该文档】单选钮，则 将CSS样式保存在当前的文档中，包含在文档的头部标签 “<head>…</head>”内。而如果点选【新建样式表文件】单 选按钮，则将新建一个专门用来保存CSS样式的文件，它的文件 扩展名为“*.css”。网页文档要使用样式表文件中的CSS样式时， 将通过“附加样式表”命令，将CSS文件链接或者导入到文档中。
网页设计与制作
Dreamweaver 8
项目八：
使用CSS控制购物网 页外观
任务一 任务二 任务三 实训 小结
操作二 定义页眉的CSS规则
3.创建和应用类样式的方法
以单元格为例，在【CSS样式】面板中单击 （新建CSS规 则）按钮，弹出【新建CSS规则】对话框，在【选择器类型】选 项组中点选【类（可应用于任何标签）】单选按钮，在【名称】 文本框中输入CSS样式名称，“.td_1”，然后在【类型】、【背 景】、【方框】等对话框中根据需要设置参数即可。CSS样式定 义完毕后，在单元格【属性】面板的【样式】下拉列表中选择定 义的样式名称，如“td_1”，将其应用到单元格上。
CSS+Div布局全
8.5.1 练习案例-电子产品
4．利用#menu样式为menu的<div>标签添加图像背景。在#nav标签 中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”， 并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。 5．设置#nav a:link，#nav a:visited样式属性，颜色为#FFF，文字装 饰为无，设置#nav a:hover样式属性，文字装饰为下划线，完成导 航条的制作。 6．在ID名称为info的<div>标签中，插入1*3表格，宽度为100%，将 三个图像分别插入到单元格中，设置#info样式背景为黑色。 素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。 案例布局要求如图8-67所示，案例效果如图8-68所示。
无浮动
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
width: 200px; background-color: #C30; } #box3 { height: 100px; width: 250px; background-color: #3FF; }
8.1.2 盒子属性
在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的四 个方向，分别 进行定义和设 置，描述盒子 属性。
8.1.2 盒子属性
例如，在网页中创建一个<div>标签，ID标识为 Div1，并在其中插入一个图像，代码如下：
#apDiv1 { position:absolute;
《网页设计与制作基础教程》第04章 使用CSS样式
网页设计与制作基础教程 网页设计与制作基础教程
4.2 在网页文档中使用CSS样式 在网页文档中使用CSS CSS样式
在Dreamweaver CS4中，可以创建一个CSS样式，然后应用于到 CS4中，可以创建一个CSS样式，然后应用于到 网页文档的某个部分，完成文本的格式化。 创建CSS样式 创建CSS样式 【CSS样式】面板表格的其他操作 表格的其他操作 新建CSS规则 应用CSS样式
CSS样式是Cascading CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为【 Sheets(层叠样式单)的简称，也可以称为【 级联样式表】 级联样式表】，它是一种网页制作的新技术，利用它可以对网页中的 文本进行精确的格式化控制。 CSS样式简介 CSS样式简介 CSS规则 CSS规则
网页设计与制作基础教程 网页设计与制作基础教程
4.2.2 【CSS样式】面板 CSS样式 样式】
使用【CSS样式】面板可以跟踪影响当前所选页面元素的CSS规 使用【CSS样式】面板可以跟踪影响当前所选页面元素的CSS规 则和属性，也可以跟踪网页文档可用的所有规则和属性。 选择【窗口】 CSS样式】命令，打开【CSS样式】 选择【窗口】|【CSS样式】命令，打开【CSS样式】面板。在该 面板顶部的有【全部】 面板顶部的有【全部】和【正在】两种模式，单击相应的按钮，即可 正在】 在两种模式之间切换，并且可以在这两种模式下进行修改CSS属性操 在两种模式之间切换，并且可以在这两种模式下进行修改CSS属性操 作。
网页设计与制作基础教程 网页设计与制作基础教程
4.2.1
创建CSS样式表 创建CSS样式表
在Dreamweaver CS4中，可以很方便地创建、编辑CSS样式表定义 CS4 可以很方便地创建、编辑CSS样式表定义 ，并且不需要直接编辑CSS代码，即使不懂 并且不需要直接编辑CSS代码， CSS层叠样式表定义 CSS 层叠样式表定义 语法的用户，也能轻松完成定义。 语法的用户，也能轻松完成定义。Dreamweaver CS4提供了功能非常强 CS4 大的CSS样式编辑器，不但可以在页面中直接插入CSS样式定义， 大的CSS样式编辑器，不但可以在页面中直接插入CSS样式定义，还可 以创建、编辑独立的CSS样式表文件。 以创建、编辑独立的CSS样式表文件。
ch08-应用CSS样式美化网页
8.4.3 设置区块样式
• 使用【区块】类别可以定义段落文本中文字的 字距、对齐方式等格式，在【CSS规则定义】 对话框左侧，选择【区块】选项，即可进行相 应的设置。
8.4.4 设置方框样式
• 在图像的属性面板上，可以设置图像的大小、图 像水平和垂直方向上的空白区域等，方框样式完 善并丰富了这些属性设置，定义特定元素的大小 及其与周围元素间距等属性。
8.4.5 设置边框样式
• 在Dreamweaver CS5中，使用【边框】类别可 以定义元素周围的边框的宽度、颜色和样式等 设置。
8.4.6 设置列表样式
• 在Dreamweaver CS5中，【列表】类别为列表 标记定义项目符号、大小和类型等列表设置。
8.4.7 设置定位样式
• 【定位】类别用于设置层的相关属性，使用定位样式可以 自动新建一个层并把页面中使用该样式的对象放到层中， 并且用在对话框中设置的相关参数控制新建层的属性。
8.1.2 CSS样式的类型
• 1. 自定义CSS(类样式) • 2. 重定义标签的CSS • 3. CSS选择器样式(高级样式)
8.1.3 CSS样式基本语法
• CSS的基本语法由三部分构成：选择器 （ctor）、属性（Property）和属性值 （Value）三个部分。
8.2 创建CSS样式
8.2.2 建立类样式
• 在【CSS样式】面板上，单击【新建CSS规则】按钮 。 • 弹出【新建CSS规则】对话框，单击展开【选择器类型】下拉按钮， 选择【类（可应用于任何HTML元素）】，单击【确定】按钮。 • 弹出【CSS规则定义】对话框，在【分类】列表中，选择各项进行设 置，单击【确定】按钮。 • 切换至代码视图，可以看到在代码中，添加了相应的代码。 • 保存文档，按下键盘上的【F12】键，即可在浏览器中浏览到网页的 视觉效果。
CSS样式表用法：网页布局与美化技巧
• 另一种方法是使用CSS框架（如：Bootstrap、 Foundation等），这些框架已经处理了大部分浏览器兼容 性问题
CREATE TOGETHER
DOCS
谢谢观看
THANK YOU FOR WATCHING
CREATE TOGETHER
DOCS
DOCS SMART CREATE
CSS样式表用法：网页布局与美化技 巧
01
CSS样式表的基本概念与作用
CSS样式表的定义与分类
CSS样式表分为两类：内联样式和外部样式
• 内联样式：直接应用于HTML元素的样式，使用<style>标签定义 • 外部样式：存储在单独的文件中，使用<link>标签引入
Web标准与浏览器兼容性问题
• Web标准是一系列规范和技术的集合，用于构建高质量的网页 • 如：HTML、CSS、JavaScript等
• 浏览器兼容性问题是指不同浏览器对Web标准的支持程度不同， 导致网页显示效果不一致的问题
• 使用CSS样式表实现浏览器兼容性问题的一种方法是使用浏览 器前缀（如：-webkit-、-moz-、-ms-等）
常用的动画与过渡效果 实现方法
• 使用@keyframes指令定义动画 的关键帧 • 使用animation属性设置动画的属 性，如name、duration、delay、 iteration-count
• 使用transition属性设置过渡的属 性，如property、duration、 timing-function、delay
使用CSS样式表进行响应式布局设计
常用的响应式布局技巧
• 栅格系统：使用grid布局实现网页的模块化布局，通过grid-template-columns、gridtemplate-rows属性设置网格的列数和行数 • 适配不同分辨率的屏幕：使用媒体查询根据屏幕尺寸调整元素的尺寸、字体大小等样式属性 • 适配不同设备的屏幕方向：使用媒体查询根据设备方向调整元素的布局和样式
CREATE TOGETHER
DOCS
谢谢观看
THANK YOU FOR WATCHING
CREATE TOGETHER
DOCS
DOCS SMART CREATE
CSS样式表用法：网页布局与美化技 巧
01
CSS样式表的基本概念与作用
CSS样式表的定义与分类
CSS样式表分为两类：内联样式和外部样式
• 内联样式：直接应用于HTML元素的样式，使用<style>标签定义 • 外部样式：存储在单独的文件中，使用<link>标签引入
Web标准与浏览器兼容性问题
• Web标准是一系列规范和技术的集合，用于构建高质量的网页 • 如：HTML、CSS、JavaScript等
• 浏览器兼容性问题是指不同浏览器对Web标准的支持程度不同， 导致网页显示效果不一致的问题
• 使用CSS样式表实现浏览器兼容性问题的一种方法是使用浏览 器前缀（如：-webkit-、-moz-、-ms-等）
常用的动画与过渡效果 实现方法
• 使用@keyframes指令定义动画 的关键帧 • 使用animation属性设置动画的属 性，如name、duration、delay、 iteration-count
• 使用transition属性设置过渡的属 性，如property、duration、 timing-function、delay
使用CSS样式表进行响应式布局设计
常用的响应式布局技巧
• 栅格系统：使用grid布局实现网页的模块化布局，通过grid-template-columns、gridtemplate-rows属性设置网格的列数和行数 • 适配不同分辨率的屏幕：使用媒体查询根据屏幕尺寸调整元素的尺寸、字体大小等样式属性 • 适配不同设备的屏幕方向：使用媒体查询根据设备方向调整元素的布局和样式
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
8.6.1 应用CSS样式
二、通过菜单栏中的【文本】/【CSS样式】命令
首先选中要应用CSS样式的内容，然后选择【文本】/【CSS样 式】命令，从下拉菜单中选择一种设置好的样式，这样就可以 将被选择的样式应用到所选的内容上。
8.6.1 应用CSS样式
三、 通过【CSS样式】面板下拉菜单中的【套用】命令
8.5.8 扩展
【扩展】分类对话框包含两部分 。
8.6 CSS样式的应用
应用CSS样式 附加样式表
8.6.1 应用CSS样式
一、通过【属性】面板
首先选中要应用CSS样式的内容，然后在【属性】面板的【样 式】下拉列表中选择已经创建好的样式。一般情况下，在 【CSS样式】面板中创建的样式都会在【属性】面板的【样式】 下拉列表中出现，所以需要应用CSS样式时，在这里直接选择 它们即可。
8.3.2 CSS样式的规则
实际上，所有在选择器中嵌套的选择器都会继承外 层选择器指定的属性值，除非另外更改。例如，一个 “body”选择器定义的颜色值也会应用到段落的文本中。 设置的CSS规则可以单独存放在一个文件中，也可以 存放在HTML文档的文件头部分，即外部样式表和内部样 式表。外部样式表将CSS规则定义在一个独立的外部样式 表文件中（扩展名为“.css”），实现了CSS规则和HTML 代码的独立分开存放，样式表文件可以利用文档头部分 的链接或“@import”规则链接到网站中的一个或多个页面 。内部样式表是将CSS规则定义在HTML网页文档内部， 通常放在HTML文档头部的“<style>”和“</style>”之间。
8.3.2 CSS样式的规则
其中，“h2”是选择器，介于大括号“{}”之间的所有内容都是声明块。 通常声明由两部分组成：属性和值。在上面定义的CSS规则中，已经 为“h2”标签创建了特定样式。所有设置为“h2”标签的文本字体为 黑体、大小为24px、颜色为红色、对齐方式为居中对齐。 任何HTML元素都可以是一个选择器，选择器仅仅是指向特别样式的元素。 例如： P { text-indent: 3em } 其中，选择器是P。 (1) ID选择器能够个别定义每个元素的成分。一个ID选择器的指定 要在名字前面有指示符“#”。例如，ID选择器可以指定如下： #pstyle { text-indent: 3em } 这点可以参考HTML中的ID属性： <P ID=” pstyle” >文本缩进3em</P>
8.3.2 CSS样式的规则
以下是一段定义“h2”元素的字体、大小、颜色和对齐方式等属性的CSS 样式代码： <head> <title>无标题文档</title> <style type="text/css"> <!-h2 { font-family: "黑体"; font-size: 24px; color: #FF0000; text-align: center; } --> </style> </head>
8.3.2 CSS样式的规则
样式表的定义 • CSS样式表定义的基本语法： • CSS声明方式
样式表是由样式规则组成的，每个CSS样式规则由 两部分组成：选择器和声明。选择器是标识已设置格 式元素的术语，如body、p、类名称或ID；而声明则用 于定义样式属性，大多数情况下为包含多个声明的代 码块。即通过很多属性来定义一个元素，每个属性带 一个值，共同描述选择器应该如何呈现。样式规则组 成如下： 选择器 { 属性 : 值 } 单一选择器的复合样式声明应该用分号隔开： 选择器 { 属性1 :值1 ; 属性2 : 值2 }
首先选中要应用CSS样式的内容，然后在【CSS样式】面板中 选中要应用的样式，再在面板的右上角单击控制按钮，或者直 接单击鼠标右键，从弹出的下拉菜单中选择【套用】命令即可 应用样式。
8.6.2 附加样式表
外部样式表通常是供多个网页使用的，其他网页文档要想使用 已创建的外部样式表，必须通过【附加样式表】命令将样式表 文件链接或者导入到文档中。附加样式表通常有两种途径：链 接和导入。在【CSS样式】面板中单击 （附加样式表）按钮， 打开【链接外部样式表】对话框进行设置即可。
8.5.4 方框
CSS将网页中所有的块元素都看作是包含在一个方框中的，这 个方框共分为4个部分。
8.5.5 边框
网页元素边框的效果是在【边框】分类面板中进行设置的 。
8.5.6 列表
列表属性用于控制列表内的各项元素 。
8.5.7 定位
定位属性可以使网页元素随处浮动，这对于一些固定元素（如 表格）来说，是一种功能的扩展，而对于一些浮动元素（如层） 来说，却是有效地、用于精确控制其位置的方法 。
8.4.1 创建CSS样式
在Dreamweaver CS3中，创建CSS样式的操作是一个完全可视化的过 程。 （1）选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，然后打 开【新建CSS规则】对话框。 （2）在【选择器类型】选项组中选择要创建的CSS样式的类型 。 （3）在对话框中的【定义在】下拉列表中选择CSS样式的存放位置。 （4）打开【CSS规则定义】对话框，进行CSS样式设置。
8.4.4 重命名层叠样式
8.5 CSS样式的属性
类型 背景 区块 方框 边框 列表 定位 扩展
8.5.1 类型
类型属性主要用于定义网页中文本的字体、大小、颜色、样式及 文本链接的修饰效果等。
8.5.2 类型
背景属性主要用于设置背景颜色或背景图像。
8.5.3 区块
区块属性主要用于控制网页元素的间距、对齐方式等。
8.3.3 CSS样式的类型
（3）【高级（ID、伪类选择器等）】 利用该类选择器会对标签组合（如“td h2”表示所有在表格单元中出 现“h2”的标题）或者是含有特定ID属性的标签（如“#myStyle”表 示所有属性值中有“ID="myStyle"”的标签）应用样式。而 “#myStyle1 a:visited,#myStyle2 a:link, #myStyle3…”表示可以一次 性定义相同属性的多个CSS样式。其中，ID属性用于定义一个元素 的独特的样式，如以下CSS规则 <style type="text/css"> <!-#mytext { font-size: 24 } --> </style> 可以通过ID属性应用到HTML中： <P ID= "mytext" >…</P>
8.3.2 CSS样式的规则
(2) 关联选择器是一个用空格隔开的两个或更多的单一选择器组成 的字符串。这些选择器可以指定一般属性，而且因为层叠顺序的规 则，它们的优先权比单一的选择器大，如下面的代码： P EM { background: yellow } 这个值表示段落中的强调文本会是黄色背景，而标题的强调文本则不受 影响。 为了减少样式表的重复声明，组合的选择器声明是允许的。例如，文档 中的所有标题可以通过组合给出相同的声明，如下面的代码： h1, h2, h3, h4, h5, h6 { color: red; font-family: sans-serif }
根据选择器类型的不同，CSS样式通常划分为以下3类。 （1）【类（可应用于任何标签）】 利用该类选择器可创建自定义名称的CSS样式，能够应用在网页中 的任何标签上。<style type="text/css"> <!-pstyle { font-size: 12px; line-height: 25px; text-indent: 30px; } --> </style> 在网页文档中可以使用class属性引用“pstyle”类。 <p class="pstyle">…</p>
8.2 【CSS样式】面板
在Dreamweaver CS3中，【CSS样式】面板是新建、编辑、 管理CSS样式的主要工具。在打开文档窗口的情况下，选择【窗 口】/【CSS样式】命令可以打开或关闭【CSS样式】面板。
8.3 CSS样式的类型和规则
CSS样式的类型 CSS样式的规则
8.3.1 CSS样式的类型
8.1 认识CSS样式
在使用了CSS样式的网页文档的源代码中，“<style>…</style>” 中间存放的是控制文档外观的CSS代码，位于文档的文件头部分， “<body>…</body>”中间是网页文档的内容。
8.1 认识CSS样式
CSS样式可以实现的功能。 可以更加灵活地控制网页中文本的字体、颜色、大小、间 距、风格及位置。 可以灵活地为网页中的元素设置各种效果的边框。 可以方便地为网页中的元素设置不同的背景颜色、背景图 片及平铺方式。 可以更加精确地控制网页中各元素的位置，使元素在网页 中浮动。 •可以为网页中的元素设置各种滤镜，从而产生诸如阴影、 辉光、模糊和透明等只有在一些图像处理软件中才能实现 的效果。 可以与脚本语言相结合，使网页中的元素产生各种动态效 果。
第8章 使用CSS样式控制网页外观
本章将介绍CSS样式的基本知识以及 使用CSS样式控制网页外观的基本方 法。
学习目标
了解CSS样式的作用及其类型。 掌握创建和设置CSS样式的方法。 掌握附加样式表的方法。 掌握使用CSS样式控制网页外观 的基本方法。
8.1 认识CSS样式
CSS（Cascading Style Sheet，可译为“层叠样式表” 或“级联样式表”）是一组格式设置规则，用于控制Web 页面的外观。通过使用CSS样式设置页面的格式，可将页 面的内容与表现形式分离。页面内容存放在HTML文档中， 用于定义表现形式的CSS规则存放在另一个文件中或 HTML文档的某一部分，通常为文件头部分。将内容与表 现形式分离，不仅可使维护站点的外观更加容易，而且还 可以使HTML文档代码更加简练，这样将缩短浏览器的加 载时间。