用css样式表美化网页 .pptVIP

CSS定义 CSS样式的分类及应用方式 CSS样式的规则 对样式表操作的三种方式 使用“CSS样式”面板 使用“CSS样式”面板 新建CSS样式 新建CSS样式 设置“CSS 规则定义”对话框参数 设置“CSS 规则定义”对话框参数 设置“CSS 规则定义”对话框参数 设置“CSS 规则定义”对话框参数 自定义CSS样式 编辑CSS样式 复制CSS样式 导出CSS样式 CSS样式转化为HTML标签 创建和应用CSS样式 创建和应用CSS样式 创建和应用CSS样式 创建和应用CSS样式 创建和应用CSS样式 创建和应用CSS样式 创建和应用CSS样式 创建和应用CSS样式 创建和应用CSS样式 外部CSS样式表 外部CSS样式表 外部CSS样式表 外部CSS样式表 外部CSS样式表 外部CSS样式表 在【代码视图】手动添加和编辑CSS 在【代码视图】手动添加和编辑CSS 在【代码视图】手动添加和编辑CSS 在【代码视图】手动添加和编辑CSS 2 定义表格样式 通过重新定义table标签控制网页中的表格的外观。 3 定义超级链接样式 通过定义a:link 和a:hover 两个高级样式来控制网页中的超级链接的外观。 4 定义特殊段落的样式 网页中经常会有一些特殊段落，比如程序代码等，为了让这些特殊段落和其他段落区分开来，本小节再定义一个特殊段落的样式。 5 链接外部CSS样式表 单击“CSS样式”面板底部工具栏的“附加样式表”按钮 在页面代码中生成Link标签 在页面代码中生成@ Import标签 Internet Explorer和Netscape?Navigator都支持链接方式，而Netscape Navigator不支持导入方式 6 在网页中应用外部CSS样式表 因为控制超链接和表格的CSS规则，是用相应的标签重新定义得到的，所以网页中的超链接和表格会自动应用样式。 我们可以将.text样式应用到body标签上，这样网页中的文字都被.text这个样式控制外观。 对于网页中的程序代码段落，可以用.teshu样式来控制外观。 1 CSS样式表的标记和语句格式 1．内联样式表的代码结构 CSS样式代码 样式表的代码一般格式： 样式表名称 { 属性1:属性1值; 属性2:属性2值; … … } 2．类选择器的CSS代码结构 应用类标识符样式时，都是通过class属性的设置实现的： class=myCSS_Class“ 在“代码视图”下，通过手动添加代码，编辑某个HTML标签的class属性，就可以让这个HTML标签控制范围内的元素应用类选择符样式。 3．ID选择器的CSS代码结构 应用ID选择器样式时，都是通过HTML标签的id属性的设置实现的：id=myCSS_ID“ ID属性是HTML标签的一个重要属性，一个网页中的标签的ID属性值不能重复，因此在利用ID属性应用标识选择符CSS样式时，只能应用于一个标签。如果应用于多个标签，就会造成标签的ID属性冲突。 4．链接外部样式表的代码结构 网页文档链接了外部CSS样式文件后，在代码视图中，可以观察到head标签中增加了一行类似于下面的代码： link href=mycss.css rel=stylesheet type=text/css / 这就是链接外部CSS样式文件的代码。 1 CSS样式表的标记和语句格式 2 通过编辑CSS代码改变网页滚动条的外观 在网页代码head和/head之间插入下面的代码： style body { SCROLLBAR-FACE-COLOR:#3333FF;//立体滚动条凸出部分的颜色 SCROLLBAR-HIGHLIGHT-COLOR:#505050;//滚动条空白部分的颜色 SCROLLBAR-SHADOW-COLOR:#fc2400;//立体滚动条阴影的颜色 SCROLLBAR-ARROW-COLOR:#666666;//上下按钮上三角箭头的颜色 SCROLLBAR-BASE-COLOR:#333333; //滚动条的基本颜色 SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48;//立体滚动条强阴影的颜色 } /style 6.* ? 2009 第6章 用CSS样式表美化网页 第6章用CSS样式表美化网页 了解CSS样式 CSS基础 创建CSS CSS基本应用 链接外部CSS样式文件 教学目的 CSS样式表简介 创建CSS样式表的方法 内部CSS样式表的应用 链接外部CSS样式表 在代码视图编辑CSS样式表 本章内容 CSS定义 CSS样式的分类及应用方式 使用“CSS样式”面板 新建CSS样式 设置“CSS 规则定