网页投计与制作教程 第21章样式风格设计 FIREWORKS FFLASHPO8 DREAMWEAR 8
第21章 样式风格设计
网页设计与制作教程 第21章样式风格设计 本章目录 CSS是网页设 计中众多样式的集 21.1 CSS样式表概述 成，它可以使页面 21.2 CSS样式面板 风格统一化和标准 化。CSS提供的链 21.3 CSS样式的创建 接功能可以让所有 21.4 CSS样式的管理 的网页使用同一种 样式，使网页的维 21.5 CSS样式中滤镜的使用 护更新变得轻松、 21.6本章小结 高效。 概要说明
第21章 样式风格设计 CSS是网页设 计中众多样式的集 成，它可以使页面 风格统一化和标准 化。CSS提供的链 接功能可以让所有 的网页使用同一种 样式，使网页的维 护更新变得轻松、 高效。 ❖21.1 CSS样式表概述 ❖21.2 CSS样式面板 ❖21.3 CSS样式的创建 ❖21.4 CSS样式的管理 ❖21.5 CSS样式中滤镜的使用 ❖21.6 本章小结
见页设计与制作教程 21.1CSS样式表概述 21.1.1什么是CSS CSS英文全称为Cascading Style Sheets,中文全 称为层叠样式表，更多的人把它称之为样式表，以下简 称为CSS样式。网页设计最初是用HTML标记来定义页 面文档及格式，例如标题、段落、表格 等，但这些标记不能满足更多的文档样式需求，为了解 决这个问题，诞生了一种称为样式表(Style Sheets)的 技术，全称为层叠样式表。它用于控制Wb页面内容的 外观，以便用户在站点的多个页面中创建一致的样式风 格
21.1 CSS样式表概述 21.1.1 什么是CSS CSS英文全称为Cascading Style Sheets，中文全 称为层叠样式表，更多的人把它称之为样式表，以下简 称为CSS样式。网页设计最初是用HTM L标记来定义页 面文档及格式，例如标题、段落、表格 等，但这些标记不能满足更多的文档样式需求，为了解 决这个问题，诞生了一种称为样式表（Style Sheets）的 技术，全称为层叠样式表。它用于控制Web页面内容的 外观，以便用户在站点的多个页面中创建一致的样式风 格
网页设计与制作教程 21.1CSS样式表概述 21.1.2CSS的作用 CSS技术可将网页要展示的内容与样式设定分开， 也就是将网页的外观设定信息从网页内容独立出来，并 可以存成独立的样式文件，集中管理，这样就可让多个 网页文件共同使用它，省去了大量重复设置的麻烦。特 别是当要更新这种风格样式时，只需修改这个CSS文件 中相应的行，那么整个网站的所有页面都会随之发生变 化
21.1.2 CSS的作用 CSS技术可将网页要展示的内容与样式设定分开， 也就是将网页的外观设定信息从网页内容独立出来，并 可以存成独立的样式文件，集中管理，这样就可让多个 网页文件共同使用它，省去了大量重复设置的麻烦。特 别是当要更新这种风格样式时，只需修改这个CSS文件 中相应的行，那么整个网站的所有页面都会随之发生变 化。 21.1 CSS样式表概述
见页设计与制作教程 21.1CSS样式表概述 21.1.3CSS的语法规则 CSS样式由两部分组成：选择器和声明。例如： H1{ 属性 值 Font-size:16 pixels; 选择器 {}之间为声明 Font-family:Helvetica; Font-weight:bold; CSS术语中的cascading.表示向同一个元素应用多种 样式的能力。多个定义的样式向下“层叠”到Web页面上 的元素，并最终创建用户想要的设计效果。 返回
21.1.3 CSS的语法规则 CSS样式由两部分组成：选择器和声明。例如： H1 { Font-size: 16 pixels; Font-family: Helvetica; Font-weight: bold; } CSS术语中的cascading表示向同一个元素应用多种 样式的能力。多个定义的样式向下“层叠”到Web页面上 的元素，并最终创建用户想要的设计效果。 21.1 CSS样式表概述 选择器 { }之间为声明 属性 值
U FIREW FLASH 网页设计与制作教程 21.2CSS样式面板 默认状态下“CSS样式”面板为显示状态，如果未 显示，可选择【窗口】|【CSS样式】菜单命令，“CSS 样式”面板中包含两种模式：“全部”模式和“正在” 模式。如图 C55 cs5样式层 cSs样式层 全部正在 全部正在 所选内容的捕要 所有规则 font-size 36px 回样式) color #FF0000 ….stylel style2 -1i a:hover 关于“color“ 凸B ① color在规则"st1e2“(在当前 文档中)中定义。 “.sty1e2"的属性 “.sty1e2“的属性 color #FF0000 font-size color ☐#颦℉0000 36px 36px 透加属性 font-size 添加属性 Az 翻凸d回 距A2* 2凸0而
默认状态下“CSS样式”面板为显示状态，如果未 显示，可选择【窗口】|【CSS样式】菜单命令， “CSS 样式”面板中包含两种模式：“全部”模式和“正在” 模式。如图所示。 21.2 CSS样式面板
网页设计与制作教程 21.2CSS样式面板 21.2.1“正在”模式下的“CSS样式”面板 ☒ 默认状态下是“正在”模式， 菲、CS5 胡 C5s样式 层 面板显示了三个窗格： 全部正在 所选内容的捕要 “ 所选内容的摘要”窗格： font-size 36px color FF0000 “规则”窗格： “属性”窗格： 关于“co1lor 凸凸 color在规则”sty1le2"（在当前 文档中)中定义。 “.sty1e2"的属性 color ☐籽0000 font-size 36px 添加属性 距A2+*
21.2.1“正在”模式下的“CSS样式”面板 默认状态下是“正在”模式， 面板显示了三个窗格： “所选内容的摘要”窗格： “规则”窗格： “属性”窗格： 21.2 CSS样式面板
FLASH 网页设计与制作敦程 21.20SS样式面板 21.2.2“全部”模式下的“CSS样式”面板 在“全部”模式，面板显示了 ☒ 菲YCS5 说 C55样式 层 两个窗格： 全部 正在 “ 所有规则”窗格： 所有规则 ▣ 样式〉 stylel “属性”窗格： style2 …1i …a:hover ".sty1e2"的属性 color 口#灯F0000 font-size 36px 添加属性 三Az* 明凸0向
21.2.2 “全部”模式下的“CSS样式”面板 在“全部”模式，面板显示了 两个窗格： “所有规则”窗格： “属性”窗格： 21.2 CSS样式面板
网贝设计与制作教程 21.2CSS样式面板 21.2.3“CSS样式”面板中的按钮 面板底部共有7个按钮： “显示列表视图”按钮 国“显示类别视图”按钮 “只显示设计属性”按钮粤“附加样式表”按钮 “新建CSS规则”按钮 ⊙“编辑样式”按钮 1“删除CSS规则”按钮 返回
21.2.3 “CSS样式”面板中的按钮 面板底部共有7个按钮： “显示列表视图”按钮 “显示类别视图”按钮 “只显示设计属性”按钮 “附加样式表”按钮 “新建CSS规则”按钮 “编辑样式”按钮 “删除CSS规则”按钮 21.2 CSS样式面板
网页设计与制作敦程 21.3CSS样式的创建 21.3.1设置CSS样式类别及使用范围 在“CSS样式”面板，并单击面板右下角的“新建 CSS规则”按钮，弹出“新建CSS规则”对话框，这是 在新建CSS规则前先要完成的工作，即设置CSS样式类 别及使用就 新建CSS规则 ☒ 如图所示。 选择器类型：⊙类可应用于任何标签)C) 确定 ○标签重新定义特定标签的外观)①) 取消 ○高级〔ID、伪类选择器等)4) 名称： 定义在： 新建样式表文件) 仅对该文档 帮助
21.3.1 设置CSS样式类别及使用范围 在“CSS样式”面板，并单击面板右下角的“新建 CSS规则”按钮，弹出“新建CSS规则”对话框，这是 在新建CSS规则前先要完成的工作，即设置CSS样式类 别及使用范围， 如图所示。 21.3 CSS样式的创建