《CSS权威指南》学习记录——列表

HTML部分

无序列表

<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以
标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。

<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

嵌套列表

<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>

CSS部分

列表类型

关键字：list-style-type。默认值为disc，应用于display值为list-item的元素，有继承性。





CSS无法区别有序列表项和无序列表项，因此可以在有序列表中使用同心圆而非数字，不过最终的结果可能还是要由用户代理决定。

不想显示标志，可以使用none，不过并不会中断有序列表中的计数。

<ol>
<li class="try">咖啡</li>
<li>牛奶</li>
<li class="try">茶</li>
<li>水</li>
</ol>

.try{list-style-type:none;}

列表项图像

关键字：list-style-image。可接受：url、none（默认值）。应用于display值为list-item的元素。有继承性。

ul li{list-style-image:url(onio.jpg);}

如果图像未能正常加载，或被破坏，或不是用户代理能处理的格式，这时提供一个作为“后路”的标志类型往往是一个好主意：

ul li{list-style-image:url(nhio.png);  list-style-type:square;}

列表标志位置

关键字：list-style-position。可接受：inside、outside（默认值）。有继承性。

<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>

<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>

.inside{
list-style-position:inside;
}
.outside{
list-style-position:outside;
}
</ul>

简写列表样式

关键字：list-style。顺序无所谓，没有显式声明的值为默认值，有继承性。

li{list-style:url(ohio.jpg) square outside;}