Css基础教程详解PPT.pptVIP

* * 只讲程序运行机制，很少的代码。 * * * * * * * * * * * * * 重点提一下：文本属性、边框属性（后面的幻灯片讲”细边框样式时“会用到）。 * * 讲解要点： 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“属性相冲突，所以一般不推荐使用。 * 讲解要点： 1）伪类的定义格式，HTML标签：某个动作 { 样式 }，如本例，A:hover{ … } 2）当对应的HTML标签发生了这个动作，样式就会起作用。 如本例：当鼠标停留在超链接的上方时，指定的样式起作用，所以颜色变红，并带下划线，该例将会在后续章节使用。 3）告诉学员，这些伪类选择器只需了解，都是一些固定的用法，可以从网上查找别的一些用法。 4）演示：参考TG6-Source文件夹中的”伪类选择器“用例。 * 提问学员： 1）行内样式表什么场合用？ 2）内嵌样式表什么场合用？有什么好处？ 3）既然内嵌样式可以使一张网页内的同类标签共享同一样式， 如果希望网站的所有网页都共享同一样式呢？怎么办？ 4）引导：模仿我们的C语言中的头文件，我们可以把样式单独提取来，放在一个单独的文件， 然后和每张网页关联不就可以了吗 。引出外部样式表。 * 讲解要点： 1)先讲解链接外部样式表的语法 2）然后讲解步骤 3）按上述步骤演示：参考TG6-Source文件夹中的”链接样式表“用例。 * 告诉学员： 1 ) 操作步骤同链接样式表。 2) 导入和链接两种方式功能一样，没什么大的区别，掌握其中一种就行。 * 告诉学员： 对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加。 例如，行内样式指定字体，而内嵌样式指定颜色，外部样式指定大小，则三种样式综合即可。 2）如果有冲突（例如都指定字体大小），则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示， 如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示。 3)演示示例：参考TG6-Source文件夹中的”样式混合使用“用例，同时使用了外部样式和行内样式。 * 讲解要点： 1）DIV也称为层标签，表示一层区域。语法为： DIV id=“层编号” style=“postion:…指定层所在的位置…；z-index=n (指定在Z轴方向的编号)” ….包含的内容 /DIV 2）DIV是容器标签，它可以包括（容纳）段落P、标题H1、图片IMG、文字等内容，如图所示。 所以还称为块级容器标签。 3)告诉学员，层的位置了解，因为实际设计页面时需要DreamWeaver插入层(可演示如何插入)，强调z-index的含义 * 讲解要点： 1）SPAN是一个行内元素，它不能包含段落、标题、表格等，显示时也不会引起换行。 最常见的使用方式是嵌入在某个标签中，突出显示某部分文本，甚至某个字符。 例如，文本内容“H2所有韩款童装10元/件起拍H2”中， 我们希望突出显示客户关心的价格数字“10”，就可以H2标签中插入SPAN，单独修饰”10”。 2）告诉学员：关于SPAN的样式只需了解，一般也通过DreamWeaver来辅助设计。 * * * * * CSS概述 目 录 CSS是什么 为什么要使用CSS CSS 中盒状模型 CSS语法 引入CSS的4种方式 CSS选择器 CSS的继承和优先级 常见样式介绍 学习方法 需要具备的基础知识 在继续学习之前，你需要对下面的知识有基本的了解： HTML XHTML HTMLX