Dreamweaver 中样式的创建、编辑及

应用的具体方法。

Dreamweaver 中样式的创建、编辑及

应用的具体方法。

难点

难点 8 中 CSS 样式设置的方法，及各属性的

含义8 中 CSS 样式设置的方法，及各属性的含义

重点

重点

操作演示

.rh {font-size: 9pt;// 字号为 9 磅color: #FFFFFF;// 文字颜色text-decoration: none;// 无修饰}

.zr {font-size: 9pt;color: #FF6600;text-decoration: none;}

.zr1 {

font-size: 9pt;

color: #000066;

}

.z {

font-size: 9pt;

color: #006600;

text-decoration: none;

}

.rk {font-size: 9pt;color: #009900;// 文字颜色text-decoration: none;background-color: #FFFFFF;// 背景颜色为白色height: 16px;// 方框高度为 16 象素border: 1px solid #006600;// 边框为实线，宽度为 1 象素，颜色代码}

.k {

font-size: 9pt;

color: #009900;

text-decoration: none;

border: 1px solid #666666;

}

a:hover {

font-size: 9pt;

color: #FF6600;// 超级链接的颜色text-decoration: none;

CSS 类型包括三种：类、标签和高级。在Dreamweaver 中可以轻松设定不同类型的 CSS

样式。 1 ．类（可用于任何标签） 可作为 class 属性应用于文本范围或文本块的自

定义样式。注意类名称必须以句点开头，可以包含任何字母和数字组合。如果没有输入开头的句点， Dreamweaver 将自动输入句点。

标签（重新定义特定标签的外观） 重定义特定 HTML 标签的默认格式设置。当读者

选择该选项时，可以在“标签”项的下拉菜单中选择一个标签或直接输入一个标签。

。

使用 css 选择器，用于对超级链接的四种状态进行设置。

A:active 活动超级链接状态，即击下鼠标时的状态。

A:hover 鼠标指向超级链接时的状态。 A:link 默认的超级链接状态，即没有任何动作是的

状态。 A:visited 被访问过的超级链接状态。

“定义在”有两个单选项： 新建样式表文件，生成专门的 .css 文件此样式可

应用于多个文档，即为外部链接式样式。 仅对该文档，只在当前文档中应用，即为嵌入式

样式。

链接一个外部样式表的操作步骤如下： （ 1 ）选择“窗口” |“CSS 样式”命令，打开 CSS 样

式面板。 （ 2 ）单击该面板上的“附加样式表”按钮，或单击该

面板顶部右边的三角按钮，从弹出的菜单中选择“附加样式表”命令，出现“链接外部样式表”对话框。

（ 3 ）在该对话框中选择添加为“链接”或“导入”，并在“文件 /URL” 文本框中输入外部样式表文件名，或单击“浏览”按钮选择外部样式表文件（外部样式表文件必须以 .css 为扩展名），单击“确定”按钮。

现在，对于一个高质量的网站来说，应用 CSS 样式表是必不可少的。 CSS 样式表的主要优点是便于对网页整体风格进行控制，当更新一处的 CSS

规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式，并且 CSS 还可以制作网页特性。

模仿练习题：   把前边的班级网页利用建立的 css 样式同一风格

。 要求： （ 1 ）建立超级链接的 css 样式； （ 2 ）为所有图片加上边框； （ 3 ）设置字号统一为 9 磅字，字体为宋体。 （ 4 ）建立外部样式表，将外部样式表导入