清單樣式 list-style

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

快速導覽：

• 清單元素預設樣式
• list-style-type 清單標記類型
  • 套用巢狀清單
  • 自訂標記
• list-style-image 清單圖片標記
• list-style-position 清單標記位置
• 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

• 符號：disc、circle、square、disclosure-open、disclosure-closed。

  

• 數字：decimal、decimal-leading-zero、lower-roman、upper-roman。

  

• 英文字母：lower-greek、lower-alpha、lower-latin、upper-alpha、upper-latin。

  

• 繁簡中文數字：cjk-decimal、cjk-ideographic、cjk-heavenly-stem、cjk-earthly-branch、trad-chinese-formal、trad-chinese-informal、simp-chinese-informal、simp-chinese-formal。

  

• 日韓數字：korean-hangul-formal、korean-hanja-formal、korean-hanja-informal、japanese-formal、japanese-informal、hiragana、hiragana-iroha、katakana、katakana-iroha。

  

• 其他：devanagari、ethiopic-numeric、lao、lower-armenian、malayalam、mongolian、myanmar、oriya、persian、tamil、kannada、arabic-indic、armenian、bengali、cambodian、khmer、telugu、thai、tibetan、hebrew、georgian、gujarati、gurmukhi、upper-armenian。

  

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>

如果套用了其他的標記樣式，就會按照設定的標記樣式名稱套用，但需要特別注意，由於 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>

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>

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>

list-style-position 清單標記位置

list-style-position 樣式屬性可以設定清單標記位置，具有繼承特性，只有 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>

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 等清單樣式，就能輕鬆處理網頁的清單囉。

意見回饋

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