三、怎样理解内容与样式分离的原则
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>等各个对应内容标签里。。。
现在想想当时那个小姐姐怎么没打死我...
人家规规矩矩按照内容和样式分离的原则来写的页面,非被我逼着将内容和样式混在了一起!!!