CSS 常用樣式屬性
這篇教學整理了 CSS 常用的樣式屬性，並按照各個功能進行分類，點擊樣式屬性名稱就可以查看詳細教學，只要熟悉這些樣式屬性，就可以在網頁排版領域如魚得水，輕鬆實現各種版面效果 ( 一些較為些冷門的樣式屬性會再陸續補充 )。
快速導覽：
文字
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| color | yes | 文字顏色 |
| font | yes | 文字樣式縮寫格式 |
| font-family | yes | 設定字體 |
| font-size | yes | 文字尺寸 |
| font-weight | yes | 文字粗細 |
| letter-spacing | yes | 字元間距、字母間距 |
| word-spacing | yes | 單字間距 ( 單字：兩個空白之間的文字 ) |
| font-style | yes | 文字樣式 ( 正常、斜體 ) |
| text-transform | yes | 文字大小寫轉換 |
| text-overflow | yes | 文字超過範圍的顯示行為 |
| text-combine-upright | yes | 垂直水平書寫方向整合 |
| text-decoration、text-decoration-* | yes | 文字裝飾 ( 底線、刪除線、頂線 ) |
| text-shadow | yes | 文字陰影 |
| text-emphasis text-emphasis-style text-emphasis-color |
yes | 文字重點強調 ( 文字上方符號提示 ) |
| text-underline-offset | yes | 底線上下定位 |
| text-underline-position | yes | 底線位置 |
| ruby-position | yes | 標注文字的位置 |
| paint-order | yes | 文字外框。 |
| @font-face | - | 定義字型 |
對齊與換行
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| line-height | yes | 行高 |
| word-break | yes | 文字換行方式 ( 需搭配 white-space: normal; ) |
| line-break | yes | 具有標點符號 CJK ( 中日韓 ) 文字的換行方式。 |
| white-space-collapse | yes | 連續空白遇到換行的處理方式 |
| overflow-wrap ( 舊版為 word-wrap ) | yes | 單字中的換行方式 |
| text-wrap | yes | 美化排版的換行方式 |
| white-space | yes | 處理文字間的空白以及軟換行行為 |
| hyphens | yes | 連字號 ( 換行時使用 ) |
| hyphenate-character | yes | 自訂換行符號 |
| text-align | yes | 水平對齊 |
| text-align-last | yes | 最後一行對齊 |
| text-indent | yes | 縮排 |
| column-count | no | 文字根據數量自動分欄 |
| column-width | no | 文字根據寬度自動分欄 |
| columns | no | 文字自動分欄縮寫格式 |
| column-rule-style | no | 文字自動分欄隔線樣式 |
| column-rule-color | no | 文字自動分欄隔線顏色 |
| column-rule-width | no | 文字自動分欄隔線寬度 |
| column-rule | no | 文字自動分欄隔線縮寫格式 |
| column-span | no | 文字自動分欄標題 |
| column-fill | no | 文字自動分欄方式 |
文字進階設定 ( 針對部分特殊字元或特殊排版需求 )
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| tab-size | yes | 定義 Tab 大小 |
| writing-mode | yes | 書寫模式 ( 左到右、右到左、上到下 ) |
| text-orientation | yes | 字元方向 ( 旋轉 90 度 ) |
| direction、unicode-bidi | yes | 宣告方向 ( 左到右、右到左 ) |
| font-smooth | yes | 文字平滑化 ( 針對 Retina 螢幕 ) |
| font-kerning | yes | 文字間距微調 ( 效果不明顯 ) |
| font-stretch | yes | 文字寬度 ( 需要字體支援 ) |
| font-synthesis | yes | 文字合成 ( 處理缺少的字體 ) |
| font-variant | yes | 文字替代與變體 ( 針對 OpenType 字型 ) |
| font-feature-settings | yes | 進階排版 ( 針對 OpenType 字型 ) |
元素容器
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| display | no | 容器顯示類型 |
| width、height | no | 寬度和高度 |
| max-width、max-height min-width、min-height |
no | 最大或最小寬高 |
| box-sizing | no | 定義寬高顯示方式 |
| aspect-ratio | no | 根據比例調整寬高 |
| padding、padding-* | no | 內邊距 |
| margin、margin-* | no | 外邊界 |
| overflow | no | 內容溢出與裁切 |
| overflow-x、overflow-y | no | x y 軸的內容溢出顯示方式 |
| visibility | yes | 元素可見性 ( 隱藏、顯示 ) |
| content-visibility | yes | 內容可見性 ( 隱藏、顯示 ) |
| opacity | yes | 元素透明度 |
| box-shadow | no | 容器陰影 |
| contain | no | 內容範圍 |
邊框和輪廓
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| border | no | 邊框 ( 縮寫格式 ) |
| border-color | no | 邊框顏色 |
| border-style | no | 邊框樣式 |
| border-width | no | 邊框粗細 |
| border-radius | no | 邊框圓角 |
| border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius |
no | 邊框單一圓角 ( 根據位置 ) |
| border-start-start-radius border-start-end-radius border-end-start-radius border-end-end-radius |
no | 邊框單一圓角 ( 根據方向 ) |
| border-image | no | 影像邊框 ( 縮寫格式 ) |
| border-image-outset | no | 邊框的影像擴展範圍 |
| border-image-repeat | no | 邊框的影像重複 |
| border-image-slice | no | 邊框的影像切片 |
| border-image-source | no | 邊框的影像來源 |
| border-image-width | no | 邊框的影像寬度 |
| outline | no | 輪廓 ( 縮寫格式 ) |
| outline-style | no | 輪廓樣式 |
| outline-width | no | 輪廓粗細 |
| outline-color | no | 輪廓顏色 |
背景或圖片元素
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| background | no | 背景 ( 縮寫格式 ) |
| background-attachment | no | 背景圖片固定 ( 是否跟隨視窗捲動 ) |
| background-repeat | no | 背景圖片重複 |
| background-blend-mode | no | 背景混合模式 |
| background-color | no | 背景色 |
| background-image | no | 背景圖片 |
| background-position | no | 背景圖片定位位置 |
| background-origin | no | 背景圖片定位參考 |
| background-clip | no | 裁切背景 |
| background-size | no | 背景圖片尺寸 |
| object-fit | no | 物件填滿方式 ( 針對可置換內容元素 ) |
| object-position | no | 物件定位 ( 針對可置換內容元素 ) |
遮罩或濾鏡
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| mask | no | 遮罩 ( 縮寫格式 ) |
| mask-clip | no | 遮罩裁切 |
| mask-composite | no | 遮罩集合運算 |
| mask-image | no | 影像遮罩 |
| mask-mode | no | 遮罩模式 |
| mask-origin | no | 遮罩參照 |
| mask-position | no | 遮罩位置 |
| mask-repeat | no | 遮罩重複方式 |
| filter | no | 影像濾鏡 |
| clip-path | no | 裁切路徑 ( 將元素剪裁出指定形狀 ) |
基本排版與定位
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| position | no | 定位 |
| top、bottom、left、right | no | 位置距離定位 |
| inset、inset-block、inset-inline | no | 內嵌寬度定位 |
| float | no | 浮動 |
| shape-outside | no | 浮動形狀 |
| shape-image-threshold | no | 浮動形透明度的臨界值 |
| shape-margin | no | 浮動形狀的尺寸 |
| clear | no | 清除浮動 |
| vertical-align | no | 垂直對齊 |
| z-index | no | 圖層關係 |
Flex 彈性排版
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| flex | no | 彈性伸縮 ( 縮寫格式 ) |
| flex-direction | no | 彈性元素方向 |
| flex-shrink | no | 彈性項目縮小比例 |
| flex-wrap | no | 彈性元素換行 |
| row-gap | no | 彈性元素垂直間距 |
| column-gap | no | 彈性元素水平間距 |
| gap | no | 彈性元素垂直與水平間距 |
| justify-content ( flex ) | no | 水平對齊 |
| align-self ( flex ) | no | 覆寫單一元素垂直對齊方式 |
| align-items ( flex ) | no | 單行垂直對齊 |
| align-content ( flex ) | no | 多行垂直對齊 |
| order ( flex ) | no | 彈性項目順序位置 |
Grid 網格排版
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| grid | no | 網格 ( 縮寫格式 ) |
| grid-area | no | 使用網格空間名稱排列 |
| grid-auto-columns | no | 自動格線 |
| grid-auto-rows | no | 自動格線 |
| grid-auto-flow | no | 網格流向 |
| grid-column | no | 樣式屬性縮寫 |
| grid-row | no | 樣式屬性縮寫 |
| grid-row-start | no | 排列網格項目 |
| grid-row-end | no | 排列網格項目 |
| grid-column-start | no | 排列網格項目 |
| grid-column-end | no | 排列網格項目 |
| grid-template | no | 網格定義 ( 縮寫格式 ) |
| grid-template-areas | no | 網格空間命名 |
| grid-template-columns grid-template-rows |
no | 網格線 |
| grid-row-gap | no | 網格每一列的間距，等同 row-gap |
| grid-column-gap | no | 網格每一欄的間距，等同 column-gap |
| grid-gap | no | 網格間距，等同 gap |
| row-gap | no | 網格每一列的間距，等同 grid-row-gap |
| column-gap | no | 網格每一欄的間距，等同 grid-column-gap |
| gap | no | 網格間距，等同 grid-gap |
| justify-self ( grid ) | no | 項目在網格中的水平對齊方式 ( 網格項目 ) |
| justify-items ( grid ) | no | 所有項目在各自網格中的水平對齊方式 ( 網格容器 ) |
| justify-content ( grid ) | no | 所有項目針對整個網格進行水平對齊 ( 網格容器 ) |
| align-self ( grid ) | no | 項目在網格中的垂直對齊方式 ( 網格項目 ) |
| align-items ( grid ) | no | 所有項目在各自網格中的垂直對齊方式 ( 網格容器 ) |
| align-content ( grid ) | no | 所有項目針對整個網格容器進行垂直對齊 ( 網格容器 ) |
| order ( grid ) | no | 網格項目順序 |
清單
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| list-style | yes | 清單樣式簡寫 |
| list-style-image | yes | 清單圖片標記 |
| list-style-position | yes | 清單標記位置 |
| list-style-type | yes | 清單標記類型 |
| counter-increment | no | 定義清單計數器增加的數值 |
| counter-reset | no | 定義清單計數器名稱並重設數值 |
| counter-set | no | 設定清單數值 (修改清單數值 ) |
| @counter-style | - | 定義計數規則 |
表格
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| table-layout | yes | 每個儲存格「自動分配」的寬度 |
| caption-side | no | 表格的標題 |
| empty-cells | no | 空儲存格狀態 |
| border-collapse | yes | 表格邊框重疊 |
| border-spacing | yes | 表格邊框間距 |
轉換
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| transform | no | 轉換函式 |
| transform-style | no | 變形轉換模式 |
| transform-origin | no | 轉換中心點 |
| perspective | no | 透視距離 |
| perspective-origin | no | 透視中心點 |
| backface-visibility | no | 背面可視 |
| translate | no | 平移 |
| rotate | no | 旋轉 |
| scale | no | 尺寸縮放 |
轉場漸變
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| transition | no | 轉場 |
| transition-duration | no | 轉場持續時間 |
| transition-property | no | 轉場屬性 |
| transition-delay | no | 轉場延遲時間 |
| transition-behavior | no | 轉場行為 |
| transition-timing-function | no | 轉場速度 |
動畫
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| @keyframe | - | 定義動畫影格 |
| animation-name | no | 動畫名稱 |
| animation-duration | no | 動畫持續時間 |
| animation-iteration-count | no | 動畫播放次數 |
| animation-delay | no | 動畫延遲時間 |
| animation-timing-function | no | 動畫速度 |
| animation-direction | no | 動畫播放方向 |
| animation-fill-mode | no | 動畫播放前後模式 |
| animation-play-state | no | 動畫播放或暫停 |
| animation | no | 動畫 ( 縮寫格式 ) |
| offset-path | no | 動畫路徑 |
| offset-distance | no | 移動距離 |
| offset-anchor | no | 對齊路徑 |
| offset-rotate | no | 旋轉方向 |
| offset-position | no | 路徑位置 |
| offset | no | 動畫路徑 ( 縮寫格式 ) |
生成內容與定義
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| variables | - | 變數 |
| content | no | 生成內容 |
| quotes | yes | 引號 |
| @media | - | 媒體查詢 |
| @container | - | 容器查詢 |
| container-type | no | 容器類型 |
| container-name | no | 容器名稱 |
| container | no | 容器縮寫格式 |
| @property | - | 自訂屬性值 |
| @layer | - | 分層優先順序 |
| @import | - | 匯入樣式 |
瀏覽器與使用者行為
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| scrollbar-color | yes | 捲軸顏色 |
| scrollbar-gutter | yes | 捲軸寬度 |
| scrollbar-width | yes | 捲軸空間 |
| cursor | yes | 滑鼠游標圖示 |
| pointer-events | yes | 滑鼠互動行為 |
| user-select | no | 使用者選取 |
| scroll-behavior | no | 捲動行為 |
| overscroll-behavior | no | 超過捲動的行為 ( 行動裝置限定 ) |
濾鏡與顏色函式
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| mix-blend-mode | no | 影像混合模式 |
| isolation | no | 限制影像混合範圍 |
| backdrop-filter | no | 背景濾鏡 |
| filter | no | 影像濾鏡 |
| blur() | - | 高斯模糊 ( 函式類型 ) |
| brightness() | - | 亮度 ( 函式類型 ) |
| contrast() | - | 對比度 ( 函式類型 ) |
| drop-shadow() | - | 陰影 ( 函式類型 ) |
| grayscale() | - | 灰階效果 ( 函式類型 ) |
| invert() | - | 負片效果 ( 函式類型 ) |
| sepia() | - | 棕褐色效果 ( 函式類型 ) |
| saturate() | - | 飽和度 ( 函式類型 ) |
| hue-rotate() | - | 色相 ( 函式類型 ) |
| opacity() | - | 透明度 ( 函式類型 ) |
| linear-gradient() | - | 線性漸層 ( 函式類型 ) |
| radial-gradient() | - | 放射漸層 ( 函式類型 ) |
| conic-gradient() | - | 圓錐形漸層 ( 函式類型 ) |
| repeating-linear-gradient() | - | 線性重複漸層 ( 函式類型 ) |
| repeating-radial-gradient() | - | 放射重複漸層 ( 函式類型 ) |
| repeating-conic-gradient() | - | 圓錐形重複漸層 ( 函式類型 ) |
| rgb() | - | RGB 色彩模型 ( 函式類型 ) |
| hsl() | - | HSL 色彩模型 ( 函式類型 ) |
| lab() | - | Lab 色彩模型 ( 函式類型 ) |
| lch() | - | LCH 色彩模型 ( 函式類型 ) |
| oklab() | - | OkLab 色彩模型 ( 函式類型 ) |
| oklch() | - | OkLCH 色彩模型 ( 函式類型 ) |
| color() | - | 指定色彩空間顏色 ( 函式類型 ) |
| color-mix() | - | 顏色混合 ( 函式類型 ) |
| light-dark() | - | 深色與淺色模式 ( 函式類型 ) |
CSS 其他函式類型
| 樣式屬性 | 是否繼承 | 說明 |
|---|---|---|
| calc() | - | 基本數學運算 |
| round() | - | 四捨五入 |
| clamp() | - | 限制數值範圍 |
| max()、min() | - | 最大值與最小值 |
| maxmin() | - | 最大值與最小值 |
| repeat() | - | grid 網格排版重複設定 |
| hypot() | - | 參數平方和的平方根 |
| mod()、rem() | - | 餘數 |
| exp()、log() | - | 指數函數 |
| pow()、sqrt() | - | 次方與平方根 |
| sin()、cos()、tan() asin()、acos()、atan()、atan2() |
- | 三角函數 |
| attr() | - | 取得套用該選擇器元素的屬性值 |
| url() | - | 網址 |
| counter() | - | 計數器 |
| counters() | - | 多層計數器 |
| circle() | - | 圓形 |
| ellipse() | - | 橢圓形 |
| rect() | - | 四邊形 |
| polygon() | - | 多邊形 |
| inset() | - | 內縮邊距和圓角 |
| xywh() | - | 虛擬矩形 |
| ray() | - | 放射線形狀 |
| path() | - | 路徑 |
小結
其實 CSS 還有一些較為「冷門」的樣式屬性，由於很少有機會使用，未來有空再陸續補充，但只要熟悉這些常用的樣式屬性，就可以在 CSS 領域終於如得水，輕鬆做出各種 CSS 排版效果囉。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～