怎样理解内容与样式分离的原则
在 Web 开发中,所谓内容与样式分离,就是让内容的归 HTML, 样式归 CSS, 不要混着用。
为了理解为什么要把内容与样式分离,我们先来看看,在互联网早期,内容和样式混在一起是什么样。
<p font="Arial" color="pink"></p>
-
上面这个例子,在元素 p 里,加入了字体和字体颜色这两个表示样式的属性,如果我一篇文档里有好几个段落,都要设置成这样,那我就要为每一个
<p>
加上这两个属性。是不是觉得有点麻烦? -
接下来,我觉得这个字体和颜色不好看,要换成别的,那我就要找开文件,找到每一个
<p>
, 把相应的属性一个一个来更改。是不是觉得更麻烦了?麻烦的还在后面! -
接下来,我这个项目里面有好几个、甚至几十个网页,都要用同样的字体和颜色,怎么办?只有一个一个去改喽!是不是瞬间觉得崩溃了?
-
如果把样式单独抽离出来,就不会存在上面的问题了,代码会得到精简和重用,后期的维护会变得非常简单。我只用写一个 class 的样式,就可以同时更改多个有相同 class 的元素的样式;只用一个 css 文件,就可以同时链接到多个 HTML 页面上。
网友评论