CSS外链和内嵌都是什么?
在网站前端开发中,CSS是不可或缺的一部分,CSS有两种方式引用:外链和内嵌。
CSS外链就是将CSS代码独立保存在一个CSS文件中,通过在HTML文件中的头部链接CSS文件的路径来引入,这种方式可以很好聚合CSS代码,便于维护;CSS内嵌指在HTML文件中直接写CSS代码的方式,这种方式比较简单,但一旦系统规模扩大,更新起来就会比较麻烦。
CSS外链的优劣如何?
在使用CSS时,外链和内嵌方式各有优劣势。
外链方式优点:
- 使HTML和CSS的结构更加清晰,模块化,方便维护和协作
- 浏览器会将外链的.CSS文件缓存下来,再次载入出现样式集页面可以较快地加载,节省页面请求时间,提升网站性能
外链方式缺点:
- 在页面会产生额外的请求,并造成不必要的加载时间
- 可能会产生文件调用失败的情况
CSS内嵌的优劣如何?
内嵌方式优点:
- 减少了文件请求量,可以节约页面加载时间
- 缺失的CSS文件同时可结合压缩代码一并存放在HTML页面的头部,便于维护
内嵌方式缺点:
- 特别长的内嵌代码会大大增加HTML代码量,影响页面的加载速度
- 如果需要在不同的页面使用相同的样式需要重复编写其中的CSS代码
CSS外链还是内嵌该选择哪种?
在许多不同的实际应用中,我们可以根据具体情况来衡量两种方式的利弊。
如果页面设计比较简单,使用CSS内嵌可能更加适用。此类页面通常不需要太多的CSS,将CSS内嵌到HTML文件中并不会过分增加HTML文件大小。 反之,对于多样性和众多页面的大规模网站,CSS外链更加适用。外链的CSS代码可以同时控制每个页面,便于更好地处理CSS代码的更新和维护。