怎样理解内容与样式分离的原则

在 Web 开发中，所谓内容与样式分离，就是让内容的归 HTML, 样式归 CSS, 不要混着用。

为了理解为什么要把内容与样式分离，我们先来看看，在互联网早期，内容和样式混在一起是什么样。

<p font="Arial" color="pink"></p>

• 上面这个例子，在元素 p 里，加入了字体和字体颜色这两个表示样式的属性，如果我一篇文档里有好几个段落，都要设置成这样，那我就要为每一个 <p> 加上这两个属性。是不是觉得有点麻烦？

• 接下来，我觉得这个字体和颜色不好看，要换成别的，那我就要找开文件，找到每一个 <p>, 把相应的属性一个一个来更改。是不是觉得更麻烦了？麻烦的还在后面！

• 接下来，我这个项目里面有好几个、甚至几十个网页，都要用同样的字体和颜色，怎么办？只有一个一个去改喽！是不是瞬间觉得崩溃了？

• 如果把样式单独抽离出来，就不会存在上面的问题了，代码会得到精简和重用，后期的维护会变得非常简单。我只用写一个 class 的样式，就可以同时更改多个有相同 class 的元素的样式；只用一个 css 文件，就可以同时链接到多个 HTML 页面上。

这样，整套文档就变得清晰易读、易维护！