CSS详解 java web入门.ppt

* * * * * * * * * * * * * * * * * * * * * * 讲解要点： 1）强调什么场合用：希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。 2）强调如何用：在HTML标签后面直接加上 ”style“属性即可，除了P以外，其他标签用法也是如此。 演示：参考TG6-Source文件夹中的”行内样式“用例。 * 提问：我们刚才的行内样式表可以让个别段落与众不同，但是有缺陷： 如果我们希望所有的段落都采用统一的样式呢？ 引导：在每个P标签后都加上相同的样式代码，太麻烦了。怎么办？ 很简单，把统一的样式放在HEAD标签内，让本网页的所有段落P标签共享同一样式。 这就是我们要讲的内嵌样式表。 告诉学员： 1）选择器：表明此样式作用于哪个HTML标签。 2）样式规则之间用分号分割开 3）定好样式后，它将对本网页内所有的同类标签（如P）起作用。 演示：参考TG6-Source文件夹中的”什么是内嵌样式“用例。 * * 提问学员： 1）行内样式表什么场合用？ 2）内嵌样式表什么场合用？有什么好处？ 3）既然内嵌样式可以使一张网页内的同类标签共享同一样式， 如果希望网站的所有网页都共享同一样式呢？怎么办？ 4）引导：模仿我们的C语言中的头文件，我们可以把样式单独提取来，放在一个单独的文件， 然后和每张网页关联不就可以了吗 。引出外部样式表。 * 讲解要点： 1)先讲解链接外部样式表的语法 2）然后讲解步骤 3）按上述步骤演示：参考TG6-Source文件夹中的”链接样式表“用例。 * 告诉学员： 1 ) 操作步骤同链接样式表。 2) 导入和链接两种方式功能一样，没什么大的区别，掌握其中一种就行。 * 告诉学员： 对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加。 例如，行内样式指定字体，而内嵌样式指定颜色，外部样式指定大小，则三种样式综合即可。 2）如果有冲突（例如都指定字体大小），则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示， 如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示。 3)演示示例：参考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“属性相冲突，所以一般不推荐使用。 * * * * * * * * * * * * * * * * * * * * div与span在XHTML排版中有着非常重要的作用。二者的功能描述均为：定义样式的容器。 1. div div对象的默认显示模式为display:block，因此，div成为块状容器，占据整行显示空间。div对象常用于编排一个块状内容，进行大栏目的分区。如：导航区、内容区、辅助功能区、页脚区等。 2. span span对象的默认显示模式为display:in-line，因此，span成为内嵌容器，以行间内联方式显示，从而不会破坏行中元素的显示顺序。span对象常用于页面中细节内容的样式调整。如：一小段文字、一个图标等。 Font常见属性包括： 字体、字号、字符间距、词间距、行间距、粗体、斜体、下划线、删除线等 font-style : normal | italic font-variant : normal | small-caps font-weight:: normal | bold font-size : length line-heigh