搜尋

清單樣式 list-style

「清單」對於網頁排版而言，是個「可控制但又不太好控制」的元素，由於清單本身具有的預設樣式，如果要符合自己的網頁樣式需求，就必須透過 list-style、list-style-type、list-style-image、list-style-position 這幾個可以調整清單面貌的樣式屬性修改樣式，這篇教學會介紹這些樣式屬性的用法。

快速導覽：

CSS 教學 - 清單樣式 list-style

清單元素預設樣式

網頁清單元素有三種，分別是「無序清單 ul、li、有序清單 ol、li、自訂清單 dl、dt、dd」，這些清單元素具有「預設的樣式」，使用時可以適度透過 CSS 修改樣式 ( 例如外邊界或內邊距 )，下方是 ul、li 的預設樣式。

ul {
  display: block;
  list-style-type: disc;
  /* list-style-type: decimal; */ /* ol 預設值 */
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}

list-style-type 清單標記類型

list-style-type 樣式屬性可以設定清單標記的類型，具有繼承特性，是 list-item 顯示類型元素專屬的樣式，通常會將樣式撰寫在 ul 元素上，透過繼承的方式到讓 li 元素具有樣式特性 ( 有時也會直接套用在 li 元素 )，撰寫方式如下：

ul {
  list-style-type: 標記類型名稱;
}
ul li {
  list-style-type: 標記類型名稱;
}

W3C 提供非常多種的標記，只要輸入標記名稱就會產生對應的標記樣式，標記預設值為 disc 實心圓點，如果設定為 none 表示不顯示標記，下方列出完整的標記類型。

清單標記類型展示：https://codepen.io/oxxo/pen/NWZEaQQ

list-style-type 套用巢狀清單

在巢狀清單的狀態下，如果使用的是「預設標記類型」會按照「disc > circle > square」的順序標記，當標記到 square 之後就會一直用 square 延續下去。

線上展示：https://codepen.io/oxxo/pen/JjQemZW

<!-- HTML 程式碼 -->
<div>
  <ul>
    <li>apple</li><li>banana</li>
    <li>oxxo.studio
      <ul>
        <li>red</li><li>orange</li>
        <li>yellow
          <ul>
            <li>pen</li><li>pencil</li>
            <li>paper
              <ul>
                <li>Javascript</li><li>HTML</li><li>CSS</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
</style>

CSS 教學 - 清單樣式 list-style - list-style-type 巢狀清單預設標記類型

如果套用了其他的標記樣式，就會按照設定的標記樣式名稱套用，但需要特別注意，由於 ul 元素本身具有樣式，若要套用到巢狀結構「深層」的清單，繼承的權重無法覆蓋元素本身樣式，需要額外撰寫選擇器，透過權重的方式覆蓋樣式 ( 參考CSS 選擇器的優先順序 ( 權重 ) )，下方範例展示三種修改標記名稱的方式。

線上展示：https://codepen.io/oxxo/pen/dyBQgKV

<!-- HTML 程式碼 -->
<div>
  <ul class="a"><li>apple</li><li>banana</li>
    <li>oxxo.studio
      <ul><li>red</li><li>orange</li>
        <li>yellow
          <ul><li>pen</li><li>pencil</li>
            <li>paper
              <ul><li>Javascript</li><li>HTML</li><li>CSS</li></ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
<div>
  <ul class="b"><li>apple</li><li>banana</li>
    <li>oxxo.studio
      <ul><li>red</li><li>orange</li>
        <li>yellow
          <ul><li>pen</li><li>pencil</li>
            <li>paper
              <ul><li>Javascript</li><li>HTML</li><li>CSS</li></ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
<div>
  <ul class="c"><li>apple</li><li>banana</li>
    <li>oxxo.studio
      <ul><li>red</li><li>orange</li>
        <li>yellow
          <ul><li>pen</li><li>pencil</li>
            <li>paper
              <ul><li>Javascript</li><li>HTML</li><li>CSS</li></ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {list-style-type: upper-roman;}         /* 單純希望樣式會繼承 */
  .b, .b ul {list-style-type: upper-roman;}  /* 額外用選擇器 */
  .c li {list-style-type: upper-roman;}      /* 套用到 li */
</style>

CSS 教學 - 清單樣式 list-style - list-style-type 巢狀清單繼承的權重狀況

list-style-type 自訂標記

除了使用這些清單標記名稱，只要將標記名稱換成自訂的「符號或文字」，就能使用「自訂的」符號或文字作為標記，下方會將巢狀清單的每一層都套用不同的自訂符號 ( 更多特殊符號：特殊符號、特殊字元、特殊文字 )

線上展示：https://codepen.io/oxxo/pen/WNqYayW

