在網(wǎng)頁設(shè)計中，使用外部CSS文件（外聯(lián)CSS）來樣式化HTML元素是一種常見且高效的方法，外聯(lián)CSS文件允許***將樣式代碼與HTML結(jié)構(gòu)分離，提高代碼的可讀性和可維護性，以下是顯示外聯(lián)CSS的幾種方法：
1、使用<link>：在HTML文檔的<head>部分，通過<link>標簽引入外部CSS文件。
```html
<head>
<link rel="stylesheet" href="path/to/your/style.css">
</head>
```
2、使用@import規(guī)則：在CSS文件中，可以使用@import規(guī)則來引入另一個CSS文件。
```css
@import url('path/to/your/style.css');
```
3、使用樣式塊：在HTML元素內(nèi)部，通過style屬性直接定義樣式，雖然這種方法不常用，但在某些情況下很有用，特別是在一些小型樣式調(diào)整中。
示例
假設(shè)我們有一個名為style.css的外部CSS文件，內(nèi)容如下：
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 2em;
}我們可以通過以下方式在HTML文檔中顯示這個CSS文件：
1、使用<link>：
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>歡迎來到我的網(wǎng)站！</h1>
</body>
</html>
```
2、使用@import規(guī)則：
```css
@import url('style.css');
body {
color: red; /* 這會覆蓋style.css中的body樣式 */
}
```
注意事項
- 確保CSS文件的路徑正確，否則瀏覽器將無法找到并應(yīng)用樣式。
- 使用@import規(guī)則時，注意其加載順序，后定義的樣式會覆蓋先定義的樣式。
- 在生產(chǎn)環(huán)境中，建議將CSS文件放在與HTML文檔不同的域或子域下，以避免緩存問題。
通過以上方法，你可以輕松地在網(wǎng)頁中顯示和使用外聯(lián)CSS文件。
