《实验4使用CSS修饰文字和段落.docx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实验4：使用CSS修饰文字和段落实验背景还记得我们的第一个实验手册吗？我们用HTML代码写了一个石家庄旅游的网页，介绍了石家庄景区：天山海世界。你是否为网页里频繁使用标记设置文字的样式以及那么多的 让网页代码看上去很杂乱而烦恼呢？学习了CSS之后，你便可以做到网页的内容和样式分离了，让我们一起动手，在实验一完成的网页的基础上，为网页改头换面，用CSS将网页的内容和显示样式进行分离吧。本次实验通过使用CSS修饰网页的文字和段落，掌握CSS的使用方式以及基本语法。实验目的1.理解网页的内容和样式。2.

2、掌握内部样式表、行内样式表以及外部样式表的使用。3.熟练掌握CSS的三种选择器：标签选择器、类选择器和ID选择器。4.熟练掌握使用CSS修饰文字和段落。5.掌握在CSS中添加注释的方法。6.了解浏览器的兼容性问题。实验分析要做到网页内容和样式的分离，首先要分清楚哪些是网页的内容，哪些是样式。网页的内容就是实实在在显示在页面上的未经任何修饰的文字、图片等内容。网页的样式便是对这些内容进行修饰的代码。在这个旅游网页中，非常明显的一个样式内容便是使用标记对文字进行的修饰，所以本实验的第一步便是将标记所

3、设置的样式分离出来。其次，大家注意到，

这两个标记里都设置了水平居中这种样式，我们也可以把这个样式分离出来。最后，“戏水大厅”和“漂流河”这两个小标题用标签设置了文字的加粗样式，我们也可以用CSS的样式来代替标记。实验步骤步骤1将标记所设置的样式使用CSS进行分离(1)分析整个网页的文字一共有多少种样式。通过直观的观察网页的外观，以及对代码中标记中的设置看以看出，原网页中，使用标记一共设置了3种文字样式：Ø

和

标题的样式：橙

4、色（#FF6600）的华文行楷字体；Ø正文段落文字的样式：浅紫色（#660099）的华文楷体，字号是3（大约对应于CSS中16px的字号），这些文字都要首行缩进两个字符，我们可以使用CSS的首行缩进来代替那些 们；Ø页脚的文字样式：浅紫色（#660099）的华文楷体，字号是2（大约对应于CSS中的14px的字号）(2)根据以上分析，请同学们使用内部样式表，实现上述三种样式：Ø书写应用于

和

的样式，很明显，我们应该使用标签选择器。Ø书写应用于正文段落文字的样式，思考一下，我们应该使用哪种选择器呢？

5、经过分析，最合适的应该是类选择器（为什么呢？），定义类选择器的样式，然后应用于正文文本。Ø书写应用于页脚的样式，我们讲过，对于页面上独一无二的布局快，一般使用ID选择器。页脚正好符合这个特性，所以在此我们使用ID选择器。(1)做完以上步骤之后便可以将原网页中的所有标记删除。步骤2使用CSS设置

的水平居中很明显，使用标签选择器。设置完之后将原先的align=”center”属性删除即可。步骤3设置小标题：“戏水大厅”和“漂流河”为粗体样式在此可以使用标签来帮忙，我们练习使用行内样式

6、表来设置该样式。知识回顾：一般什么情况下我们使用行内样式表呢？步骤4练习使用外部样式表到步骤三为止，我们的实验已经完成了。请大家思考一下，在本实验中我们使用内部样式表，假如该网站有多个网页，其他网页里的文字使用的是和该网页相同的样式，如何重用我们写的这些样式呢？请大家修改代码，使用外部样式表来完成该实验。（将内部样式表删除，使用外部样式表实现本实验。行内样式表不变）实验小结1.实验完成后，我们再看网页文件，会发现网页清爽了很多，而且样式代码可以重复使用。并且如果以后需要对样式进行修改也变的非常简单。2.在编写代码的时候

7、，进行适当的缩进，有助于提高代码的可读性，方便我们找到代码的错误所在。3.在写CSS代码的时候，一定要注意CSS一行代码结束时要用英文的分号，否则可能导致样式不起作用。知识扩展1.在CSS代码中，如果要对某条样式设置进行注释，可以使用/**/。2.在CSS样式设置过程中，你有没有发现类似这样的代码？如果有多个选择器具有相同的样式，我们可以将他们合并起来，写成如下形式：注意，选择符名称中间用逗号分隔。这种叫群选择器，我们会在后面的学习中学到。