列表字体和间距
当创建样式列表时,需要
调整样式,使其保持与周围元素相同的
垂直间距和相互间的水平间距。
示例代码
/* 基准样式 */
html { font-family: Helvetica, Arial, sans-serif; font-size: 10px; }
/*设置网页字体基准大小*/
h2 { font-size: 2rem; }
ul,ol,dl,p { font-size: 1.5rem; }
li, p { line-height: 1.5; }
/*为列表、段落 设置相对字体大小,和行间距,有利于保持垂直间距一致*/
/* 描述列表样式 */
dd, dt { line-height: 1.5; }
dt { font-weight: bold; }
dd { margin-bottom: 1.5rem; }
/*描述列表样式与基准样式一致*/
- 规则集2和3为标题、不同的列表类型和段落以及设置了相对字体大小(这些列表的子元素将会继承该规则集),这就意味着每个段落和列表都将拥有相同的字体大小和上下间距,有助于保持垂直间距一致。
- 规则集4在段落和列表项目上设置相同的 line-height ,因此段落和每个单独的列表项目将具有相同的行间距, 这也将有助于保持垂直间距一致。
- 规则集5-7适用于描述列表,我们在描述列表的术语和其描述上设置与段落和列表项相同的行高,以及 margin-bottom 为1.5 rem(与段落(p)和列表项目(li))相同。 再次强调一遍,这里很好地实现了一致性! 我们还使描述术语具有粗体字体,因此它们在视觉上脱颖而出。
描述列表解释:
dl dt dd 是一套组合标签,且使用了dt和dd,则外层必须用dl包裹。
使用方法如下,
- 标题1
- 列表项1
- 列表项2
- 标题2
- 列表项1
- 列表项2
列表样式
可以在
或元素上用三个基本属性设置样式:
- list-style-type 设置列表项目符号类型
- 无序列表:方形、实心圆、空心圆
- 有序列表:数字、字母、罗马数字、大小写
- 其他样式
- list-style-position 设置项目符号位置在表项内还是外
- inside
- outside
- 0 0 表示每个列表项的左上侧
- list-style-image 为项目符号自定义图片
列表计数管理
start
制定列表从第几项开始计数
reversed
设置列表倒计数
- ……
value
为列表项指定数值
- ……