PPT层叠样式表.pptVIP

第六章 层叠样式表 回顾 2-1 TABLE width=200 border=1 align=center CAPTION align=bottom我的表格/CAPTION TR bgcolor=yellow TH1/TH TH2/TH /TR TR align=center TD rowspan=23/TD TD align=right4/TD /TR TR TD align=right5/TD /TR /TABLE 回顾 2-2 要求密码文本框不超过10个字符，请补全HTML代码。 密码 INPUT type=“?” ?=“10” 下面有关单选按钮的HTML代码正确吗？INPUT type=radio name=radio1 value=FINPUT type=“radio” name=“radio2” value=“M”女 按钮分为哪三类，类型(type)分别是？ 下拉列表框中显示的超级女生是？ 最佳超级女生是 SELECT NAME =“myselect OPTION 1号/OPTION OPTION2号/OPTION OPTION selected3号/OPTION /SELECT 目标 掌握样式表的语法规则 样式表的分类： 行内样式表 内嵌样式表 外部样式表 掌握常用的样式 了解层DIV和SPAN标签 DHTML 简介 DHTML 的功能 DHTML 示例 什么是样式？ 常用的样式属性 行内样式 内嵌样式-1 内嵌样式-2 选择器 根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器 外部样式 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表 链接外部样式表 使用LINK（链接）标签 ，语法： HEAD LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” /HEAD 导入外部样式表 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import 样式表文件.css; /STYLE /HEAD 样式的混合使用 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式 DIV 层标签 SPAN 标签 CSS 的优点 改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护 总结 DHTML 是网页中 HTML、样式表和脚本的组合应用程序，增强网页的交互性 样式分为行内样式、内嵌样式、外部样式 样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类 DIV和SPAN都是容器标签，DIV是块级标签，可包含段落、标题等，SPAN是行级标签，不能包含段落、标题等，只能包含部分文字 提问：我们以前学习的P标段落标签显示时是什么颜色？ 回答：毫无疑问，黑色。 告诉学员： 1）如果把网页内容比喻为一个女孩的话，样式就好比这位女孩穿的衣服。 女孩喜欢用漂亮的衣装来打扮自己，同样，我们的网页也需要华丽的样式来包装。 2）PH1等标签都是默认为黑色白底，如果希望改变这些默认效果，就必须自定义新的样式。 演示：参考TG6-Source文件夹中的”什么是样式“用例。 重点提一下：文本属性、边框属性（后面的幻灯片讲”细边框样式时“会用到）。 讲解要点： 1）强调什么场合用：希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。 2）强调如何用：在HTML标签后面直接加上 ”style“属性即可，除了P以外，其他标签用法也是如此。 演示：参考TG6-Source文件夹中的”行内样式“用例。 提问：我们刚才的行内样式表可以让个别段落与众不同，但是有缺陷： 如果我们希望所有的段落都采用统一的样式呢？ 引导：在每个P标签后都加上相同的样式代码，太麻烦了。怎么办？ 很简单，把统一的样式放在HEAD标签内，让本网页的所有段落P标签共享同一样式。 这就是我们要讲的内嵌样式表。 告诉学员： 1）选择器：表明此样式作用于哪个HTML标签。 2）样式规则之间用分号分割开 3）定好样式后，它将对本网页内所有的同类标签（如P）起作用。 演示：参考TG6-Source文件夹中的”什么是内嵌样式“用例。 讲解要点： 1）先演示：参考TG6-Source