第08章CSS样式表.pptVIP

第8章 CSS样式表 第8章 CSS样式表 在短短的几年内，HTML的功能有了长足地进步，但是，显示内容和样式的混合一直是HTML语言的一大缺陷。为了能够让网页更好地在各种平台上兼容，W3C标准化组织推出了CSS规范，将样式描述内容彻底地独立于文档结构。CSS弥补了HTML语言在定义网页显示方面的不足，为用户提供了方便的控制页面外观的方法。本章将对CSS的基本概念、如何创建CSS样式、CSS样式的应用方式以及设置CSS的扩展属性进行详细介绍。 8.1.1 CSS的基本概念 CSS是一系列格式设置规则，它们控制Web页面内容的显示方式。使用CSS设置页面格式时，可将内容与表现形式分开。用于定义代码表现形式的CSS规则通常保存在另一个文件(外部样式表)或HTML文档的文件头部分。CSS的定义代码由一系列的格式定义组成，它可以应用到使用标准HTML标记格式的文本上，也可以应用到通过Class(类)属性所设定范围的文本上，还可以应用到其他符合CSS标准规范的文本上。 8.1.2 CSS样式表特点 ① 可以将网页的显示控制与显示内容分离。 ② 能更有效地控制页面的布局。 ③ 可以制作出体积更小、下载更快的网页。 ④ 可以更快、更方便地维护及更新大量的网页。 8.1.3 CSS样式的类型 ① 自定义CSS(类样式) ② 重定义标签的CSS ③ CSS选择器样式(高级样式) 8.1.3 CSS样式的类型 ① 自定义CSS(类样式) 自定义样式最大的特点就是具有可选择性，可以由用户自由决定将该样式应用于哪些元素。就文本操作而言，用户可以选择一个字、一行、一段乃至整个页面中的文本添加自定义的样式。选择样式应用范围实质是在要使用样式的一对标签之间(如选择范围中没有标签，则Dreamweaver会自动添加一个名为“span”的标签)添加一个class=”classname”语句(classname是引用的样式名称)。 8.1.3 CSS样式的类型 ② 重定义标签的CSS 它实际上重新定义了现有HTML标签的默认属性，具有“全局性”。一旦对某个标签重定义样式，页面中所有该标签都会按CSS的定义显示。注意：只有成对出现的HTML标签(如td/td)才能进行重定义，单个标签(如hr)不能进行重定义。 8.1.3 CSS样式的类型 ③ CSS选择器样式(高级样式) 可以用来控制标签属性，通常用来设置链接文字的样式。对链接文字的控制，有以下4种类型： ◆ “a:link”(链接的初始状态)：用于定义链接的常规状态。 ◆ “a:hover”(鼠标指向的状态)：如果定义了这种状态，当鼠标指针移到链接上时，即按该定义显示，用于增强链接的视觉效果。 ◆ “a:visited”(访问过的链接)：对已经访问过的链接，按此定义显示。为了能正确区分已经访问过的链接。“a:visited”的显示方式要不同于普通文本及链接的其它状态。图8.1 CSS样式面板 ◆ “a:active”(在链接上按下鼠标时的状态)：用于表现鼠标按下时的链接状态。实际中应用较少。如果没有特别的需要，可以定义成与“a:link”状态或者“a:hover”状态相同。 8.1.4 CSS样式面板 8.1.5 创建CSS样式的步骤 ① 将插入点放在文档中，然后在“CSS样式”面板中，单击面板右下侧的“新建CSS规则”按钮或选择主菜单【文本】|【CSS样式】|【新建CSS规则】，打开“新建CSS规则”对话框 ② 在“新建CSS规则”对话框中，根据要创建的CSS样式类型，选择“类”、“标签”或“高级”。 ③ 为样式命名。 ④ 选择定义样式的保存位置。 ⑤ 单击【确定】按钮，出现“CSS规则定义”对话框。 ⑥ 在“CSS规则定义”对话框中，完成样式有关属性的设置(详见8.4设置CSS样式)。 8.2 创建CSS样式 自定义样式的创建 重定义HTML标记 高级样式 8.2.1 自定义样式的创建 如果一个或多个网页中的某一部分需要使用特殊的样式，就可以定义一个自定义样式，并把该自定义样式应用到相应部分。自定义样式是唯一可以应用于文档中任意元素的CSS样式类型。当创建了自定义样式以后，与当前文档关联的所有自定义样式都显示在“CSS样式”面板中和属性面板的“样式”下拉列表中。用户可以先选择要添加样式的元素，然后在“CSS样式”面板或属性面板的“样式”下拉列表中选择要添加的自定义样式。 8.2.1 自定义样式的创建 【例8.1】现有一网页文件如图所示，要求用自定义样式方法将其中宋词的标题设置为黑体，大小为18点居中显示；宋词的内容设置为宋体，大小为12点，首行空2字符，居左显示。 8.2.2 重定义HTML标记 8.2.2 重定义HTML标记 8.2.