日期:2014-05-17  浏览次数:20667 次

CSS内联还是外联?

现在是一个推崇结构,表现,行为想分离的时代,最大的好处就是维护起来比较简单,方便,代码重用。把CSS,JS写在HTML里,就像一个大杂烩,很难理解,可读性差,文件大,维护起来非常麻烦。

?

但是CSS到底是内联还是外联呢?我们只要分析它的特点就不难得出答案。

CSS内联:就是把CSS放在HTML Head里使用Style包围。<style type="text/css"></style>

CSS外联:就是把CSS放到一个单独的文件里,然后在HTML通过调用。<link rel="stylesheet" type="text/css" href="">。

?

我们知道HTTP请求是比较昂贵的,CSS内联的话肯定会更快,因为把CSS放到HTML文件里,这意味着减少了一次HTTP请求。而外联的话就是一次HTTP请求,但是可以缓存,当浏览器加载过这个文件时,第二次请求的时候是第缓存里读取的,所以第二次请求时是很快的,外联的CSS还可以重用代码。那到底是使用内联还是外联呢?这就要看需求,如果一个页面不需要缓存时,也就是这个页面不太访问,或者访问不多的时候,比如注册页面,一般情况下人家只会进入一次,不可能第次进入这个网站你都去注册,那就另当别论了,这个页面不需要缓存,把CSS放在Head里时可以缩短加载时间,提高用户体验。对于经常访问的页面,外联肯定是不二的选择。

在一些大的网站,如:Google,Yahoo也可以看到把CSS写在Head里。对于结构表现行为分离的原则,我们对于CSS入在Head里是可以接受的,只要不是写在元素上面。