CSS基础-列表

列表字体和间距

当创建样式列表时，需要调整样式，使其保持与周围元素相同的垂直间距和相互间的水平间距。

示例代码

/* 基准样式 */

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包裹。

使用方法如下，

<dl>

　　<dt>标题1</dt>

　　<dd>列表项1</dd>

　　<dd>列表项2</dd>

　　<dt>标题2</dt>

　　<dd>列表项1</dd>

　　<dd>列表项2</dd>

</dl>

列表样式

可以在<ul>或<ol>元素上用三个基本属性设置样式：

list-style-type 设置列表项目符号类型

无序列表：方形、实心圆、空心圆
有序列表：数字、字母、罗马数字、大小写
其他样式

list-style-position 设置项目符号位置在表项内还是外

inside
outside
0 0 表示每个列表项的左上侧

list-style-image 为项目符号自定义图片

url(……)

列表计数管理

start

制定列表从第几项开始计数

reversed

设置列表倒计数

<ol start="4" reversed> <li>……

value

为列表项指定数值

<li value="2"> ……

巴特西

CSS基础-列表

列表字体和间距

列表样式

列表计数管理

最新文章

热门文章