09-第九章.ppt

网站建设与网页设计 第九章CSS样式 说明 本章节中的具体操作步骤参见书籍的对应章节 第九章CSS样式 9 1CSS样式基础 精美的网页离不开CSS技术 使用CSS技术可以有效地对页面的布局 字体 颜色 背景和其他效果实现更精准的控制 CSS技术是HTML的扩展 是网页设计中不可或缺的核心技术 CSS技术最大的优势就是实现了结构与形式的分离 从而更加有利于网站的开发和维护 同时 CSS布局是很有效的网页布局方式 CSS样式是CascadingStyleSheets 层叠样式单 的简称 也可以称作 级联样式表 它是一种网页制作的新技术 利用它可以对网页中的文本进行精确的格式化控制 9 1CSS样式基础 CSS 是用来控制一个网页文档中的某文本区域外观的一组格式属性 使用CSS能够简化网页代码 加快下载速度 减少上传的代码数量 从而避免了重复操作 实际上 CSS样式的使用就像很多软件的 更换皮肤 功能 例如 左下角为一个没有应用CSS样式的网页 而右下角为应用了CSS文件后的网页 9 1 1CSS样式简介 9 1CSS样式基础 在Web页面中 CSS规则有下面3中方式 外部CSS样式 存储在一个单独的外部CSS css 文件 而非HTML文件 中的若干组CSS规则 使用link标签链接到外部样式表文件 css文件 如果修改外部样式表文件 那么所有链接到该样式表文件的文件都将随之变化 内部 或嵌入式 CSS样式 若干组包括在HTML文档头部分的style标签中的CSS规则 使用style标签为当前网页设置样式信息 内部样式的内容包含在文档代码head部分的style标签中 并在 CSS样式 面板中的 所有规则 窗格内列出 此样式只对当前文档有效 内联样式 通过HTML标签的style属性为单个网页元素嵌套样式信息 其中 内联样式不符合 结构与形式分离 的网页基本设计原则 不建议使用 9 1 2CSS规则的应用范围 9 1CSS样式基础 从前面的举例中可以看出 CSS样式规则是由两部分组成 选择器和样式定义 也称声明 选择器是标识已设置格式元素的术语 例如p h1 类名称等 而样式定义则用于定义样式的属性 大多数情况下为包含多个样式定义的代码块 包括样式属性和相应的属性数值 h1 font size 12pixels font family 宋体 在上面的CSS规则中 h1是选择器 大括号 之间的所有内容都是样式定义 在Dreamweaver中常见的CSS样式选择器有3种 分别是HTML标签选择器 类选择器和伪类 也称虚类 选择器 除此之外 还有两种选择器 ID选择器和具有上下文关系的选择器 9 1 3CSS样式定义规则 9 1CSS样式基础 HTML标签选择器HTML标签选择器用于为某个或者某些HTML元素应用样式定义 如果要定义多个标签 则要在标签之间用逗号隔开 类选择器类选择器定义了某种类样式 可用于多种HTML标签 即可以对网页中多个网页元素重复使用类样式 类选择器在制作网页中使用较多 一般形式为 首先定义类样式 形式为 类名称 然后在HTML标签中指定相应的class属性对样式进行应用 伪类选择器伪类选择器一般用于设置超链接的显示方式 例如 图9 12所示的伪类选择器定义的样式就是指未访问过的 已访问过 激活的以及鼠标指针悬停着的4种状态的超链接 9 1 3CSS样式定义规则 9 1CSS样式基础 9 1 3CSS样式定义规则 HTML标签选择器定义 类选择器定义 伪类选择器定义 9 1CSS样式基础 ID选择器HTML标签中的ID属性是指定网页中某特定元素 CSS的ID选择器是针对相应的特定元素设置样式 需要注意的是ID选择器只能对指定的唯一网页元素应用样式 一般形式为 首先定义样式为 ID名 样式定义 然后在HTML标签中利用ID属性应用该样式 具有上下文关系的选择器在CSS样式定义中 如果两个选择器之间用空格分开 就表示这是一个具有上下文关系的选择器 在HTML中 第二个选择器必须放在第一个选择器中 例如 如9 14所示的样式表示只针对唯一id为container的标签中的id为header的标签中的h1标签使用该样式 9 1 3CSS样式定义规则 9 1CSS样式基础 9 1 3CSS样式定义规则 ID选择器定义 具有上下文关系的选择器定义 9 1CSS样式基础 由于CSS样式定义使用广泛 这里简单介绍CSS样式定义重要组成部分样式属性值的各种单位 颜色单位在CSS中使用以下方式设置指定样式颜色值 颜色名 RRGGBB RGB rgb rrr ggg bbb rgb rrr ggg bbb 长度单位在CSS样式定义中描述长度包括以下单位 cm 厘米 em 当前字体m字母的宽度 ex 当前字体x字母的高度 in 英寸 mm 毫米 pc 皮卡 1pc 12点 pt 点 1pt 1 72英寸 px 像素 在网页制作过程中 em和px经常使用 百分比单位在CSS样式定义中 百分比单位也可指定尺寸 例如 p line height 150 表示该段文字的高度为标准行高的1 5倍 百分比值是一个相对值 一般情况下 这个参照值是该元素本身的字体尺寸 9 1 4CSS样式属性的单位 9 1CSS样式基础 在Dreamweaver中的 CSS规则定义 对话框中的可以设置CSS样式属性 主要包括类型 背景 区块 方框 边框 列表 定位 扩展 具体对话框如下图所示 9 1 5常用CSS样式属性 9 2使用CSS样式 在DreamweaverCS4中 可以创建4种类型的CSS样式 分别是类 可应用于任何标签 ID 仅应用于一个HTML元素 标签 重新定义HTML元素 以及复合内容 基于选择的内容 具体操作是使用 CSS样式 面板中 新建CSS规则 按钮 创建相应的CSS样式 下面以 校园风光 网站为例 展示利用各种样式在网页中使用后的效果 9 2 1样式的类型 9 2使用CSS样式 9 2 1样式的类型 应用类样式 图像浮动 效果 应用伪类样式效果 9 2使用CSS样式 CSS样式有不同的使用范围 在 CSS样式 面板中创建样式时 新建CSS规则 对话框中的 规则定义 选项决定了使用内部样式还是外部样式 如果选择 仅对该文档 选项 表明在网页中使用内部样式表 如果选择样式表文件选项 表明在网页中使用外部样式表文件 内部样式表内部样式定义控制了当前网页元素的效果 存在于源代码标签中 外部样式表外部样式表是一个包含站点网页所有样式的集合 保存在以 css为后缀的文件中 以链接形式与文件关联 创建外部样式表 在 样式 面板中创建新样式 然后在出现的 新建CSS规则 对话框中的 规则定义 选项中选择 新建样式表文件 即完成新建 通过链接使用外部样式表 9 2 2样式表 9 2使用CSS样式 下面以 校园风光 网站为例 展示利用样式表在网页中使用后的效果 9 2 2样式表 应用内部样式效果 应用外部样式效果 9 3管理CSS样式 在 CSS样式 面板是对样式进行管理的主要平台 点击 CSS样式 面板右上角的按钮 在出现的下拉菜单中包含所有有关CSS样式的命令 设计者可以使用这些命令对站点中的CSS样式进行管理 此外 在 CSS样式 面底部 有许多快捷键 方便设计者管理CSS 例如 附加样式表 按钮可把外部样式表和文档链接到一起 新建CSS规则 按钮可新建样式 编辑样式 按钮可打开 CSS规则定义 对话框进行样式编辑 删除样式 按钮可删除样式 CSS样式 面板有全部模式和正在模式两种显示模式 9 3管理CSS样式 全部模式 正在模式 9 4CSS布局基础 CSS布局是近年比较主流的布局方式 它将网页的内容和形式几乎完全分开 便于网站的开发和维护 CSS页面布局使用CSS技术对页面进行规划组织 CSS布局的基本组成是Div标签 主要存放包括文本 图像和其他网页元素 设计者使用CSS布局 首先把Div标签放在页面不同位置 然后添加内容 最后为Div布局块应用CSS样式 从而快速王超网页显示 9 4CSS布局基础 网页中的元素都被存放在一个盒子里 可以直接通过创建规则控制这个盒子的属性 完成显示网页内容的目的 从下图可以看出 CSS模型盒子有内容 填充 边框和边距构成 其中 内容是 box 块中的文本 此处显示id box 的内容 填充是指内容与块边框的距离 边框是指 box 块四周的边框 边距是指块边框与其他块之间或是浏览器四周的距离 9 4 1CSS盒子 9 4CSS布局基础 CSS布局是利用CSS模型盒的属性创建出多种多样的页面布局 属性有填充 边框 边距 定位属性和浮动属性 这里主要介绍定位属性和浮动属性 定位属性position 定位属性 控制网页元素 如Div元素 在浏览器应如何来定位 取值包括absolute 绝对 fixed 固定 relative 相对 static 静态 浮动属性float 浮动属性 是用于控制网页元素的浮动方式 取值包括none 无 left 左浮动 right 有浮动 利用对Div标签的浮动属性设置 可以创建出不同种类的分栏式布局 clear 清除属性 是与float相对应的属性 用于结束网页元素的浮动 取值包括left 左 right 右 both 二者 9 4 2CSS布局属性 9 4CSS布局基础 在DreamweaverCS4中 常见的创建CSS布局的方法如下 直接使用Dreamweaver提供的预设的CSS布局 这是最便捷的方法 利用这类布局 可以快速创建常用的多列的网页结构 使用Dreamweaver中的绝对定位元素 AP元素 创建CSS布局 AP元素是拥有分配绝对位置的HTML元素 如Div标签 缺点是该元素无法根据浏览器大小自动调节 手动插入Div标签创建CSS布局 该方法是专业设计者最灵活的一种设计方式 9 4 3CSS布局方法 9 5预设的CSS布局 DreamweaverCS4提供了30多种不同显示的 兼容多种浏览器的预设布局 设计者可以直接使用创建网页 新建布局 新建文档 对话框如下设置 9 5预设的CSS布局 替换预设内容替换预设CSS布局后的网页效果如下图所示 9 5预设的CSS布局 重新定义样式完成CSS布局的网页效果如下图所示 9 6APDiv元素布局 APDiv元素是指使用了绝对定位属性的Div标签 影响APDiv元素位置的属性有左 上 高 宽属性 因为APDiv元素不能根据浏览器窗口大小自动调整文档布局 所以只适用于一些特殊的网页布局 APDiv元素都显示在 AP元素 面板中 设置APDiv元素属性同样通过属性检查器 插入APDiv元素通常插入APDiv元素的具体步骤如下 首先定位插入点 然后点击 插入 栏的 布局 类别中的 绘制APDiv 按钮 最后 在文档窗口使用鼠标 绘制一个APDiv元素 APDiv元素基本操作APDiv元素基本操作包括选择 移动 修改 添加内容 9 6 1APDiv元素 9 6APDiv元素布局 AP元素 面板选择文档窗口中的APDiv元素 AP元素 面板如下图所示 眼睛 图标是控制APDiv元素的可见性 默认没有图标 表示可见 如果有 睁眼 图标 表示可见 如果有 闭眼 图标 表示隐藏 Z值决定APDiv元素的显示顺序 Z值是一个整数 APDiv元素Z值大的显示在Z值小的上面 9 6 1APDiv元素 9 6APDiv元素布局 APDiv元素属性控制APDiv元素属性的平台是属性检查器 如下图所示 9 6 1APDiv元素 9 6APDiv元素布局 下面是使用APDiv元素进行页面布局的效果 9 6 2使用APDiv元素布局 9 7Div标签布局 Div标签相当于网页中的一个盒子 里面是网页元素 如文本 图像等 通过定义CSS样式在网页中显示这些元素 下面介绍一下Div标签的主要属性含义 DivID 可让您更改用于标识Div标签的名称 如果附加了样式表 则该样式表中定义的ID将出现在列表中 类 显示了当前应用于标签的类样式 如果附加了样式表 则该样式表中定义的类将出现在列表中 可以