CSS清單 (list)

介紹 CSS對清單 (list)屬性設定 文字、顏色...之清單屬性與屬性值應用


CSS 清單(List) 屬性表

屬性 說明
list-style 以下各屬性可簡化寫成 list-style
list-style-image 設定圖案為清單標記(List Item Marker)
list-style-position 指定標記是否是文件區內的一部份,設定記號的顯現位置 inside 或 outside(預定值)
list-style-type 設定清單標記(List Item Marker)

範例::CSS 清單屬性的檢視

範例觀測重點 :清單標記(List Item Marker)是自動產生在清單前方的

動手實驗一下 : 將 屬性值改變看看哪列清單呈現的樣式變化

清單標記種類:

圓形、正方形、大寫希臘upper-alpha 、小寫希臘lower-alpha、大寫羅馬upper-roman、小寫羅馬lower-roman、無清單標記

語法可簡寫 list-style: url("ball_blue.gif");



list-style

元素{屬性: 值 }檢視結果
ul { list-style:url("ball_blue.gif"); }
  • 第一項圖案標記,外側位置。
  • 第二項圖案標記,外側位置。
ul { list-style:url("ball_blue.gif"); list-style-position:inside; }
  • 第一項圖案標記號,內側位置。
  • 第二項圖案標記,內側位置。
ul { list-style:upper-roman; list-style-position:inside; }
  • 第一項標記號,內側位置。
  • 第二項標記,內側位置。
ul { list-style-type:decimal; list-style-position:inside; }
  • 第一項數字序號,內側位置。
  • 第二項數字序號,內側位置。

在HTML語法中 ,用ol 取代 ul 標籤 ,搭配CSS可產生有序號型的清單

元素{屬性: 值 }檢視序號樣式
ol { /*內定預設值*/ }
  1. 第一項數字型標記。
  2. 第二項數字型標記。
ol { list-style-type:decimal; }
  1. 第一項數字序號,內側位置。
  2. 第二項數字序號,內側位置。
ol { list-style-type:decimal-leading-zero; }
  1. 第一項以0當前導數字0序號。
  2. 第二項以0當前導數字0序號。
ol { list-style-type:upper-latin; }
  1. 第一項以大寫英文字母當做序號。
  2. 第二項以大寫英文字母當做序號。
ol { list-style-type:lower-latin; }
  1. 第一項以小寫英文字母當做序號。
  2. 第二項以小寫英文字母當做序號。
  3. 第三項以小寫英文字母當做序號。