CSS 四种引入样式表优缺点分析

2024-10-20 21:05:53

CSS 四种引入样式表

CSS 有四种方式引入样式表，如下：

外部样式表
内部样式表
行内样式表
导入样式表

外部样式表优缺点

优点

实现了结构与表现的代码完全分离
方便复用及维护
因为分离到各自独立的文件中，让 HTML 文件大小大幅减少了，从而让页面结构更容易被程序员和网络爬虫读懂
对搜索引擎友好，让搜索引擎给页面评分更高，有利于页面搜索引擎排名
外部样式表在用户首次访问后就被缓存到用户电脑上，下次访问无需加载

缺点

如果样式很多，CSS 文件会变的很大查找起来不方便。此外，多一个 CSS 文件就多一次 HTTP 请求，在访问量大的网站中会加重服务器压力

内部样式表优缺点

优点

与外部样式表相比，内部样式表的主要优点是减少了一个文件也就减少了一次 HTTP 请求

缺点

由于内部样式表是写在 HTML 文件中的，导致页面不纯净、文件体积大、不利于网络爬虫获取信息、不利于维护、页面之间无法共享样式

行内样式表优缺点

优点

没有了样式表文件，在某些时候可以提升效率
使用 style 属性的样式效果会最强，会覆盖掉其他引入方式的相同样式效果

缺点

多个元素难以共享样式，不利于代码复用
HTML 和 CSS 代码混杂，不利于程序员和搜索引擎阅读

@import 指令导入样式表优缺点

优点

同外部样式表

缺点

每多引入一个 CSS 文件就会对服务器增加一次链接请求，当访问量较大需在维护性和性能上进行权衡
@import 需要页面完全载入后加载，如果网页足够大则可能出现闪烁，也就是在漫长的无样式网页加载后，CSS 样式才开始加载。

最新文章

热门文章