# HTML怎么使用CSS
CSS（層疊樣式表）是用于控制網頁外觀和布局的核心技術之一。通過與HTML結合使用，可以實現豐富的視覺效果和響應式設計。本文將詳細介紹在HTML中使用CSS的四種主要方法，并分析其適用場景。
## 一、內聯樣式（Inline Style）
直接在HTML元素的`style`屬性中編寫CSS代碼：
```html
<p style="color: blue; font-size: 16px;">這是內聯樣式示例</p>
特點： - 優先級最高（權重1000） - 不利于維護和復用 - 適合臨時測試或覆蓋其他樣式
在HTML文檔的<head>部分使用<style>標簽定義：
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial;
}
h1 {
color: darkred;
text-align: center;
}
</style>
</head>
優勢： - 適用于單個頁面的專用樣式 - 比內聯樣式更易于維護 - 減少HTTP請求
通過<link>標簽引入獨立的.css文件：
<head>
<link rel="stylesheet" href="styles.css">
</head>
styles.css文件內容：
/* styles.css */
.navbar {
background: #333;
padding: 15px;
}
.btn {
border-radius: 4px;
padding: 8px 16px;
}
最佳實踐： 1. 實現樣式與結構完全分離 2. 支持瀏覽器緩存加速加載 3. 適合多頁面共享樣式 4. 推薦使用預處理器（如Sass/Less）
在CSS文件中導入其他樣式表：
/* main.css */
@import url('reset.css');
@import url('components/buttons.css');
注意：
- 應放在CSS文件開頭
- 可能影響頁面加載性能
- 現代開發更推薦使用<link>標簽
當多個樣式規則沖突時，按以下優先級應用：
1. !important聲明
2. 內聯樣式（1000）
3. ID選擇器（100）
4. 類/偽類/屬性選擇器（10）
5. 元素/偽元素選擇器（1）
示例：
#header .nav li a:hover { /* 權重：100 + 10 + 1 + 1 + 10 = 122 */
color: red !important;
}
模塊化組織：
css/
├── base/
│ ├── reset.css
│ └── typography.css
├── components/
│ ├── buttons.css
│ └── card.css
└── utilities/
├── spacing.css
└── colors.css
使用CSS變量：
:root {
--primary-color: #3498db;
--max-width: 1200px;
}
.container {
max-width: var(--max-width);
}
媒體查詢實現響應式：
@media (max-width: 768px) {
.sidebar {
display: none;
}
}
outline臨時顯示元素邊界：
“`css
<!--[if IE 9]>
<link rel="stylesheet" href="ie9.css">
<![endif]-->
通過合理選擇CSS引入方式并結合現代開發實踐，可以構建出高性能、易維護的網頁界面。建議初學者從外部樣式表開始，逐步掌握更高級的組織方法。 “`
這篇文章包含了約750字，采用Markdown格式編寫，覆蓋了CSS在HTML中的主要使用方法、優先級規則以及現代開發建議，適合作為入門到中級的學習資料。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
