原标题：0031 如何使用css文件对网页内容和样式进行分离

上节课，学习了针对文字可以设置很多种样式。

这节课，学习如何将内容和样式进行分离。

上节课的课后练习

1.将斜体字体效果去除

2.将工作经历和工作经验(部分)这2行文字也做成简介这行文字的效果

完成代码如下：

页面效果如下：

可以看到3个标题都是一样的效果了。

但是，在编写代码的时候，发现一个问题，就是3个div的代码是一模一样的，复制起来很长，而且假如要将三个标题的字体全部都改小一点的话，要修改3处地方，有没有一个简便的方法，只改一次就好了呢？

新建css文件并使用

之前在div中利用属性style来设置css属性的方法是一种比较直接的方法，适合编写某个特殊的样式。

如果有大量相同的重复的style的时候，一般不采用style属性，而是采用class属性来实现。

也就是将相关的css属性和值存放到一个单独的以.css做为后缀名的文件中，然后html文件引用这个css文件，然后使用class属性来使用。

首先，在代码编辑器中新建一个文件，编写代码如下，就是将div里面style的值复制过来，并增加换行，保存为index.css，注意保存到目录要和index.html位于同一个目录下：

然后，在index.html当中在meta这一行下面新增一行，引入index.css

然后，将div里面的style="......"这一大段删除，修改为class="bigtitle"：

刷新页面，可以看到页面效果是一样的：

接下来，要将标题的文字从30px修改为20px，修改index.css文件中的font-size的值为20px，然后注意保存文件：

刷新页面可以看到页面的3个标题的字体同时变小了，只修改了一处地方就实现了目的：

这里要注意一点，在css文件中，设置一个样式，需要样式起一个名字，例如这里的bigtitle，然后名称前面有一个点。

点的意思表示这个样式需要用css="样式名"来使用。

对特定标签使用css文件定义

现在index.html里面还有一个地方使用了style，把它也挪到index.css文件中，插入如下代码：

index.html删除掉body开始标签的后面的style的部分：

刷新页面发现没有变化：

修改index.css文件中body里面的background-color的值如下：

刷新页面发现背景颜色变得更淡了：

这里，发现对css文件中样式的定义有一点不一样，而且html文件中没有使用class="样式名"，为何样式仍然起作用了呢？

关键点在于css文件中样式的名字为body，并且前面没有点。

这样的设置方式就是告诉浏览器，这个样式只对body标签起作用，对其他标签不起作用，因此也不需要在body标签里面使用class了。

关键点在于css里面样式名和html元素标签名一致来完成。

假如把css文件里面的第一行的body修改为div，那么里面的背景颜色值就对所有的div起作用了。

假如把css文件里面的第一行的body修改为dddd一个无效的名字，那么里面的背景颜色值就找不到对应的标签从而没有作用，这样的话body标签也就没有设置背景色了。

这种设置方式在某些情况下是有好处的，可以灵活设置大量相同设置而无需设置class属性，特别是在不同的html页面都需要一样的设置的时候，只要html都是引用同样一个css文件，那么不同的html同样的标签都会自动匹配一样的样式了。

设置通用样式和特殊样式

如果要求所有页面中所有的文字都是12px，但是标题内容行都是20px，该如何做呢？

先在css文件中的body里面增加文字大小的定义：

index.html不做修改，刷新页面后可以看到，3段内容没有任何样式定义，但是所有的字体都变小了，同时标题内容行的字体大小仍然是20px，这是因为修改了body标签的样式，那么对于body里面包含的子元素标签，该样式都会起作用，除非子元素自己重新定义了这个样式：

然后，需要将简介的具体内容部分的字体大小调整为16px，而工作经历和工作经验的字体仍然保持12px不变，应该这样修改：

在index.css 里面增加一个样式，名字为smallcontent，里面只有font-size，如下：

然后修改index.html里面在简介的具体内容前面加上

，最后一行删掉

，然后加上

，如下：

刷新页面可以看到因为简介这块做了特殊样式定义，因此字体大小就变大了，其他2部分没有设置，则字体不变：

内容和样式分离的好处

通过上面将样式都放在css文件的方法，可以将页面内容和显示效果进行分离。

分离的好处有很多：

1.修改一处地方，同时可以影响多个地方，修改更方便。

2.css文件中可以针对标签设置，也可以特殊定义样式名然后引用，可以更灵活，也可以减少样式重复定义。

3.可以将内容的编写任务交给程序员，将样式的编写交给设计人员或者美工，从而互不干扰，提高开发效率。

课后练习

使用css样式将工作经历和工作经验部分的文字大小修改为14px，文字颜色修改为#222222。

往期教程

因为教程是系列教程，前后关联性非常强，请大家按照历史消息发布时间先后次序进行阅读。返回搜狐，查看更多

责任编辑：