第八讲 css技术
【教学内容】
CSS样式的基础知识，认识“CSS样式”及管理样式的面板，
创建CSS样式的具体操作
8种CSS样式的定义方法
管理CSS样式(编辑、删除、链接)等。
【教学目的】
了解CSS的基本概念
认识CSS样式及样式面板
熟练掌握Dreamweaver中CSS样式创建、管理及应用的方法。
【教学重、难点】
重点：Dreamweaver中样式的创建、编辑及应用的具体方法
难点：8中CSS样式设置的方法，及各属性的含义
【教学方式】
采取讲授、讨论和案例分析相结合的方式。
一、css技术应用网页效果预览
图2-7-1 css技术应用网页效果图
打开示例网页二、实例制作步骤：
1.设置字体的css样式。
点击文本|css样式|新建，或者在css样式表面板中点击新建按钮。
弹出对话框，选择类输入一个英文名称，选择“仅对该文档”点击确定按钮。
弹出对话框
所有的css样式的参数为：
2.设置超级链接的css样式。
点击文本|css样式|新建，或者在css样式表面板中点击新建按钮。弹出对话框如图。选择高级，仅对该文档。从选择器的下拉列表中选择a:hover。
点击确定按钮后弹出对话框，进行如图参数设置。
3.应用样式，首先选中要应用样式的文字，在属性面板中点击样式的下拉菜单，弹出所有的样式，从中选择一个即可，也可以在css样式表面板当中右击要应用的样式，选择“套用”。
注意事项：
类需要在属性面板当中选择应用。而高级和标签不需要应用，只要css样式被导入就会自动应用上去。
三、本例css样式的html语法结构分析
.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样式的html语法总结
CSS类型包括三种：类、标签和高级。在Dreamweaver中可以轻松设定不同类型的CSS样式。
1．类（可用于任何标签）
可作为 class 属性应用于文本范围或文本块的自定义样式。注意类名称必须以句点开头，可以包含任何字母和数字组合。如果没有输入开头的句点，Dreamweaver 将自动输入句点。
2．标签（重新定义特定标签的外观）
重定义特定 HTML 标签的默认格式设置。当读者选择该选项时，可以在“标签”项的下拉菜单中选择一个标签或直接输入一个标签。
3.使用css选择器，用于对超级链接的四种状态进行设置。
A:active活动超级链接状态，即击下鼠标时的状态。
A:hover鼠标指向超级链接时的状态。
A:link默认的超级链接状态，即没有任何动作是的状态。
A:visited被访问过的超级链接状态。
4.“定义在”有两个单选项：
.新建样式表文件，生成专门的.css文件此样式可应用于多个文档，即为外部链接式样式。
.仅对该文档，只在当前文档中应用，即为嵌入式样式。
5.链接一个外部样式表的操作步骤如下：
（1）选择“窗口”|“CSS样式”命令，打开CSS样式面板。
（2）单击该面板上的“附加样式表”按钮，或单击该面板顶部右边的三角按钮，从弹出的菜单中选择“附加样式表”命令，出现“链接外部样式表”对话框。
（3）在该对话框中选择添加为“链接”或“导入”，并在“文件/URL”文本框中输入外部样式表文件名，或单击“浏览”按钮选择外部样式表文件（外部样式表文件必须以.css为扩展名），单击“确定”按钮。
【课后小结】
现在，对于一个高质量的网站来说，应用CSS样式表是必不可少的。CSS样式表的主要优点是便于对网页整体风格进行控制，当更新一处的 CSS 规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式，并且CSS还可以制作网页特性。
【练习题】
模仿练习题：
把前边的班级网页利用建立的css样式同一风格。 要求：
（1）建立超级链接的css样式；
（2）为所有图片加上边框；
（3）设置字号统一为9磅字，字体为宋体。
（4）建立外部样式表，将外部样式表导入。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
