Download
1 / 18
180 likes | 396 Views
第 06 章 使用 CSS 样式. CSS 样式的全名为 Cascading Style Sheet ，它可以定义 HTML 标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在 HTML 语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而 CSS 在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。. 6.1 教学目标. 掌握知识： 通过本章的学习，读者应了解什么是 CSS ，以及 CSS 样式的类别。掌握建立 CSS 样式和管理 CSS 样式表的方法。
E N D
第06章 使用CSS样式 CSS样式的全名为Cascading Style Sheet，它可以定义HTML标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在HTML语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而CSS在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。
6.1 教学目标 • 掌握知识：通过本章的学习，读者应了解什么是CSS，以及CSS样式的类别。掌握建立CSS样式和管理CSS样式表的方法。 • 重点学习：本章重点讲解了创建、链接和导出CSS样式的方法，并介绍了为了避免CSS样式冲突，浏览器样式格式应依照的规则。课后读者应结合上机操作进行强化练习。
6.2 理论指导 • 认识CSS • 创建CSS样式 • 应用CSS样式 • 管理CSS样式表 • CSS样式冲突
6.2.1认识CSS • CSS样式是Cascading Style Sheets(层叠样式单)的简称，利用它可以对网页中的文本进行精确的格式化控制。 • 在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个文档中某范围内文本的格式。而CSS样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。 • CSS样式表简介 • 使用CSS样式面板
CSS样式表位于文档的<head>区，其作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们。 • 在制作网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。总之，CSS具有以下几个方面的作用和优势。 • 在几乎所有的浏览器上都可以使用。 • 以前一些只有通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而可以更快地下载页面。 • 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 • 可以轻松地控制页面的布局 。 • 可以将许多网页的风格格式同时更新，不用再一页一页地更新。
使用“CSS样式”面板可以创建 CSS 样式、查看 CSS 样式的属性以及将 CSS 样式应用于当前文档中。 要使用”CSS样式”面板,用户可以选择“窗口” | “CSS 样式”命令或按下Shift+F11快捷键。
6.2.2 创建CSS样式 • 在Dreamweaver 8中，用户可以创建一个 CSS 样式，然后应用于文档的某个部分，完成文本的格式化。 • CSS样式表的类别 • 使用“类”单选按钮 • 使用“标签”单选按钮 • 使用“高级”单选按钮
CSS样式有两种存在方式，一种是“内嵌”到当前文档中，将CSS语法直接写在<style>...</style>标签内(置于head文件头中)，仅其所在的网页使用。其他网页要使用时需要先将内部样式表通过选择“文件”|“导出”|“CSS样式”命令的方式导出才可使用。在创建CSS样式时，在“新建CSS规则”对话框中选择“仅对该文档”单选按钮之后所创建的CSS样式变会为内嵌到文档内部的样式表。CSS样式有两种存在方式，一种是“内嵌”到当前文档中，将CSS语法直接写在<style>...</style>标签内(置于head文件头中)，仅其所在的网页使用。其他网页要使用时需要先将内部样式表通过选择“文件”|“导出”|“CSS样式”命令的方式导出才可使用。在创建CSS样式时，在“新建CSS规则”对话框中选择“仅对该文档”单选按钮之后所创建的CSS样式变会为内嵌到文档内部的样式表。 另一种是独立存放在一个文件中，这类文件的扩展名为.css。 在“新建CSS规则”对话框的“定义在”选项区域用于选择所定义样式的存放位置，可以选择“新建样式表文件”单选按钮，单击“确定”按钮后，将出现“保存样式表文件为”对话框，提示用户输入保存成的文件。
“类”单选按钮针对自行设计的CSS样式使用，可以自定义样式名称，并设计样式的组合。当要应用“类”单选按钮创建新CSS样式时,用户可以在 “新建CSS规则”对话框的“选择器类型”选项区域中选择“类”单选按钮，然后单击“确定”按钮打开“规则定义”对话框进行设置。
“标签”单选按钮是针对HTML内定的标签重定义格式时使用的，用户只能选取列表中的标签名称并调整其样式，而无法新建名称。一般经常更改的标签样式有<h1>、<p>、<body>、<h2>等。“标签”单选按钮是针对HTML内定的标签重定义格式时使用的，用户只能选取列表中的标签名称并调整其样式，而无法新建名称。一般经常更改的标签样式有<h1>、<p>、<body>、<h2>等。 要应用“标签”单选按钮编辑Dreamweaver中现有的标签样式,可以在 “新建CSS规则”对话框的“选择器类型”选项区域中选择“标签”单选按钮，然后单击“标签”下拉列表按钮，在弹出的下拉列表中选择一个需要定义格式的标签名称后。单击“确定”按钮，打开“规则定义”对话框即可进行编辑。
“高级”单选按钮主要使用在超链接上的设定，用户可以在其中设定鼠标互动效果，包括一般状态、已链接状态和鼠标指针滑过状态等等。“高级”单选按钮主要使用在超链接上的设定，用户可以在其中设定鼠标互动效果，包括一般状态、已链接状态和鼠标指针滑过状态等等。 要应用“高级”单选按钮设置鼠标的状态,可以在 “新建CSS规则”对话框的“选择器类型”选项区域中选择“高级”单选按钮，然后单击“选择器”下拉列表按钮，并在弹出的下拉列表中选择一个鼠标的状态后,单击“确定”按钮，打开“规则定义”对话框中进行设置。
6.2.3 应用CSS样式 在文档中应用CSS样式的方法有4种，分别是在属性检查器中、在标签中、在“标签检查器”面板组的“属性”面板中和通过单击鼠标右键设定。
要在属性检查器中应用 CSS样式,用户可以在文档中将要设定样式的文字选取，或将光标插入该文字段落的任何一处，然后在属性检查器中的“样式”下拉列表框中选择要应用的样式名称即可。
要在“标签检查器”面板组的“属性”面板上应用CSS样式,可以在文档中将要设定样式的文字选取，或将光标插入该文字段落的任何一处，然后在“标签检查器”面板组的“属性”面板上单击 按钮，在class选项右侧的文本框中输入样式的名称即可。
用户还可以在文档中将要设定样式的文字选取并右击，在弹出的菜单中选择“CSS样式”|“样式名称”命令，应用所选的CSS样式。用户还可以在文档中将要设定样式的文字选取并右击，在弹出的菜单中选择“CSS样式”|“样式名称”命令，应用所选的CSS样式。
6.2.4 管理CSS样式表 要对CSS样式进行编辑、删除、链接或者新建等操作，都可以在“CSS样式”面板中找到相应的按钮。
6.2.5 CSS样式冲突 • 当相同的文本上应用两种或多种CSS样式时，可能会产生冲突，并导致不可预料的结果。浏览器显示样式格式依照以下规则。 • 如果两种样式同时应用于相同文本，浏览器会将两种样式的所有格式都显示出来，除非样式格式发生冲突。例如，一种样式指定文本的颜色为蓝色，另一样式则指定文本颜色为红色。 • 如果应用于同一个文本的两种样式发生冲突，则浏览器会显示最内部的样式设置格式(即最靠近文本的样式)。 • 如果存在直接冲突，则CSS样式(由class属性决定的样式)会覆盖基于HTML标记的样式格式。
6.3 上机实验 • 本章的上机实验主要练习在Dreamweaver 8中创建和编辑CSS样式表的方法。其中在“规则定义”对话框中对样式表内容的编辑是重点。用户在练习CSS样式表内容设定的时候要注意“规则定义”对话框中各选项的功能。在练习创建新样式表的操作时要注意“新建CSS规则”对话框中不同选项的作用。对于本章中的其他内容，用户可根据理论指导部分进行练习。 • 创建内部样式表 • 编辑CSS样式表
