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"> ……