第5章 CSS样式及应用.ppt

第5章CSS样式及应用 主要内容CSS样式的概念与作用CSS样式的格式规则及样式类型CSS样式设置与管理在网页设计与维护中应用CSS样式 5 1CSS样式概述 5 1 1CSS样式概念及作用CSS CascadingStyleSheets 层叠样式表CSS是页面格式设置的一项技术 CSS包括一系列格式设置规则 利用CSS样式不仅可以对网页中的文本进行精确的格式化控制 设置字体 字号 颜色 背景 字符间距 行距 段落缩进等 还可以为网页设置背景色或背景图片 设置各种链接动态效果等 把CSS样式保存为外部文件 可以控制多个网页 对CSS样式进行修改时 应用该样式的文档格式会自动发生改变 CSS最主要的目的是使页面格式设置与页面内容独立开来 可以单独设置样式然后应用到页面中 提高网页设计和管理维护的效率 5 1 2CSS格式设置规则 CSS格式设置规则由两部分组成 选择器和声明 选择器是标识格式元素的术语 如P H1 类名或ID 声明用于定义元素样式 H1 font size 16pixels font family Helvetica font weight bold 其中 H1是选择器 介于花括号 之间的所有内容都是声明 5 1 3CSS样式的存在形式及样式类型 外部CSS样式表外部样式就是按照CSS的语法规则编写的文本文件 利用HTML文档的link标签 将外部CSS文件连接到文档中 实现对文档的格式控制 内部CSS样式内部CSS样式也称嵌入式样式 它保存于HTML文档中 样式代码直接出现在HTML文档的 标签内 具体包括在style标签中 内部CSS样式仅作用与它所在的HTML文档 内联样式内联样式是直接在标签内使用的样式 如 内联样式主要用于对特定的标签作具体的调整 内联样式的作用范围仅限于该特定标签 5 1 3CSS样式的存在形式及样式类型 2 样式类型 类样式类样式可以将样式属性应用于任何文本范围或文本块 HTML标签样式HTML标签样式用于重定义特定标签的格式 创建或改变这类样式时 所有应用该标记的文本会自动更新 例如重定义h1标签 当创建或更改h1标签的CSS样式时 所有用h1标签设置了格式的文本都会立即更新 CSS选择器样式CSS选择器样式 高级样式 用于重新定义特定元素组合的格式设置 或重新定义CSS允许的其他选择器表单的格式设置 5 2CSS样式的设置与管理 5 2 1样式面板CSS样式面板提供了对样式表设置和管理的全部功能 打开文档后 通过 窗口 CSS样式 菜单即可启用样式面板 未定义和使用样式时 样式面板不显示任何样式内容 定义了样式后 样式面板将显示已有的样式和使用中的样式信息 5 2 1样式面板 1 全部 视图和 正在 视图样式面板有两个视图 即 全部 视图和 正在 视图 全部 视图显示当前文档中定义的样式和附加到当前文档中的样式 正在 视图只显示活动文档的选定项目中使用的样式 2 全部 视图结构由所有规则 窗格和 属性 窗格构成 3 正在 视图结构由 所选内容的摘要 窗格 规则 窗格和 属性 窗格构成 4 属性 窗格的三种显示视图 类别 视图 列表 视图和 只显示设置属性 视图 5 2 2创建CSS样式的一般过程 创建CSS样式的主要环节有三个 选择CSS样式类型 确定CSS样式的形式 设置CSS样式的格式 一般过程 打开 新建CSS规则 对话框 确定CSS样式类型 创建可作为class属性应用于文本范围或文本块的自定义样式重定义特定HTML标签的默认格式设置为具体某个标签组合或所有包含特定Id属性的标签定义格式设置 确定CSS样式的形式 在 CSS规则定义 对话框中进行格式定义 设置CSS样式的格式 5 2 2创建CSS样式的一般过程 CSS规则定义 对话框中的主要项目CSS类型属性CSS样式背景属性CSS样式区块属性CSS样式方框属性CSS样式边框属性CSS样式列表属性CSS样式定位属性CSS样式扩展属性 5 2 3创建内部样式示例 1 示例在当前文档中创建一个内部样式 样式名为Inside 样式内容如下 字体格式 华文行楷 大小12像素 行高16像素 颜色码006600 细体显示 段落格式 首行左缩进20像素 字间距5像素 居中对齐 5 2 3创建内部样式示例 2 操作步骤 将插入点放在文档中 打开 新建CSS规则 对话框 设定样式类型和样式形式 选择 类 选项 在 名称 文本框中输入样式名称 Inside 选用 仅对该文档 按 确定 按钮 打开 CSS规则定义 对话框 在 类型 窗口中设定字体格式信息 选择 区块 类别 在 区块 窗口中设定段落格式 按 确定 按钮 完成创建样式 Inside的操作 5 2 3创建外部样式示例 1 示例创建一个定义超级链接格式的外部样式表文件Outside ess 格式内容如下 正常链接 蓝色 宋体 大小为12像素 带下划线 正常显示 鼠标经过 蓝色 华文新魏 带下划线 大小为14像素 倾斜显示 增加淡绿色背景 活动链接 紫红色 宋体 不带下划线 大小12像素 正常显示 闪烁 已访问链接 紫红色 宋体 12像素 带下划线 正常显示 5 2 3创建外部样式示例 2 操作步骤 将插入点放在文档中 打开图5 3所示 新建CSS规则 对话框 设定样式类型为 高级 单击 选择器 的下拉箭头 弹出链接选项的下拉列表 选择a link选项 弹出 保存文件样式表文件为 窗口 并在 文件名 文本框中输入 Outside 按 保存 按钮后弹出 a link的CSS规则定义 对话框 在对话框中设置有关属性值 按 确定 按钮后完成 正常链接 的设置 继续使用CSS样式面板的 新建CSS规则 完成a hover 鼠标经过 a active 活动链接 a visited 已访问链接 的规则设置 5 2 5重定义标签样式示例 1 示例设置标签的样式 使段落中行高为20像素 段落之间的间距与段落内行间距相同 该设置仅用于当前文档 5 2 5重定义标签样式示例 2 操作过程 将插入点放在文档中 打开 新建CSS规则 对话框 设定样式类型为 标签 单击 标签 的下拉箭头 弹出标签列表 浏览选定 p 标签 选定 仅对该文档 项 确定后在 CSS规则定义 对话框中进行如下设置 在 类型 分类中设置 行高 为20像素 在 方框 分类中设置 边界 选项 使 上 下 为0 完成上述设置后按 确定 按钮 即完成对分段标签的重定义 5 2 6CSS样式的编辑和使用 1 编辑样式 编辑全部样式表使用样式面板的 全部 视图 即可对与当前文档关联的所有样式进行编辑 在CSS样式面板中选择 全部 视图 在 所有规则 窗格中 选择要编辑的样式表 双击鼠标左键 打开 CSS规则定义 窗口 在窗口中 根据需要修改样式表 然后保存样式表 5 2 6CSS样式的编辑和使用 编辑当前文本的关联样式 打开CSS样式面板 将插入点置于要编辑CSS样式的文本中 此时在样式面板中显示当前文本的关联规则 双击 所选内容的摘要 窗格中的条目 立即打开该属性所在的 CSS规则定义 窗口 重新设置参数后确定即可 5 2 6CSS样式的编辑和使用 2 删除样式和属性 在CSS样式面板中选择要删除的样式 使用面板下方的删除按钮 或使用快捷菜单的 删除 功能 即可删除相应样式 样式删除后 其在当前文档中的应用效果即自动消失 如果只删除样式的某个属性 只需在属性窗格中选定要删除的属性后 使用快捷菜单的 删除 功能即可 5 2 6CSS样式的编辑和使用 3 使用内部CSS样式 在文档中 选择要应用CSS样式的文本 执行以下任何一种操作 即可实现样式的应用 操作一 在CSS样式面板中选择 全部 视图 右键单击要应用的样式的名称 然后从上下文菜单选择 套用 操作二 在文本属性检查器中 从 样式 弹出式菜单中选择要应用的类样式 操作三 在 文档 窗口中 右键单击所选文本 在上下文菜单中选择 CSS样式 然后选择要应用的样式 操作四 选择 文本 CSS样式 菜单 然后在子菜单中选择要应用的样式 5 2 6CSS样式的编辑和使用 4 使用外部CSS样式 选择使用样式的文本 使用CSS样式面板中的 附加样式表 按钮打开 链接外部样式表 对话框 在 文件 URL 文本框中添加附加样式表文件 按 确定 按钮 指定样式表将关联到当前文本中 5 2 6CSS样式的编辑和使用 5 使用Dreamweaver的范例样式Dreamweaver提供了多种不同类格式的范例样式 这些样式在网页设计时可以方便地应用 使用范例样式通过图5 23所示的 链接外部样式表 对话窗口进行 在该对话窗口中 单击 范例样式表 链接 打开图5 24所示 范例样式表 对话窗口 选择样式后确定 即完成使用范例样式表的操作 5 2 6CSS样式的编辑和使用 6 撤销内容中的样式执行以下操作 自定义样式将从所选内容中撤销 选择要从其中撤销样式的对象或文本 在文本属性检查器中 从 样式 弹出式菜单中选择 无 5 2 6CSS样式的编辑和使用 7 导出样式Dreamweaver提供了从文档中导出样式 以创建新的CSS样式表的功能 一般步骤如下 选择菜单 文件 导出 CSS样式 或 文本 CSS样式 导出 打开 导出样式为CSS文件 对话框 在对话框中输入样式表的名称 选择指定文件夹 然后单击 保存 文档中的自定义样式即保存为CSS样式表 5 2 7CSS的基本应用特性 1 分组对需要设置共同属性的不同元素或样式 可以组合起来统一定义那些共同的属性 即按共同属性分组定义 2 继承通过继承 CSS设置可以被应用到多个标签中 绝大部分 但不是全部 的CSS声明可以通过封闭CSS选择器中的HTML标签来被继承 3 层叠Cascading描述了覆盖通用样式的局部样式的能力 在相同的方式中 一个普遍地应用到某一块文本上的CSS规则可以被其他应用到相同文本中某个更为特殊的部分的规则所覆盖 5 2 7CSS的基本应用特性 4 CSS的冲突规则将两个或更多CSS规则应用于同一文本时 这些规则可能会发生冲突并产生意外的结果 浏览器按以下方式应用CSS规则 如果将两种规则应用于同一文本 浏览器显示这两种规则的所有属性 除非特定的属性发生冲突 例如 一种规则可能指定文本颜色为蓝色 而另一种规则可能指定文本颜色为红色 如果应用于同一文本的两种规则的属性发生冲突 则浏览器显示最里面的规则 离文本本身最近的规则 的属性 因此 如果外部样式表和内联样式同时影响文本元素 则应用内联样式 如果有直接冲突 则自定义CSS规则 使用class属性应用的规则 中的属性将覆盖HTML标签样式中的属性 5 3CSS样式的综合应用 1 应用实例描述图5 25所示是Dreamweaver的文档 设计 视图 窗口内容由五段文本构成 其中有三个超级链接 要求使用CSS样式进行格式设置 具体格式如下 默认字体格式 文本字体为宋体 大小12像素 颜色为草绿色 段落格式 行高20像素 首行缩进18像素 段落之间的间距与段落内行间距相同 链接格式 使用5 2 4节建立的外部样式表文件Outside css的格式 超链接的鼠标形状 Dreamwaver 超链接使用默认鼠标形状 手型 样式的设置与管理 和 样式在网页中的应用 超链接使用Help鼠标形状 5 3CSS样式的综合应用 2 操作过程 默认字体格式的设置通过重定义标签body的属性 实现默认字体控制 启用CSS样式面板 打开 新建CSS规则 对话框 设定样式类型为 标签 在 标签 文本框中输入 body 也可通过下拉列表选定 并选 仅对该文档 然后确定 显示 body的CSS规则定义 对话框后 在 类型 对话框中设定字体 大小及颜色 然后按 确定 按钮完成设置 5 3CSS样式的综合应用 段落格式设置通过重置p标签实现段落格式控制 行高和段落之间的间距设置 首行缩进设置 在 p的CSS规则定义 对话框中选 区块 类 设置 文字缩进 为18像素 链接格式设置使用CSS样式面板中的 附加样式表 按钮打开 链接外部样式表 对话框 在 文件 URL 文本框中浏览选定样式表文件Outside css 确定 后即完成格式设置 5 3CSS样式的综合应用 超链接的鼠标形状设置 设置样式打开 新建CSS规则 对话框 设定样式类型为 类 在 名称 文本框中输入 help style 并选 仅对该文档 按 确定 后显示 help style的CSS规则定义 对话框 在 扩展 类中 选定 光标 为 help 应用样式分别将插入点置于 样式的设置与管理 和 样式在网页中的应用 超链接文本中 在属性检查器中打开