在HTML文件中，可以通過style屬性來直接編寫樣式，但這種方式不僅非常繁瑣，而且難以維護。因此，通常我們會將樣式存儲在CSS文件中，并將其與HTML文件分離。那么，如何將CSS文件中定義的樣式應用到HTML元素呢？
將CSS文件與HTML文件關聯有兩種方式：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> ... </body> </html>
方法一：使用<link>標簽
使用<link>標簽可以將外部CSS文件加載到HTML頁面中，具體操作如下：
- 在HTML文件中的<head>標簽中，使用<link>標簽將CSS文件引入：
- <link>標簽有三個屬性，分別是rel、type和href。其中，rel屬性定義了文件與當前文檔之間的關系，type屬性指定文件的MIME類型，而href屬性則指定CSS文件的位置。
- 在CSS文件中，定義樣式規則：
- 在HTML文件中，使用class或id屬性給元素命名，并將CSS樣式應用到它們：
- 在CSS文件中，使用class選擇器或id選擇器來選擇元素，并將定義的樣式應用到它們：
<link rel="stylesheet" type="text/css" href="style.css">
body {
background-color: #f6f6f6;
font-family: Arial, sans-serif;
color: #333;
}<p class="intro">這是一段簡介</p> <div id="main">這是一個主要的內容區域</div>
.intro {
font-size: 1.2em;
}
#main {
width: 800px;
margin: 0 auto;
}方法二：使用<style>標簽
使用<style>標簽可以直接在HTML文件中定義CSS樣式，具體操作如下：
- 在HTML文件中的<head>標簽中，使用<style>標簽來定義CSS樣式：
- <style>標簽有兩個屬性，分別是type和media。其中，type屬性指定代碼的MIME類型，而media屬性指定樣式是為哪種媒體類型定義的。
- 在HTML文件中，使用class或id屬性給元素命名：
<style type="text/css">
body {
background-color: #f6f6f6;
font-family: Arial, sans-serif;
color: #333;
}
.intro {
font-size: 1.2em;
}
#main {
width: 800px;
margin: 0 auto;
}
</style><p class="intro">這是一段簡介</p> <div id="main">這是一個主要的內容區域</div>
總之，使用<link>標簽或<style>標簽，都能將CSS樣式應用到HTML文檔中的元素并使它們呈現出我們想要的樣式效果。
上一篇js css原理