三、怎样理解内容与样式分离的原则
3.1 首先理解内容和样式分别是什么？
当我们谈内容和样式的时候，我们在谈什么？
我们其实在谈网页的组成部分：
一个网页分为三个部分：HTML——结构，也就是内容，css——表现，也就是样式，javascript——行为。
所以我们今天谈到的内容和样式分别就是HTML和CSS，所以内容和样式分离，就是指在网页
编码的过程中，要将html和css两大部分分开。
让上帝的归上帝，让凯撒的归凯撒；让内容的归HTML，让样式归CSS。
3.2 那么为什么要将内容和样式分离？
这里我们可以参考一个比较形象的概念：换肤。
还记得我们给QQ空间、个人微博首页进行一键换肤的操作么？
我们可以轻松改变页面的样式和展现、但是具体页面的内容以及结构都为发生改变。
这个就是因为内容和样式分离的原因。
当我们要改变页面某个部分颜色、某段字体的大小时，就没必要一个个去找到这个部分字体，而是在CSS里面，直接改动该部分样式。想象一下，如果一个网站有很多页面，有很多很多个段落，如果一个个去改，岂不是很耗时？
所以，一言以蔽之，为什么要将内容和样式分离，归根结底还是为了让前端页面变得清晰易读、易于维护。
3.3 一件往事？
这里，我想到了以前的经历：
当大三，我在一家门户网站实习的时候，我们要做专题页面，也就是一个个的前端页面，需要前端小姐姐小哥哥帮忙开发个模板，因为分几期，所以有模板方便自己之后根据模板填充修改内容。我个人那个时候还处于刚刚接触HTML的时候，对CSS、内容和样式分离什么的还不了解。所以当我看到前端小姐姐最后给我的模板，是把CSS文件做成.css这样的超链放在了<head></head>标签里是我是崩溃的，因为这样我就看不懂了整个模板在说什么，更不会改了。。然后我强迫前端小姐姐，把样式一个个重新写到了< body></body>、<p></p>等各个对应内容标签里。。。
现在想想当时那个小姐姐怎么没打死我...
人家规规矩矩按照内容和样式分离的原则来写的页面，非被我逼着将内容和样式混在了一起！！！
网友评论