合并 CSS 的方法

在網頁制作過程中，我們可能需要使用多個 CSS 文件，但是在頁面加載時，瀏覽器需要逐個下載這些文件，這會降低加載速度，對用戶體驗不友好。因此，我們可以考慮將多個 CSS 文件合并成一個文件，減少 HTTP 請求，提高頁面加載速度。

合并 CSS 文件的方法有以下幾種：

1. 使用 link 標簽導入多個樣式表

該方法簡單明了，但是會增加 HTTP 請求次數，并且可能會因為樣式的覆蓋而造成樣式沖突。

2. 將多個 CSS 文件內容復制到一個文件中

/* style1.css */
body {
background-color: #F5F5F5;
}
/* style2.css */
h1 {
font-size: 24px;
}
/* style3.css */
#main {
width: 960px;
margin: 0 auto;
}

/* style.css */
body {
background-color: #F5F5F5;
}
h1 {
font-size: 24px;
}
#main {
width: 960px;
margin: 0 auto;
}

該方法可以減少 HTTP 請求次數，但是如果多個 CSS 文件有相同的樣式規則，會造成樣式沖突。

3. 使用 CSS 預處理器

// style1.scss
$bg-color: #F5F5F5;
body {
background-color: $bg-color;
}
// style2.scss
$font-size: 24px;
h1 {
font-size: $font-size;
}
// style3.scss
$main-width: 960px;
$main-margin: 0 auto;
#main {
width: $main-width;
margin: $main-margin;
}

使用 CSS 預處理器（如 Sass、Less）可以將多個 CSS 文件轉換為一個文件，同時可以使用變量、嵌套、函數等高級特性，方便樣式的管理和維護。

4. 使用 CSS 壓縮工具

/* style1.css */
body{background-color:#F5F5F5}
/* style2.css */
h1{font-size:24px}
/* style3.css */
#main{width:960px;margin:0 auto}

使用 CSS 壓縮工具（如 YUI Compressor、CSS Compressor）可以將多個 CSS 文件壓縮成一個文件，去除空格、注釋等無用字符，減小文件大小，提高頁面加載速度。