第09章-使用CSS样式表修饰网页_第1页
第09章-使用CSS样式表修饰网页_第2页
第09章-使用CSS样式表修饰网页_第3页
第09章-使用CSS样式表修饰网页_第4页
第09章-使用CSS样式表修饰网页_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网页设计与制作基础教程(第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过渡效果”面板创建、修改和删除CSS3过渡效果。下面将介绍“CSS过渡效果”面板的具体使用方法。

创建CSS3过渡效果

编辑CSS3过渡效果

删除CSS3过渡效果:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::9.5.1创建CSS3过渡效果

在DreamweaverCC中，用户选择“窗口”|“CSS过渡效果”命令，显示“CSS过渡效果”窗口，然后在该窗口中单击“新建过渡效果”按钮，可以为网页中具体的页面元素设置CSS3过渡效果。:::::《计算机基础与实训教材系列》系列丛书官方网站

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论