CSS中有哪些常用的屬性

# CSS中有哪些常用的屬性

CSS（層疊樣式表）是網頁設計的核心語言之一，用于控制網頁的視覺呈現。本文將詳細介紹CSS中常用的屬性，幫助開發者快速掌握樣式設計的關鍵工具。

---

## 一、文本與字體屬性

### 1. `color`
設置文本顏色，支持十六進制、RGB、HSL和顏色名稱：
```css
p { color: #ff0000; }  /* 紅色 */

2. font-family

定義字體族，可設置備用字體：

body { font-family: "Arial", sans-serif; }

3. font-size

控制字體大小，單位包括px、em、rem等：

h1 { font-size: 2em; }

4. font-weight

設置字體粗細（100-900或normal/bold）：

strong { font-weight: bold; }

5. text-align

文本對齊方式：

.center { text-align: center; }

6. line-height

行間距控制：

p { line-height: 1.6; }

二、盒模型屬性

1. width & height

定義元素寬高：

.box { width: 300px; height: 200px; }

2. padding

內邊距設置：

div { padding: 10px 20px; }  /* 上下10px，左右20px */

3. margin

外邊距控制：

.container { margin: 0 auto; }  /* 水平居中 */

4. border

邊框樣式復合屬性：

img { border: 1px solid #ccc; }

5. box-sizing

盒模型計算方式：

* { box-sizing: border-box; }  /* 包含padding和border */

三、背景屬性

1. background-color

設置背景色：

header { background-color: rgba(0,0,0,0.8); }

2. background-image

添加背景圖：

.hero { 
  background-image: url("bg.jpg");
  background-size: cover;
}

3. background-position

控制背景圖位置：

.icon { background-position: center top; }

4. background-repeat

是否重復背景：

body { background-repeat: no-repeat; }

四、布局屬性

1. display

定義顯示類型：

.nav { display: flex; }  /* 彈性布局 */

2. position

定位方式：

.modal { 
  position: fixed;
  top: 50%;
  left: 50%;
}

3. float

浮動布局：

img { float: left; margin-right: 15px; }

4. z-index

層疊順序：

.popup { z-index: 100; }

五、Flexbox與Grid屬性

1. Flexbox相關

.container {
  display: flex;
  justify-content: space-between;  /* 主軸對齊 */
  align-items: center;             /* 交叉軸對齊 */
}

2. Grid相關

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

六、過渡與動畫

1. transition

屬性過渡效果：

button {
  transition: all 0.3s ease;
}
button:hover {
  transform: scale(1.1);
}

2. animation

關鍵幀動畫：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: fadeIn 2s;
}

七、響應式設計屬性

1. @media

媒體查詢：

@media (max-width: 768px) {
  .menu { display: none; }
}

2. vw/vh

視口單位：

.banner { height: 50vh; }  /* 視口高度的50% */

八、其他實用屬性

1. cursor

鼠標指針樣式：

.clickable { cursor: pointer; }

2. opacity

透明度控制：

.overlay { opacity: 0.5; }

3. box-shadow

添加陰影：

.card { 
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

4. transform

變形效果：

.logo:hover {
  transform: rotate(15deg);
}

總結

CSS提供了超過300個屬性，本文列舉了最常用的約50個核心屬性。實際開發中，建議： 1. 優先掌握盒模型和布局屬性 2. 熟練使用Flex/Grid等現代布局方案 3. 結合開發者工具實時調試 4. 關注瀏覽器兼容性（可通過caniuse.com查詢）

通過系統練習這些屬性，您將能夠創建出專業級的網頁界面。建議從簡單的樣式組合開始，逐步過渡到復雜布局和動畫效果。

提示：CSS3新增屬性（如flex/grid/transform）在現代瀏覽器中已得到良好支持，但在舊版IE中可能需要降級方案。 “`

（全文約1550字）