JavaScript网页特效案例教程 王莹 第六章课件 第六章新.pptVIP

JavaScript网页特效案例教程 主编：王莹 副主编：印梅 齐燕 第六章 CSS样式表 6.5 其他典型案例 6.6本章小结 * * 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 8课时 课时建议 案例教学 自主学习 探究训练 教学方法 掌握Style对象 掌握CSS属性 学会使用CSS+DIV美化与布局页面 本章重点 实现细边框的文本框、图片背景按钮 鼠标移入移出文本框和按钮动态变化 层的弹出和消失 树状菜单 卡片切换 下拉二级菜单 技能目标 什么是css 掌握样式的定义及使用 掌握Style对象 掌握CSS属性 学会使用CSS+DIV美化与布局页面 JavaScript与CSS结合实现特效 知识目标 6.1 css样式表基础 相关知识 知识点1：样式定义的格式 语法 selector {property:value;property:value;…} SELECTOR：选择符。 PROPERTY：就是那些将要被修改的属性，例如color。 VALUE：PROPERTY的值，比如color的属性值可以是red。 当多个对象具有相同的样式定义时，多个对象之间可以用逗号分隔，例如： tr,th{font:12px;margin:20px;font-color:#336699} 1）HTML选择符 语法 tag{property:value} td{ font-size: 9pt; color: blue;} 2）Class选择符 语法 Tag.Classname{property:value} h1 class=redone常州机电职业技术学院h1 /style H1.redone{color:red} style 第二种是独立Class选择符，它可以被任何HTML标记所应用。 语法 .Classname{property:value} p class=blueone不知是无意还是天意，有你的日子总有雨！/p h2 class=blueone有雨的日子/h2 /style .blueone{color:bule} style 3）ID选择符 语法 #IDname{property:value} p黑色神秘/p p id=redone红色热情/p /style #redone{color:red} style 知识点2：样式表位置分类 1）嵌入样式表 【案例1】使用嵌入样式表使得网页符合以下样式： 正文的文本采用蓝色 段落采用居中对齐 Level 1、2、3的标题都为红色 符号立标默认采用绿色的粗体字 2）链接外部样式表 如果多个HTML文件要共享样式表，可以将样式表定义为一个独立的CSS样式文件。 HTML文件在头部用link标记链接到CSS样式文件。 3）引入外部的样式表 @import URL(/css/style2.css); @import URL(style1.css); 4）内嵌样式 当对同一段文本应用多个层叠样式表样式时，文本中的元素将遵循样式表的作用 优先顺序依次调用样式。 样式表的作用优先顺序遵循以下原则： a）内嵌样式中所定义样式的优先级最高。 b）其他样式按其在HTML文件中出现或者被引用的顺序，遵循就近原则，靠近文 本越近的优先级越高。 c）选择符的作用优先顺序为：上下文选择符、类选择符、ID选择符，优先级依次 降低。 d）未在任何文件中定义的样式，将遵循浏览器的默认样式。 3. 操作练习 将案例1中的样式表内容按照链接外部样式表和内嵌样式表的格式， 重新写一遍，运行看效果。 6.2 常用样式组合 涉及到的知识点有： 改变颜色和背景图像 使用字体 边距和边框 相关知识 知识点1：文本对齐 用于指定一行文本顶部至下一行不之间的距离。 line-height 用于指定段落和其它元素的缩进量。 text-indent 修改文本的大小写。Capitalize使每个单词的首字母大写；uppercase使所有字母大写；lowercase使所有字母小写。 text-transform 指定文本对齐方式。属性值可以是left、right、center或者justify。 text-aligh 允许上下移动元素，以便与统一行的其它元素对齐。属性值可以是baseline、sub、super、top 、text-top、middle、text-bottom和bottom。 vertical-align 允许在文本上面、下面和中间创建行，或者选择闪烁文本。属性值可以为none、underline、overline、line-through或blink。大多数浏览器不支持闪烁文本。 text-decoration 指定字母之间的间距