在網頁設計中，我們可以使用CSS來美化網頁，使之變得更具有吸引力和可讀性。而使用外部樣式表是一種非常便捷并且效率較高的方式，它可以讓我們在多個網頁中共享同一份樣式表，從而使得我們可以在更短的時間內完成網頁的設計。
樣式表的鏈接可以通過HTML的<link>標簽實現，比如： <link rel="stylesheet" type="text/css" href="style.css"> 其中，href指向我們的樣式表，type是指樣式表文件的類型，通常為"text/css"。
下面進入正題，在此我們將展示一個簡單的CSS外部樣式表的案例：
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>CSS外部樣式表案例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>歡迎來到我的網站</h1>
<p>這是一個簡單的示例網頁，用來演示CSS外部樣式表的使用。</p>
<a href="#">點擊這里</a>
</div>
</body>
</html>
CSS代碼：
#container {
width: 80%;
margin: 0 auto;
background-color: #f2f2f2;
border: 1px solid #ccc;
}
h1 {
text-align: center;
color: #333;
}
p {
font-size: 16px;
line-height: 1.5;
}
a {
display: block;
text-align: center;
padding: 10px;
background-color: #f00;
color: #fff;
text-decoration: none;
}在這個案例中，我們分別設置了包裹網頁內容的container類的寬度、居中以及背景色和邊框，設置了h1標簽的字體顏色和居中對齊，設置了p標簽的字體大小和行高，以及設置了a標簽的背景色、字體顏色、內邊距和文本去除下劃線等樣式。實際應用中，我們可以根據需求和設計風格進行樣式的定制，來達到更好的設計效果。
下一篇css外部樣式表轉換