CSS 屬性介紹：五大分類與查找方式

CSS 屬性是用來定義 HTML 元素樣式的具體規則，也就是 您想讓網頁上的某個元素呈現什麼樣子。下方歸納出幾項分類，可依分類找出需要的方向。

文字與字體

控制文字的顏色、大小、行距與字體，直接決定內文好不好讀。這一類多半會被子元素 繼承，通常在 body 設好一組基底，其餘只在需要時覆蓋。

屬性	說明
color	文字顏色。
font-size	字級大小。
font-family	字型與字型堆疊。
font-weight	字重，也就是粗細。
line-height	行高，決定段落的疏密。
text-align	水平對齊方式。

詳細用法請見 文字與字體 。

視覺

設定背景、框線、圓角與陰影這類裝飾性的樣式，不會被子元素繼承，也不影響元素佔的空間。

屬性	說明
background	背景的顏色、圖片、重複方式與定位。
border	框線的樣式、寬度與顏色。
border-radius	圓角。
box-shadow	元素的陰影。
text-shadow	文字的陰影。

詳細用法請見 視覺 。

元素尺寸

控制元素的寬高與內外間距，以及尺寸該怎麼計算。最容易踩坑的是寬度含不含內距與框線，詳見 區塊模型。

屬性	說明
width、height	元素的寬與高。
max-width、min-width	寬度的上下限，響應式的常用寫法。
margin	元素外側的間距。
padding	元素內側的間距。
aspect-ratio	固定寬高比。
box-sizing	決定寬高含不含內距與框線。

詳細用法請見 元素尺寸 。

清單

調整有序與無序 清單 的項目符號樣式與位置，也可以換成圖片。導覽列這類把清單當版面骨架的場合，通常會直接把符號移除。

屬性	說明
list-style-type	項目符號或編號的樣式。
list-style-position	符號落在內容內側還是外側。
list-style-image	用圖片當項目符號。
list-style	以上三者的簡寫。

詳細用法請見 清單 。

其他

未歸類的屬性，例如：滑鼠指標、可見度、透明度、溢位與裁切。其中 display: none、visibility: hidden 與 opacity: 0 都能讓元素看不見，但差別不小。

屬性	說明
overflow	內容超出範圍時要裁切、捲動還是顯示。
cursor	滑鼠指標的樣式。
visibility	可見度，隱藏後仍佔著空間。
opacity	透明度。
content	偽元素要產生的內容。
clip-path	以指定的形狀裁切元素。

詳細用法請見 其他 。

常見問題

CSS 屬性要全部背起來嗎？

不用。先記住分類與常用的幾十個屬性，其餘依需求查詢即可。理解 盒模型、層疊 與 繼承 這些觀念，比背屬性表實用得多。

簡寫屬性有什麼要注意的？

沒寫到的子屬性會被重設為預設值。如只寫了背景圖片的簡寫，原本設定的背景色就會被清掉，這是最常見的意外。詳見 縮寫表示法。

延伸閱讀

文字與字體視覺屬性元素尺寸縮寫表示法