# CSS樣式如何使用
CSS（層疊樣式表）是網頁設計的核心技術之一，用于控制HTML元素的視覺呈現。本文將詳細介紹CSS的基本使用方法、常見屬性和應用場景。
## 一、CSS的引入方式
### 1. 內聯樣式（行內樣式）
直接在HTML標簽中使用`style`屬性：
```html
<p style="color: red; font-size: 16px;">這是紅色文字</p>
在HTML的<head>標簽內通過<style>標簽定義：
<head>
<style>
p {
color: blue;
font-family: Arial;
}
</style>
</head>
通過<link>標簽引入獨立的.css文件：
<head>
<link rel="stylesheet" href="styles.css">
</head>
p { ... }.className { ... }#idName { ... }div p { ... }div > p { ... }h1 + p { ... }a:hover { color: orange; }
li:nth-child(odd) { background: #eee; }
p {
color: #333;
font-size: 14px;
line-height: 1.5;
text-align: center;
text-decoration: underline;
}
div {
width: 200px;
height: 100px;
padding: 10px;
margin: 20px auto;
border: 1px solid #ccc;
}
header {
background: linear-gradient(to right, #ff9966, #ff5e62);
background-size: cover;
}
.container {
display: flex;
justify-content: space-between;
}
.sidebar {
position: fixed;
right: 0;
top: 0;
}
| 單位類型 | 示例 | 說明 |
|---|---|---|
| px | font-size: 16px |
絕對像素單位 |
| em | margin: 2em |
相對于當前字體大小 |
| rem | padding: 1rem |
相對于根元素字體大小 |
| % | width: 50% |
相對于父元素 |
| vw/vh | height: 100vh |
視窗寬度/高度的1% |
@media (max-width: 768px) {
.menu { display: none; }
.mobile-btn { display: block; }
}
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
$primary-color: #3498db;
.button {
background: $primary-color;
&:hover {
background: darken($primary-color, 10%);
}
}
.header__nav--active）提示：現代CSS已支持嵌套語法（Chrome 112+原生支持），未來寫法將更簡潔。
通過系統學習CSS基礎語法、布局技術和新特性，開發者可以創建出美觀、響應式的現代化網頁界面。建議通過MDN文檔和CodePen實踐來鞏固知識。 “`
（注：實際字數為約750字，可通過擴展示例或增加章節細節達到800字要求）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
