css文件引入的三种方式_html/css_WEB-ITnose

css文件引入的三种方式

一：嵌入式：

1

 

更为直观，但很大程度上加大了页面体积，不符合结构与表现分离的设计思想。

 

 

二：内联式： 

1  

内联 css可以有效减少 HTTP 请求，提升页面性能，缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面，因此能防止 CSS 文件无法读取而造成页面裸奔的现象。

 

三：外联式：

1  

 

 

四：外联和内联各有优点，可综合实际情况选择适合的级联方式

外联

优点：css在同一个文件中，当页面需要修改的时候只需要修改一个文件即可，方便维护。

缺点：HTTP请求多，浏览器要加载完CSS才能渲染页面，因此影响页面的性能。

内置

优点：内联 CSS 可以有效减少 HTTP 请求，提升页面性能，缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面，因此能防止 CSS 文件无法读取而造成

　　　页面裸奔的现象。

缺点：每次修改css的时候需要修改多个页面，不利于后期代码的维护

 

五：实际工作中的应用

在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。

内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。

从另一方面来说，如果外部文件中的 JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。

 

关键问题是，外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。

 

对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript和CSS，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。