第09章-使用CSS样式表修饰网页.ppt

《网页设计与制作基础教程(第3版)》

第九章使用CSS样式表修饰网页

:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::学习目标由于HTML语言本身的一些因素，导致了其结构与显示不分离的特点，这也是阻碍其发展的一个原因。因此W3C发布CSS（叠层样式表）解决这一问题，使不同的浏览器能够正常地显示同一页面。

:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::本章重点CSS样式表简介创建与附加CSS样式表应用CSS样式表编辑CSS样式表

:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::9.1认识CSS样式表CSS是英语CascadingStyleSheets（层叠样式表）的缩写，它是一种用于表现HTML或XML等文件式样的计算机语言。用户在设计与制作网页的过程中，使用CSS样式，可以有效地对页面的布局、字体、颜色、背景和其他效果实现精确的控制。CSS样式表简介CSS的规则分类

:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::9.1.1CSS样式表简介要管理一个系统的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免重复操作。CSS样式表是对HTML语法的一次革新，它位于文档的head区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们

:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::9.1.2CSS样式表分类布局是最基本的网页布局之一，其特点是将网页的各种结构模块进行平面排列，以构成整个网页。在设计网页布局的过程中，应遵循对称平衡、异常平衡、对比、凝视和空白等原则。一般情况下，网页的常见布局有以下几种结构。CSS样式表类型CSS规则应用范围CSS样式规则由两部分组成：选择器和声明(大多数情况下为包含多个声明的代码块)。选择器是标识已设置格式元素的术语，例如p、h1、类名称或ID，而声明块则用于定义样式属性。例如下面CSS规则中，h1是选择器，大括号({})之间的所有内容都是声明块

:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::9.2使用CSS设计器面板在DreamweaverCC中，用户可以利用“CSS设计器”面板在页面中创建或附加CSS样式表，并设定其媒体查询、选择器以及具体的属性。认识CSS设计器面板创建与附加CSS样式表设定媒体查询定义选择器设置CSS规则属性

:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::9.3使用CSS样式在DreamweaverCC中，用户可以在“属性”检查器中对文档中选中的网页元素套用CSS样式，也可以使用“多类选区”面板将多个CSS样式应用于单个网页元素。应用CSS样式使用多CSS类选区

:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::9.4编辑CSS样式在DreamweaverCC中要编辑CSS规则属性，除了可以使用“CSS设计器”面板的“属性”窗格以外，用户还可以在“属性”检查器中单击“目标规则”下拉列表按钮，选择具体的选择器，然后单击“编辑规则”按钮，打开“CSS规则定义”对话框进行设定。下面将详细介绍“CSS规则定义”对话框中重要选项的功能。设置“类型”属性设置“背景”属性设置“区块”属性设置“方框”属性设置“边框”属性设置“列表”属性设置“定位”属性设置“扩展”属性设置“过渡”属性

:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::9.5应用CSS过渡效果在DreamweaverCC中，用户可以使用“CSS过渡效果”面板创建、修改和删除