DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 9.2 列表項符號list-style-type
9.2 列表項符號list-style-type
編輯:CSS基礎知識     

一、元素中定義列表項符號

在HTML入門教程中,有序列表和無序列表的列表項符號都是使用type屬性來定義的。我們先來回顧一下。

1、有序列表

語法:

 
<ol type="屬性值">
    <li>有序列表項</li>
    <li>有序列表項</li>
    <li>有序列表項</li>
</ol>
表1 有序列表type屬性 type屬性值 列表項的序號類型 1 數字1、2、3…… a 小寫英文字母a、b、c…… A 大寫英文字母A、B、C…… i 小寫羅馬數字i、ii、iii…… I 大寫羅馬數字I、II、III……

2、無序列表

語法:

 
<ul type="屬性值">
    <li>有序列表項</li>
    <li>有序列表項</li>
    <li>有序列表項</li>
</ul>
表2 無序列表type屬性 type屬性值 列表項的序號類型 disc 默認值,實心圓“●” circle 空心圓“○” square 實心正方形“■”

二、CSS中定義列表項符號

type屬性來定義列表項符號,那是在元素屬性中定義的。但是我們之前說過,標簽和樣式是應該分離的,那在CSS中怎麼定義列表項符號呢?

在CSS中,不管是有序列表還是無序列表,都統一使用list-style-type屬性來定義列表項符號。

語法:

list-style-type:屬性值;

說明:

list-style-type屬性取值如下:

表3 有序列表list-style-type屬性取值 list-style-type屬性值 說明 decimal 默認值,數字1、2、3…… lower-roman 小寫羅馬數字i、ii、iii…… upper-roman 大寫羅馬數字I、II、III…… lower-alpha 小寫英文字母a、b、c…… upper-alpha 大寫英文字母A、B、C…… 表4 無序列表list-style-type取值 list-style-type屬性值 說明 disc 默認值,實心圓“●” circle 空心圓“○” square 實心正方形“■” 表5 去除列表項符號 list-style-type取值 說明 none 去除列表項符號

舉例1:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>list-style-type屬性</title>
    <style type="text/css">
        ol{list-style-type: lower-roman ;}
        ul{list-style-type: circle ;}
    </style>
</head>
<body>
    <p>有序列表</p>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <p>無序列表</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

舉例2:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>list-style-type屬性</title>
    <style type="text/css">
        ol,ul{list-style-type:none;}
    </style>
</head>
<body>
    <p>有序列表</p>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <p>無序列表</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

分析:

“ol,ul{list-style-type:none;}”使用的是CSS選擇器中的群組選擇器。多個不同元素定義了相同的CSS樣式,就可以使用群組選擇器。在群組選擇器中,元素之間是用逗號隔開,記住是英文的逗號,中文逗號無效。

使用“list-style-type:none”這個小技巧可以去除列表項默認的符號,在實際開發中,我們經常要用到。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved