CSS样式设计 网页开发基础教学PPT课件.ppt

为了克服这个困难，我们使用背景来制作精确定位的项目符号。 代码如下： ul{ list-style-type:none; } li{ background:url(image/bg.gif) no-repeat 0px 3px; padding-left:20px; } 3.5 使用列表元素 列表浮动 li{ float:left; } li列表项是块状对象，可以有边框，有边距。 2.4.5 使用列表元素 总 结 本次章节内容主要让大家了解css的概念、语法、分类以及它的常用属性设置，希望通过这个讲座让同学们领会到css强大功能。 同时希望以后学生们在学习CSS时，应该养成如下好习惯： 强迫自己用CSS，不断使用不断修正。 使用中，持续的、系统的学习CSS。 寻找最优的表达方法书写CSS。 div作为一个盒子，一个容器，承担着网页布局的重任，利用浮动定位，实现灵活布局。 网页内部的元素：文字、图片、列表、超链接、段落、标题等等有自己的标记，利用这些标记合理组织内容。把内容放在div盒子里。 总 结 实 验 1 某网站首页、二（三）级页面设计 提问：我们以前学习的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文件夹中的”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）内嵌样式表什