基于HTML的商业网站开发 第七章.pptVIP

第六章 层叠样式表 回顾 标签区分大小写吗？ 段落标签P和换行标签BR有什么区别？ 字符标签FONT有哪些常用属性？ 使用图片标签IMG显示图片q.jpg，如何写HTML代码? 写HTML代码时，空格用什么表示？ 显示如下所示的列表，如何写HTML代码： 您认为乔丹的血型是？ A. A型 B. B型 C 以上都不对 显示如下所示的超链接，如何写HTML代码 目标 掌握样式表的语法规则 样式表的分类： 行内样式表 内嵌样式表 外部样式表 掌握常用的样式 DHTML 简介 DHTML 示例 层叠式样式表 HTML语言可以改变数据的外观 ，但很粗糙，不能精确的显示 CSS –W3C组织开发出一套新的技术，专门显示数据的样式，可以实现数据和显示的分离 样式表引入网页的方式 行内---写在标记的style属性里 内嵌—单独写在网页中的style标记中 外部– 写在单独的的文件中 行内样式 常用的样式属性 内嵌样式 基本语法 style 选择器 {属性:值;属性:值；属性:值…..} /style 内嵌样式 内嵌样式- 选择器 根据选择器的不同，内嵌样式又分为： 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 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式 CSS 的优点 改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护 总结 DHTML 是网页中 HTML、样式表和脚本的组合应用程序，增强网页的交互性 样式分为行内样式、内嵌样式、外部样式 样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类 提问： 1）实现如图所示的细边框效果，我们想想能不能用HTML选择器。 文本框和密码框对应的标签都是INPUT标签。 2）引导：确实是可以的，但是我们的按钮对应的HTML标签也是INPUT， 这样按钮也会变成细边框了，所以不行，怎么办，采用类样式，引出类样式。 3) 提问：哪我们一起看看，应该涉及到哪些样式呢？ 4）引导：前面我们讲过的边框样式，边框颜色，字体的颜色就可以了，然后给出源代码。 讲解要点： 1）类选择器的定义格式，border: 1px solid; 表示边框为实线，粗细为1 px 2）如何应用 3）类选择器可以让网页设计者选择性的应用，大家注意：两个按钮没有应用类样式，所以没受影响，从而实现了我们的要求。 4）演示：参考TG6-Source文件夹中的”类选择器“用例。 告诉学员： 由于ID选择器的功能与CLASS选择器一样，并且有时容易与HTML标签的“ID“属性相冲突，所以一般不推荐使用。 讲解要点： 1）伪类的定义格式，HTML标签：某个动作 { 样式 }，如本例，A:hover{ … } 2）当对应的HTML标签发生了这个动作，样式就会起作用。 如本例：当鼠标停留在超链接的上方时，指定的样式起作用，所以颜色变红，并带下划线，该例将会在后续章节使用。 3）告诉学员，这些伪类选择器只需了解，都是一些固定的用法，可以从网上查找别的一些用法。 4）演示：参考TG6-Source文件夹中的”伪类选择器“用例。 提问学员： 1）行内样式表什么场合用？ 2）内嵌样式表什么场合用？有什么好处？ 3）既然内嵌样式可以使一张网页内的同类标签共享同一样式， 如果希望网站的所有网页都共享同一样式呢？怎么办？ 4）引导：模仿我们的C语言中的头文件，我们可以把样式单独提取来，放在一个单独的文件， 然后和每张网页关联不就可以了吗 。引出外部样式表。 中国十大品牌IT教育机构 DHTML HTML 脚本语言 JavaScript + + 层叠样式表 CSS DHTML 是制作动态 HTML 页面的技术！ 天上的星星闪啊闪 移魂大法 我