中文版dreamweaver8实用教程4管理css样式表.ppt

第06章 使用CSS样式 6.1 教学目标 6.2 理论指导 6.2.1 认识CSS 6.2.2 创建CSS样式 6.2.3 应用CSS样式 6.2.4 管理CSS样式表 6.2.5 CSS样式冲突 6.3 上机实验 中文版Dreamweaver 8实用教程 CSS样式的全名为Cascading Style Sheet，它可以定义HTML标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在HTML语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而CSS在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。 掌握知识：通过本章的学习，读者应了解什么是CSS，以及CSS样式的类别。掌握建立CSS样式和管理CSS样式表的方法。 重点学习：本章重点讲解了创建、链接和导出CSS样式的方法，并介绍了为了避免CSS样式冲突，浏览器样式格式应依照的规则。课后读者应结合上机操作进行强化练习。 认识CSS 创建CSS样式 应用CSS样式 管理CSS样式表 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快捷键。 在Dreamweaver 8中，用户可以创建一个 CSS 样式，然后应用于文档的某个部分，完成文本的格式化。 CSS样式表的类别 使用“类”单选按钮 使用“标签”单选按钮 使用“高级”单选按钮 CSS样式有两种存在方式，一种是“内嵌”到当前文档中，将CSS语法直接写在style.../style标签内(置于head文件头中)，仅其所在的网页使用。其他网页要使用时需要先将内部样式表通过选择“文件”|“导出”|“CSS样式”命令的方式导出才可使用。在创建CSS样式时，在“新建CSS规则”对话框中选择“仅对该文档”单选按钮之后所创建的CSS样式变会为内嵌到文档内部的样式表。 另一种是独立存放在一个文件中，这类文件的扩展名为.css。 在“新建CSS规则”对话框的“定义在”选项区域用于选择所定义样式的存放位置，可以选择“新建样式表文件”单选按钮，单击“确定”按钮后，将出现“保存样式表文件为”对话框，提示用户输入保存成的文件。 “类”单选按钮针对自行设计的CSS样式使用，可以自定义样式名称，并设计样式的组合。当要应用“类”单选按钮创建新CSS样式时,用户可以在 “新建CSS规则”对话框的“选择器类型”选项区域中选择“类”单选按钮，然后单击“确定”按钮打开“规则定义”对话框进行设置。 “标签”单选按钮是针对HTML内定的标签重定义格式时使用的，用户只能选取列表中的标签名称并调整其样式，而无法新建名称。一般经常更改的标签样式有h1、p、body、h2等。 要应用“标签”单选按钮编辑Dreamweaver中现有的标签样式,可以在 “新建CSS规则”对话框的“选择器类型”选项区域中选择“标签”单选按钮，然后单击“标签”下拉列表按钮，在弹出的下拉列表中选择一个需要定义格式的标签名称后。单击“确定”