網頁開發中，有哪些方法可以加載CSS？

好，我是“前端就業加油站”的面試官。請問，在網頁開發中，有哪些方法可以加載CSS呢？在網頁開發中，可以通過以下四種方式加載CSS：

·1.在標簽內部添加內部樣式：例如，在下面這個div標簽中，使用紅色字體：div style="color：red">紅色字體：</div>。

·2.通過內嵌樣式，即在head頭部標簽之間添加<style>...</style>。

接著，使用選擇器實現樣式效果：例如，為名為“box”的類添加一個藍色字體的樣式，可以使用以下代碼：<style>.box { color：blue；} </style>。這種方式會增加代碼維護的難度，不建議使用。

·3.在head頭部標簽之間使用<link>標簽來引入外部樣式文件：例如，從外部引入一個名為“sun.css”的樣式文件，可以使用以下代碼：<link rel="stylesheet"href="./sun.css">。推薦使用這種方式來引入樣式，這也是主流的樣式引入方式。

·4.在HTML文件或CSS文件中導入外部樣式表：在HTML文件或CSS文件中導入外部樣式表，并將其視為文件的一部分。

這就是我對這個問題的回答。謝謝您的提問！

覽器加載頁面是按從上到下順序加載的。加載 JS 并執行的時候，會阻塞其他資源的加載。這是因為 JS 可能會有 DOM 、樣式等等操作，所以瀏覽器要先加載這段 JS 并執行，再加載放在它后面的 HTML、CSS。

因此，加入一段巨大的 JS 放在最上面，瀏覽器首先要下載并執行，這段時間里面，頁面是空白的。相比于加載了部分 HTML 和樣式但是沒有 JS 交互功能，顯然是后者對于瀏覽者體驗要好。

然而，是否所有 JS 都要放在最下面呢？并不是。

舉實際的例子：

html5shiv是一段 JS 腳本，用來是早期 IE 兼容 HTML5 新增標簽的支持。

這個 JS 腳本，必須要放在上面 head 部分，為什么呢？因為在老 IE 瀏覽器下面，不支持 <section> 這樣的標簽，所以用 JS 來兼容。如果放在底部，等 IE 瀏覽器先報錯了，才會執行這塊 JS 沒多大用。

jQuery 這類的庫，也是建議放在最上面的。首先最大的疑問可能是 jQuery 這么大，放在上面豈不是阻塞的很厲害？

不過 jQuery 通常引用的是 CDN 地址，而且經過 gzip 壓縮之后并不是很大，而且引用公共 CDN 上面的 jQuery 話，很大幾率早已被用戶緩存下來了。所以可以不需要考慮阻塞產生的性能問題。

而我們都知道，JS 是按順序執行下來的。也就是你沒運行 jQuery 之前，先運行了調用 jQuery 函數的代碼，就會報錯。你可以控制你自己寫的 JS 放在頁面最下面，放在 jQuery 下面，但是你無法保證頁面上其他地方會不會有人圖省事直接在 HTML 代碼里面輸出 JS。如果有，那么就會報錯。

所以我建議，類庫放在上面加載，其余代碼盡可能放在最底下加載。
然而，前端性能優化只是薄薄一層
可能前端優化半天，還不如上個 CDN 或者加個寬帶或者優化一個后端算法來的效果好。

4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入外部 CSS 文件。下面我們就來看看這些方式和它們的優缺點。

內聯方式

內聯方式指的是直接在 HTML 標簽中的 style 屬性中添加 CSS。

示例：

<div style="background: red"></div>

這通常是個很糟糕的書寫方式，它只能改變當前標簽的樣式，如果想要多個 <div> 擁有相同的樣式，你不得不重復地為每個 <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內聯方式引入 CSS 代碼會導致 HTML 代碼變得冗長，且使得網頁難以維護。

嵌入方式

嵌入方式指的是在 HTML 頭部中的 <style> 標簽下書寫 CSS 代碼。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只對當前的網頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結構和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效，所以當多個頁面需要引入相同的 CSS 代碼時，這樣寫會導致代碼冗余，也不利于維護。

鏈接方式

鏈接方式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可。

導入方式

導入方式指的是使用 CSS 規則引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比較鏈接方式和導入方式

鏈接方式（下面用 link 代替）和導入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。

link 屬于 HTML，通過 <link> 標簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導入語句應寫在 CSS 中，要注意的是導入語句應寫在樣式表的開頭，否則無法正確導入外部文件；
@import 是 CSS2.1 才出現的概念，所以如果瀏覽器版本較低，無法正確導入外部樣式文件；
當 HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載；

小結：我們應盡量使用 <link> 標簽導入外部 CSS 文件，避免或者少用使用其他三種方式。

在線咨詢

上一篇：前端和設計師都要知道的css長度單位
下一篇：使用CSS完成元素居中的七種方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網頁開發中，有哪些方法可以加載CSS？

您的項目需求

網頁開發中，有哪些方法可以加載CSS？