CSS教程之：CSS列表
列表是我们经常用到的东西，用它来组织一组相关的元素非常方便。 在这一章，我们将学习如何使用CSS控制列表的样式，位置等。 有5个CSS属性可以用于控制列表： 属性名 说明 list-st
列表是我们经常用到的东西，用它来组织一组相关的元素非常方便。
在这一章，我们将学习如何使用CSS控制列表的样式，位置等。
有5个CSS属性可以用于控制列表：
list-style-type属性：
通过list-style-type属性，我们可以控制列表项前面标记的样式。
对于无序列表，我们可以改变标记的形状；对于有序列表，我们可以改变数字的形式。
下面是可以用于无序列表的可选值：
下面是可以用于有序列表的可选项：
例子：
在这一章，我们将学习如何使用CSS控制列表的样式，位置等。
有5个CSS属性可以用于控制列表：
| 属性名 | 说明 |
|---|---|
| list-style-type | 设置列表前面的圆点或数字标记 |
| list-style-positon | 当一行太长，需要折到下一行时，设置折行是与第一行对齐，还是缩进到标记之后 |
| list-style-image | 指定一个小图片代替列表标记 |
| list-style | 是前面三个属性的缩写 |
| marker-offset | 设置列表标记与文本之间的间距 |
list-style-type属性：
通过list-style-type属性，我们可以控制列表项前面标记的样式。
对于无序列表，我们可以改变标记的形状；对于有序列表，我们可以改变数字的形式。
下面是可以用于无序列表的可选值：
none: 无标记
disc: 实心圆点(缺省值)
circle:空心圆点
square:实心方块
disc: 实心圆点(缺省值)
circle:空心圆点
square:实心方块
下面是可以用于有序列表的可选项：
| 可选值 | 类型 | 例子 |
|---|---|---|
| decimal | 普通数字 | 1,2,3,4,5 |
| decimal-leading-zero | 在数字前面有一个0 | 01, 02, 03, 04, 05 |
| lower-alpha | 小写字母 | a, b, c, d, e |
| upper-alpha | 大写字母 | A, B, C, D, E |
| lower-roman | 小写罗马数字 | i, ii, iii, iv, v |
| upper-roman | 大写罗马数字 | I, II, III, IV, V |
| lower-greek | 小写希腊字母 | alpha, beta, gamma |
| lower-latin | 小写拉丁字母 | a, b, c, d, e |
| upper-latin | 大写拉丁字母 | A, B, C, D, E |
| hiragana | 日文平假名字符 | a, i, u, e, o, ka, ki |
| katakana | 日文片假名字符 | A, I, U, E, O, KA, KI |
| hiragana-iroha | 日文平假名序号 | i, ro, ha, ni, ho, he, to |
| katakana-iroha | 日文片假名序号 | I, RO, HA, NI, HO, HE, TO |
例子：
<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:sqaure;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>list-style-position属性：
list-style-position属性用于设置当列表项文本太长，需要换行时，折行如何与第一行对齐。
可选值：
none：不设置
inside：如果列表项文本太长，折行会与列表标记对齐
outside：如果列表项文本太长，折行会缩进到列表标记之后，与第一行文本对齐
例子：
<ul style="list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:sqaure;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
list-style-image属性：
通过list-style-image属性，我们可以指定一个小图片代替默认的列表标记：
<ul>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
list-style属性：
通过list-style属性，我们可以一次设置所有的列表样式：
<ul style="list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
marker-offset属性：
通过marker-offset属性，我们可以指定列表标记与文本之间的距离。
注意：IE6和Netscape 7不支持此属性
例子：
<ul style="list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>- 上一篇：CSS教程之：CSS外间距
- 下一篇：CSS教程之：CSS内间距
精彩图集
精彩文章