CSS中列表是在HTML語言中廣泛使用的一種文本樣式,它有三種類型:無序列表、有序列表和定義列表。下面將分別介紹它們的使用。
1. 無序列表
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul> /* CSS代碼 */ ul { list-style-type: disc; /* 常用的符號 */ /* list-style-position: inside; */ /* 將符號移至文本內部 */ }
上述代碼將生成一個帶有符號的無序列表,每個列表項前都有一個黑色的圓點,可以通過 CSS 中的list-style-type
屬性改變符號的類型。還可以使用list-style-position
屬性將符號移至文本內部。
2. 有序列表
<ol> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ol> /* CSS代碼 */ ol { list-style-type: decimal; /* 常用的數字 */ /* list-style-position: inside; */ /* 將數字移至文本內部 */ }
與無序列表類似,有序列表也可以通過 CSS 中的list-style-type
屬性改變數字的類型,還可以使用list-style-position
屬性將數字移至文本內部。
3. 定義列表
<dl> <dt>語言1</dt> <dd>描述1</dd> <dt>語言2</dt> <dd>描述2</dd> <dt>語言3</dt> <dd>描述3</dd> </dl> /* CSS代碼 */ dl { /* list-style-type: none; */ /* 取消符號 */ } dt { font-weight: bold; } dd { margin-left: 1em; }
定義列表由術語和定義組成,術語使用<dt>
標簽包裹,定義使用<dd>
標簽包裹。CSS 中的list-style-type
屬性不適用于定義列表,可以通過其他方式去掉符號;在 CSS 中同時設置font-weight: bold;
和margin-left: 1em;
可以使術語更加突出,定義再稍稍縮進,更具有層次感。
通過上述三種列表的使用,可以使文本更加清晰,易于閱讀。建議根據實際情況選擇適合的列表類型,減少不必要的視覺干擾。
上一篇css中寫背景圖片
下一篇css中加號圖標的代碼