CSS list-style-type 属性

2017/8/22 13:08:34admin0 阅读0 评论

<h2>CSS list-style-type 属性</h2>
list-style-type,是指在CSS中,不管是有序列表还是无序列表,都统一使用list-style-type属性来定义列表项符号。
<br />
<strong>语法:</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>list-style-type :value</code></pre>
<br />
<strong>属性值:</strong>
<table>
<tbody>
<tr>
<th> 值</th>
<th> 描述</th>
</tr>
<tr>
<td>none</td>
<td>无标记。</td>
</tr>
<tr>
<td>disc</td>
<td>默认。标记是实心圆。</td>
</tr>
<tr>
<td>circle</td>
<td>标记是空心圆。</td>
</tr>
<tr>
<td>square</td>
<td>标记是实心方块。</td>
</tr>
<tr>
<td>decimal</td>
<td>标记是数字。</td>
</tr>
<tr>
<td>decimal-leading-zero</td>
<td>0开头的数字标记。(01, 02, 03, 等。)</td>
</tr>
<tr>
<td>lower-roman</td>
<td>小写罗马数字(i, ii, iii, iv, v, 等。)</td>
</tr>
<tr>
<td>upper-roman</td>
<td>大写罗马数字(I, II, III, IV, V, 等。)</td>
</tr>
<tr>
<td>lower-alpha</td>
<td>小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)</td>
</tr>
<tr>
<td>upper-alpha</td>
<td>大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)</td>
</tr>
<tr>
<td>lower-greek</td>
<td>小写希腊字母(alpha, beta, gamma, 等。)</td>
</tr>
<tr>
<td>lower-latin</td>
<td>小写拉丁字母(a, b, c, d, e, 等。)</td>
</tr>
<tr>
<td>upper-latin</td>
<td>大写拉丁字母(A, B, C, D, E, 等。)</td>
</tr>
<tr>
<td>hebrew</td>
<td>传统的希伯来编号方式</td>
</tr>
<tr>
<td>armenian</td>
<td>传统的亚美尼亚编号方式</td>
</tr>
<tr>
<td>georgian</td>
<td>传统的乔治亚编号方式(an, ban, gan, 等。)</td>
</tr>
<tr>
<td>cjk-ideographic</td>
<td>简单的表意数字</td>
</tr>
<tr>
<td>hiragana</td>
<td>标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)</td>
</tr>
<tr>
<td>katakana</td>
<td>标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)</td>
</tr>
<tr>
<td>hiragana-iroha</td>
<td>标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)</td>
</tr>
<tr>
<td>katakana-iroha</td>
<td>标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)</td>
</tr>
</tbody>
</table>
<br />
<strong>说明:</strong>

设置或检索对象的列表项所使用的预设标记。
若list-style-image属性为none或指定图像不可用时,list-style-type属性将发生作用。
仅作用于具有display值等于list-item的对象(如li对象)。
<br />
<span style=“color:red;” ><strong>注意:</strong></span>ol对象和ul对象的type特性为其后的所有列表项目(如li对象)指明列表属性。
所有主流浏览器都支持 list-style-type 属性,IE5.5尚不支持所有CSS2的值。
<br />

<strong>示例:</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>li { list-style-type: square }</code></pre>
<br />
<strong>list-style-type实例</strong>

设置不同的列表样式:

<pre class=“line-numbers language-css”><code class=“language-css”>ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-alpha}
ol.lower-alpha {list-style-type:lower-latin} </code></pre>