《网页设计与制作基础教程》第04章 使用CSS样式.pptVIP

网页设计与制作基础教程 第04章 使用CSS样式 精美的网页离不开CSS技术，使用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS样式的全名为Cascading Style Sheet，它可以定义HTML标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在HTML语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而CSS在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。 本章知识点 CSS样式的概念 在网页文档中使用CSS样式 编辑CSS样式 设置CSS样式 4.1 CSS样式的概念 CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为【级联样式表】，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。 CSS样式简介 CSS规则 4.1.1 CSS样式简介 CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免重复操作。CSS样式表是对HTML语法的一次重达革新，它位于文档的head区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们。 4.1.2 CSS规则 CSS规则由两部分组成：选择器和声明(大多数情况下为包含多个声明的代码块)。选择器是标识已设置格式元素的术语，例如 p、h1、类名称或ID，而声明块则用于定义样式属性。例如下面CSS规则中，h1 是选择器，大括号({})之间的所有内容都是声明块。 4.2 在网页文档中使用CSS样式 在Dreamweaver CS4中，可以创建一个CSS样式，然后应用于到网页文档的某个部分，完成文本的格式化。 创建CSS样式 【CSS样式】面板表格的其他操作 新建CSS规则 应用CSS样式 4.2.1 创建CSS样式表 在Dreamweaver CS4中，可以很方便地创建、编辑CSS样式表定义，并且不需要直接编辑CSS代码，即使不懂 CSS层叠样式表定义语法的用户，也能轻松完成定义。Dreamweaver CS4提供了功能非常强大的CSS样式编辑器，不但可以在页面中直接插入CSS样式定义，还可以创建、编辑独立的CSS样式表文件。 4.2.2 【CSS样式】面板 使用【CSS样式】面板可以跟踪影响当前所选页面元素的CSS规则和属性，也可以跟踪网页文档可用的所有规则和属性。 选择【窗口】|【CSS样式】命令，打开【CSS样式】面板。在该面板顶部的有【全部】和【正在】两种模式，单击相应的按钮，即可在两种模式之间切换，并且可以在这两种模式下进行修改CSS属性操作。 4.2.3 新建CSS规则 创建一个CSS规则后，可以用来自动完成HTML标签的格式设置或者class或ID属性所标识的文本范围的格式设置。 将光标移至网页文档中，选择【格式】|【CSS样式】|【新建】命令，打开【新建CSS规则】对话框，如图所示。 4.2.4 应用CSS样式 新建CSS规则样式后，就可以利用该样式快速设置页面上的网页元素样式，使网站具有统一的风格了。在Dreamweaver CS4中，要对文档指定元素应用CSS样式，可以在【属性】面板中设定、在标签处设定、在【标签检查器】面板组的【属性】面板中和右击文档选择快捷菜单设定。 4.3 编辑CSS样式 新建好CSS样式后，如果要对CSS样式进行编辑等操作。对CSS样式的编辑操作主要包括修改CSS样式属性、设置CSS样式首选参数以及链接和导入CSS样式。 设置CSS样式首选参数 修改CSS样式 移动CSS规则 链接和导入CSS样式 4.3.1 设置CSS样式首选参数 CSS样式首选参数用于定义在Dreamweaver中编写CSS样式的代码的方式。选择【编辑】|【首选参数】命令，打开【首选参数】对话框，在【分类】列表框中选择【CSS样式】选项，打开该选项对话框，如图所示。 4.3.2 修改CSS样式 CSS样式表通常包含一个或多个规则。可以在【CSS样式】面板中修改已经创建的CSS样式表中的各个规则，也可以直接在CSS样式表中操作。 4.3.3 移动CSS规则 在Dreamweaver