CSS样式表语法规则.pptVIP

WEB基础 目标 构造CSS规则 基本CSS选择器 在网页中添加CSS的方法 复合选择器 CSS的继承特性 CSS选择器的构成 标签选择器 h1{ color: red; font-size: 25px; } .red{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } 网页中调用：p class=“red”class选择器/p #green{ font-size:30px; /* 字体大小 */ color:yellow; /* 颜色 */ } 网页中调用：p id=“greenID选择器/p 伪类选择器 在IE浏览器中，CSS中通过设置伪类来控制链接的样式 交集选择器 交集选择器 交集选择器 交集选择器 后代选择器 后代选择器 行内样式 内嵌样式 外部样式 根据样式文件与网页的关联方式又分为： 链接（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选择器以及特殊的伪类 告诉学员： 对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加。 例如，行内样式指定字体，而内嵌样式指定颜色，外部样式指定大小，则三种样式综合即可。 2）如果有冲突（例如都指定字体大小），则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示， 如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示。 3)演示示例：参考TG6-Source文件夹中的”样式混合使用“用例，同时使用了外部样式和行内样式。 * * * * * * * 讲解要点： 1）强调什么场合用：希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。 2）强调如何用：在HTML标签后面直接加上 ”style“属性即可，除了P以外，其他标签用法也是如此。 演示：参考TG6-Source文件夹中的”行内样式“用例。 讲解要点： 1）先演示：参考TG6-Source文件夹中的”HTML选择器“用例。 2）指出： 品种特征－H2 下面的三段都是段落P， 3）提问：我们应该采用哪些标签的样式呢？ 4）回答：显然是H2和P标签。 5）讲解关键代码，也可以打开源文件讲解。 提问： 1）实现如图所示的细边框效果，我们想想能不能用HTML选择器。 文本框和密码框对应的标签都是INPUT标签。 2）引导：确实是可以的，但是我们的按钮对应的HTML标签也是INPUT， 这样按钮也会变成细边框了，所以不行，怎么办，采用类样式，引出类样式。 3) 提问：哪我们一起看看，应该涉及到哪些样式呢？ 4）引导：前面我们讲过的边框样式，边框颜色，字体的颜色就可以了，然后给出源代码。 讲解要点： 1）类选择器的定义格式，border: 1px solid; 表示边框为实线，粗细为1 px 2）如何应用 3）类选择器可以让网页设计者选择性的应用，大家注意：两个按钮没有应用类样式，所以没受影响，从而实现了我们的要求。 4）演示：参考TG6-Source文件夹中的”类选择器“用例。 告诉学员： 由于ID选择器的功能与CLASS选择器一样，并且有时容易与HTML标签的“ID“属性相冲突，所以一般不推荐使用。 * CSS样式表-语法规则 构造CSS规则 在具体介绍CSS之前，先思考一个生活中的问题。 张飞 { 身高:185cm; 体重:105kg;