當我們看到條列式的文字時，首先都會想到使用HTML裡面的<ol>、<ul>來製作

但<ol>、<ul>的預設樣式有時候無法滿足想要花枝招展的心

今天整理了一些怎麼變更清單樣式的方法~

<ul>(unordered lists)--無序清單

HTML 變更

可以設定在<ul>上，繼承給裡面的<li>；也可以放在<li>進行單獨設定

• attribute

  • type="circle"
  • type="disc"
  • type="square"

  <!-- 設定在<ul>上 -->
  <h2>早餐</h2>
  <ul type="circle">
      <li>玉米濃湯</li>
      <li>鮪魚吐司</li>
      <li>薯條</li>
  </ul>
  

  

  <!-- 設定在<li>上 -->
  <h2>早餐</h2>
  <ul>
     <li type="disc">玉米濃湯</li>
     <li type="circle">鮪魚吐司</li>
     <li type="square">薯條</li>
  </ul>
  

  

• 巢狀清單時第一層為disc>第二層為circle>第三層為square

   <li>
       <h2>早餐</h2>
       <ul>
           <li>玉米濃湯</li>
           <li>鮪魚吐司</li>
           <li>薯條
              <ul>
                <li>鹽味</li>
                <li>胡椒鹽</li>
                <li>番茄醬</li>
              </ul>
           </li>
       </ul>
   </li>
  

  

<ol>(ordered lists)--有序清單

HTML 變更

• attribute

  • type
    可以設定在<ol>上，繼承給裡面的<li>；也可以放在<li>進行單獨設定

    • type="1"：這是預設值，代表用阿拉伯數目（1, 2 ,3 ...）字編號。
    • type="A"：大寫英文字母
    • type="a"：小寫英文字母
    • type="I"：大寫羅馬數字（I, II, III, ...）
    • type="i"：小寫羅馬數字（i, ii, iii, ...）

    <!-- 設定在<ol>上 -->
    <h2>早餐</h2>
    <ul type="A">
        <li>玉米濃湯</li>
        <li>鮪魚吐司</li>
        <li>薯條</li>
    </ul>
    

    

    <!-- 設定在<li>上 -->
    <h2>早餐</h2>
    <ul >
        <li type="a">玉米濃湯</li>
        <li type="I">鮪魚吐司</li>
        <li type="i">薯條</li>
    </ul>
    

    

  • star ="數字" 起始數字
  • reversed 順序從高到低

• 巢狀清單時則沒有變化

  <li>
      <h2>早餐</h2>
      <ol>
          <li>玉米濃湯</li>
          <li>鮪魚吐司</li>
          <li>薯條
              <ol>
                <li>鹽味</li>
                <li>胡椒鹽</li>
                <li>番茄醬</li>
              </ol>
          </li>
       </ol>
  </li>
  

  

CSS 變更

哎呀可是用HTML設定好麻煩呀~萬一哪天要改動要一個一個改耶...
透過CSS的方法就可以快速又不動HTML改囉~
而且還可以改得更精緻!

以下舉例只是樣式的冰山一角：

/*最常用的取消樣式*/
list-style-type: none;

list-style-type: disc; 
list-style-type: circle;
list-style-type: square;
list-style-type: "文字";
list-style-type: decimal;

可以設定在<ol>或是<ul>上，繼承給裡面的<li>；也可以放在<li>進行單獨設定

        <h2>早餐</h2>
        <ol >
          <li>玉米濃湯</li>
          <li>鮪魚吐司</li>
          <li>薯條
            <ol>
              <li>鹽味</li>
              <li>胡椒鹽</li>
              <li>番茄醬</li>
            </ol>
          </li>
        </ol>

ol{
  list-style-type: "每天吃飽飽--";
}

ol li{
  list-style-type: "好飽好滿足--"
}

::marker 對樣式增加設定

看到上面範例感覺...離想要的感覺還是差了那麼一大截
想要改字型、改大小、改顏色讓呈現更有層次該怎麼辦?
鏘鏘~請用這個偽元素::marker來改
(::marker只能用在擁有display:list-item屬性的物件上)

@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

li li::marker{
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 20px;
  color:#0f90f2;
}

codepen實作玩玩看

剛剛也有提到<ol>的巢狀清單不像<ul>會根據層數自行變換樣式
這時候就要對子層進行個別的設定，來產生不同的樣式

假如說今天要做成像word一樣

希望它根據大項目序號下去，自動產生出1-1、1-2、1-3、2-1、2-2...該怎麼做呢?

因為::marker是偽元素
它也可以使用content!
那麼就使用計數器讓它自動產生序數吧~~

<ol>
  <li>OOOOO
    <ol>
      <li>XXXXX</li>
      <li>XXXXX</li>
    </ol>
  </li>
  <li>OOOOO
    <ol>
      <li>XXXXX</li>
      <li>XXXXX</li>
      <li>XXXXX</li>
    </ol>
  </li>
  <li>OOOOO
    <ol>
      <li>XXXXX</li>
      <li>XXXXX</li>
      <li>XXXXX</li>
    </ol>
  </li>
  
</ol>

li li::marker{
   content: counters(list-item,"-",list-item)" ";
   font-family: "Comic Sans MS", cursive, sans-serif;
   font-size: 15px;
   font-weight: 700;
   color:#396
}

這樣它就會自己產生數字囉~~
codepen實作