《网页设计与制作》-8CSS技术应用.ppt

Dreamweaver中样式的创建、编辑及应用的具体方法。 难点 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）建立外部样式表，将外部样式表导入