第6章使用CSS创建页面(免费阅读).pptVIP

第6章 使用CSS创建页面 6.1 层叠样式表 6.2 创建CSS样式 6.3 管理CSS样式 6.4 创建AP元素 6.5 制作AP元素动画 6.1 层叠样式表 层叠样式表概述 定义：层叠样式表 (CascadingStyleSheets,CSS) 是一系列格式设置规则，使用 CSS 可以非常灵活地控制页面的外观，从精确的布局定位到特定的字体和样式等。 使用：使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（ head 中） 。 6.1 层叠样式表 层叠样式表概述 使用 CSS 可以控制许多文本属性，包括特定字体和字大小；粗体、斜体、下划线和文本阴影；文本颜色和背景颜色；链接颜色和链接下划线等。 可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。块级元素是一段独立的内容，在 HTML 中通常由一个新行分隔，并在视觉上设置为块的格式。可以对块级元素执行以下操作：为它们设置边距和边框、将它们放置在特定位置、向它们添加背景颜色、在它们周围设置浮动文本等。对块级元素进行操作的方法实际上就是使用 CSS 进行页面布局设置的方法。 6.1 层叠样式表 CSS样式的规则和类型 CSS样式的规则 CSS 格式设置规则由两部分组成：选择器和声明 声明由两部分组成：属性（如 font-family）和值（如 宋体） CSS样式的类型（即选择器类型） 1、自定义 CSS 规则（也称为“类样式”） 2、HTML 标签规则重定义特定标签（如 p 或 h1）的样式 3、CSS 选择器规则（高级样式）重定义特定元素组合的格式（如 td hr） 6.1 层叠样式表 为文档添加样式的方法 链接外部样式 一个外部CSS 样式表是一个纯文本文件，其中包含了HTML 标记或类指定的样式规则。CSS样式表文件的扩展名为“.css” 6.1 层叠样式表 为文档添加样式的方法 内部(嵌入式)CSS 样式表:将样式表嵌入到网页文档的head 区，整个文档中都可以使用这些样式规则 6.1 层叠样式表 为文档添加样式的方法 内联样式：在要使用样式的地方插入内联样式规则 6.2 创建CSS样式 CSS样式面板 CSS样式面板的操作 双击某个样式以显示“CSS 规则定义”对话框，或右击选编辑，然后更改。 在“*的属性”窗格中选择一个属性，然后在下面的“属性”窗格中编辑该属性。 6.2 创建CSS样式 CSS样式面板 在“全部”和“正在”模式下，CSS 样式面板都包含三个允许在“属性”窗格（底部窗格）中改变视图的按钮，如图所示： 6.2 创建CSS样式 CSS样式面板 在“全部”和“正在”模式下，CSS 样式面板底部还包含下列按钮，如图所示： 附加样式表打开“链接外部样式表”对话框 新建 CSS 规则会打开一个对话框，可在其中选择要创建的样式类型 编辑样式会打开一个对话框，可以在该对话框中编辑当前文档或外部样式表中的样式。 删除 CSS 规则删除CSS 样式面板中的所选规则或属性，并从应用该规则的所有元素中删除格式。 6.2 创建CSS样式 创建CSS样式过程 1、打开CSS 样式面板 2、单击面板右下角区域中的“新建CSS规则”按钮（ ）。显示出“新建CSS规则”对话框 6.2 创建CSS样式 创建CSS样式过程 3、定义要创建的CSS样式的类型：“创建类(自定义样式)”、“重定义标签”、“使用标签选择器”，然后命名或者选择标签。 4、选择定义样式的位置：若要创建外部样式表，选择“新建样式表文件”。若要在当前文档中嵌入样式，选择“仅对该文档”，单击“确定”按钮。 5、随即出现“CSS样式规则定义”对话框，在对话框中设定样式外观。选择要为新CSS样式设置的样式选项。设置完样式属性后，单击“确定”按钮。 6、应用样式。对于标签样式和CSS选择器，样式是自动应用于网页的。对于自定义样式，需要特别设定应用范围。 6.2 创建CSS样式 创建标签样式 在CSS 样式面板中，单击“新建CSS样式”按钮（ ），弹出“新建CSS规则”对话框。 6.2 创建CSS样式 创建标签样式 单击“确定”按钮。弹出“p的CSS样式定义”对话框。在对话框的“类型”分类中进行设定 6.2 创建CSS样式 创建标签样式 单击“确定”按钮。可以看到HTML文档窗口中p…/p标签对中文字的效果已经发生改变。如图显示了创建标签样式前后的文字效果。 6.2 创建CSS样式 创建CSS选择器 在“样式”面板中，单击“新建CSS样式”按钮（ ），弹出“新建CSS规则”对话框。在对话框