<!-- HTML 程式碼 -->
<div>
  <ul><li>apple</li><li>banana</li>
    <li>oxxo.studio
      <ul><li>red</li><li>orange</li>
        <li>yellow
          <ul><li>pen</li><li>pencil</li>
            <li>paper
              <ul><li>Javascript</li><li>HTML</li><li>CSS</li></ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  ul {list-style-type: '>>> ';}
  ul ul {list-style-type: '♥ ';}
  ul ul ul { list-style-type: '㊖ ';}
  ul ul ul ul {list-style-type: '★ ';}
</style>

CSS 教學 - 清單樣式 list-style - list-style-type 自訂標記

list-style-image 清單圖片標記

除了使用標記名稱和自訂標記，也可以運用 list-style-image 樣式屬性，讓「圖片」也可以作為清單標記，這個樣式屬性預設值為 none，具有繼承特性，使用 CSS 的 url() 函式載入影像，由於無法透過 CSS 控制載入的圖片尺寸，因此需要注意如果載入「尺寸過大的圖片」，會造成清單被撐開的狀況，清單標記的圖片類型支援「外部圖片、base64 編碼圖片、SVG 編碼圖片、漸層色」，由於漸層色無法指定大小，會根據瀏覽器的設定填滿固定的小方框下方範例會展示這四種圖片標記效果。

除了 list-style-image，也可以利用虛擬元素 ::marker 設定圖片標記，參考：::marker。

線上展示：https://codepen.io/oxxo/pen/KKjrGeO

<!-- HTML 程式碼 -->
<div>
  <ul class="a">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="b">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="c">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="d">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {
    list-style-image: url(https://cdn-icons-png.freepik.com/16/11694/11694600.png);
  }
  .b {
    list-style-image: url(data:image/png;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMuaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0OCA3OS4xNjQwMzYsIDIwMTkvMDgvMTMtMDE6MDY6NTcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNGQjhBQUY5NjM1OTExRUY5NEVGOEFGRjIzQTQ0QTkxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNGQjhBQUZBNjM1OTExRUY5NEVGOEFGRjIzQTQ0QTkxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0ZCOEFBRjc2MzU5MTFFRjk0RUY4QUZGMjNBNDRBOTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0ZCOEFBRjg2MzU5MTFFRjk0RUY4QUZGMjNBNDRBOTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAcABgDAREAAhEBAxEB/8QAhQABAQEBAAAAAAAAAAAAAAAABwYFCAEBAQEBAQAAAAAAAAAAAAAABgUEAwcQAAAEBAMFBQkAAAAAAAAAAAECAwQREhMFACEGMWEiFBVBgUJyB1GRobEyYiMzNBEAAQEGAwcFAQAAAAAAAAAAAQIAETESAwQhUQVBYXGBIjIT8KHR4UPx/9oADAMBAAIRAxEAPwDpq+3hrZrS5uTmIpNyTSBtMYcilDeYwwxwuK6aSCswDabO1VXqpppipjHRetbpeNdIHujkSorEVI1alGVEhxCJQAvaMoCERzwesL9dW5E5wILhsZhquk06FkRTTiCHnaQy7hOwZhf1D1i4eOrxYlAHl0XSPKiEOGiEFCm8xhiGCmp3xWV0jAKDuUW9A0TS00006w7ikv5waRUYXW2I2+5iUUAdRWYrAOf4jBxbs8w3YlmmumErhNiOTXE1qVYrpxlwUOLL1t9QUnzjTJCmAFroCxHyAeA5CygPeoXh3YUUtTCzSzW944fbBa+immmuTCnLKc3/AFHe0ZqfRzt36jK24DUSXUx3LdcwRLCmJj+45YYlXdipd2UQnxfy+Wv6fqiUWAqRNNySOeHs1rfNKOLt6ftWKrendregQUEgEB/KiWQxAEMoKAHyxWubM1bUJI60jDiPlj9nqSaN8pYL6S1F53HF/JorQWl3aevxbqwOWzGMd0qX6Z5ZSFAfMb4YkadaKF04/nFkOs6gk2Mw/WHDb63sr3npNZhzn9lcOmyftqw4pPtkjPHKG3CavI9M3c/pzf8AyLCbXyuXJ2S9WTt/OG17aC9WipR/bKMmzb2bcsdlPdg2VDnh8Gx9J9D5Jfpc1WsfqNb+jmY8dePij3ezLGWz8cpkz6s37/XBt+peaceWEold2y7Jd3vni3//2Q==);
  }
  .c {
    list-style-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20" viewBox="0 0 34.5 43.8" style="enable-background:new 0 0 34.5 43.8;" xml:space="preserve"><g><path class="st0" style="fill:%23FE5918;" d="M7.8,37.2c0.1,1.9,0.8,3.6,2.1,5c0.1,0.2,0.5,0.3,0.3,0.6C10,43,9.8,42.6,9.6,42.5c-2.9-1.8-5.3-4.1-7-7c-1.4-2.4-2.2-5-2.5-7.7c-0.5-4.6,0.3-8.9,2.4-13c0.1-0.2,0.1-0.5,0.4-0.4c0.2,0,0.2,0.3,0.3,0.5c0.6,2.1,1.7,3.9,3.2,5.4c0.1,0.1,0.1,0.3,0.3,0.3c0.2,0,0.2-0.2,0.2-0.3c0.1-0.6-0.1-1.1-0.3-1.6c-0.2-0.6-0.1-1.1-0.1-1.7c0.1-1.2,0-2.3,0.3-3.4c0.5-2.1,1.4-4,2.5-5.8c2.3-3.6,5.5-5.9,9.4-7.2c0.4-0.1,0.7-0.3,1.1-0.3c0.2,0,0.6-0.1,0.4,0.3c-0.8,1.5-0.6,3.1-0.6,4.7c0,3,1.4,5.6,2.8,8.1c1.5,2.7,3.1,5.3,4.5,8.1c0.5,1,0.7,2.1,1,3.1c0.1,0.3,0.1,0.6,0.3,0.8c2.5-3.3,3.4-7.1,2.8-11.2c0.2-0.1,0.2,0.1,0.2,0.1C33.8,18.5,35,23,34.3,28c-0.7,4.6-2.4,8.7-5.9,12c-1.8,1.7-3.9,3-6.3,3.8c-0.1,0-0.3,0.1-0.4,0c4.6-3.3,5.4-7.8,4.1-12c-0.9,1.5-1.4,3.3-3.1,4.2c-0.1-0.6-0.2-1.2-0.3-1.8c-0.2-1-0.6-2-1.1-2.9c-1.5-2.5-2.8-5-4-7.7c-0.4-0.8-0.5-1.7-0.6-2.7c0-0.2,0-0.4-0.2-0.6c-1.6,1.4-2.8,3-3.4,5.1c-0.9,2.8-0.4,5.5,0.5,8.1c0.2,0.6,0.4,1.3,0.6,2c-1.2-0.4-2.2-1-3-1.8c-0.8-0.9-1.2-1.9-1.6-3.1c-0.9,1.1-1.2,1-1.5,3.7C7.6,37,7.8,37.2,7.8,37.2z"/></g></svg>');
  }
  .d {
    list-style-image: linear-gradient(0deg, red, yellow);
  }
</style>

CSS 教學 - 清單樣式 list-style - list-style-image 清單圖片標記

list-style-position 清單標記位置

list-style-position 樣式屬性可以設定清單標記位置，具有繼承特性，只有 inside 和 outside 兩種屬性值，屬性值說明如下：

屬性值 說明
inside 將標記放在清單內容的開頭，類似成為一部分的內容 ( 但不是真的內容 )。
outside 將標記元素放在清單外部 ( 預設值 )。

線上展示：https://codepen.io/oxxo/pen/XWLyxBd

<!-- HTML 程式碼 -->
<div>
  <ul class="a">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="b">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {list-style-position: outside;}
  .b {list-style-position: inside;}
</style>

CSS 教學 - 清單樣式 list-style - list-style-position 清單標記位置

list-style 清單樣式

list-style 是一個「簡寫」的清單樣式屬性，上述 list-style-type、list-style-image、list-style-position 全都可以使用 list-style 代替，下方範例會將前面幾段的寫法，改成使用 list-style 表現。

線上展示：https://codepen.io/oxxo/pen/oNrQaMe

<!-- HTML 程式碼 -->
<div>
  <ul class="a">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="b">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="c">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>
<div>
  <ul class="d">
    <li>apple</li><li>banana</li><li>oxxo.studio</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {list-style: cjk-heavenly-stem;}
  .b {list-style: url(https://cdn-icons-png.freepik.com/16/11694/11694600.png);}
  .c {list-style: '㍿ ';}
  .d {list-style: inside;}
</style>

CSS 教學 - 清單樣式 list-style - list-style 清單樣式

小結

透過 CSS 設定清單樣式時，最常遇到的就是被清單本身的預設樣式所影響，但只要透過權重進行覆蓋，搭配 list-style 等清單樣式，就能輕鬆處理網頁的清單囉。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

關鍵字與文字數值 長度與角度單位 顏色單位 位置名稱與時間單位

變數與函式

變數 數學計算 文字與清單計數 生成內容與引號 色彩模型 漸層色 影像濾鏡

文字樣式

使用通用字型 使用外部字型 @font-face 定義字型 文字尺寸 常用文字樣式 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 特殊文字樣式

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬度與高度 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 影像邊框 輪廓 ( outline ) 可見性與透明度 內容溢出與裁切

背景與陰影

背景顏色 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 定義計數規則 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 定位 ( position )

Flexbox 彈性排版

Flexbox 彈性盒子