CSS Lists รายการ

HTML Lists and CSS List Properties คุณสมบัติของรายการ HTML และ CSS รายการ

ใน HTML หลักๆ มี 2 ชนิด เครื่องหมายรายการ

unordered lists (<ul>) - เครื่องหมายรายการที่เป็นสัญลักษณ์
ordered lists (<ol>) - เครื่องหมายรายการที่เป็นลำดับ หมายเลข

CSS รายการมีคุณสมบัติดังนี้

- กำหนดเครื่องหมายรายการเป็นลำดับหมายเลข
- กำหนดเครื่องหมายรายการเป็นสัญลักษณ์
- กำหนดรายการเป็นรูปภาพ
- เพิ่มสีพื้นหลังลำดับรายการ

Different List Item Markers ความแตกต่างของเครื่องหมายรายการ

[list-style-type: …………; ] สามารถระบุชนิดของเครื่องหมายรายการลงไปได้เลย

HTML

<div class="container">
   <p>Example of unordered lists:</p>
      <ul class="a">
         <li>Coffee</li>
         <li>Tea</li>
         <li>Coca Cola</li>
      </ul>
      <ul class="b">
         <li>Coffee</li>
         <li>Tea</li>
         <li>Coca Cola</li>
      </ul>
   <p>Example of ordered lists:</p>
      <ol class="c">
         <li>Coffee</li>
         <li>Tea</li>
         <li>Coca Cola</li>
      </ol>
      <ol class="d">
         <li>Coffee</li>
         <li>Tea</li>
         <li>Coca Cola</li>
      </ol>
</div>

CSS

ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
ol.c {
  list-style-type: upper-roman;
}
ol.d {
  list-style-type: lower-alpha;
}

Different List Item Markers ความแตกต่างของเครื่องหมายรายการ

An Image as The List Item Marker เพิ่มรูปภาพเครื่องหมายรายการ

[list-style-image: ………….. ; ] สามารถระบุรูปภาพให้เป็นสัญลักษณ์รายการ

HTML

<div class="container">
   <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
   </ul>
</div>

CSS

ul {
     list-style-image: url('https://img.icons8.com/bubbles/2x/list.png');
}

An Image as The List Item Marker : เพิ่มรูปภาพเป็นสัญลักษณ์รายการ

Position The List Item Markers ตำแหน่งเครื่องหมายรายการ

[list-style-position: ………….;] สามาถระบุตำแหน่งเครื่องหมายรายการ (bullet points : เครื่องหมายหัวข้อ) inside และ outside

“list-style-position: outside;” เครื่องหมายรายการอยู่นอกกรอบ

HTML

<div class="container">
   <h2>list-style-position: outside (default):</h2>
   <ul class="a">
      <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
      <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
      <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
   </ul>
</div>

CSS

ul.a {
     list-style-position: outside;
}

list-style-position: outside;” เครื่องหมายรายการอยู่นอกกรอบ

“list-style-position: inside;” เครื่องหมายรายการอยู่ข้างในกรอบ

HTML

<div class="container">
   <ul class="b">
      <h2>list-style-position: inside:</h2>
      <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
      <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
      <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
   </ul>
</div>

CSS

ul.b {
     list-style-position: inside;
}

list-style-position: inside;

Remove Default Settings ลบการตั้งค่าเริ่มต้น

[list-style-type:none;] สามารถใช้เพื่อลบเครื่องหมาย รายการ มี Margin และ Pading เพื่อลบ list-style-type: ……..; และเพิ่ม margin:

HTML

<div class="container">
   <p>Default list:</p>
   <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    <p>Remove bullets, margin and padding:</p>
    <ul class="demo">
       <li>Coffee</li>
       <li>Tea</li>
       <li>Coca Cola</li>
    </ul>
</div>

CSS

ul.demo {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

Remove Default Settings ลบการตั้งค่าเริ่มต้น

List — Shorthand property

[list-style: ………..; ] ใช้เพื่อกำหนดรายการทั้งหมดในครั้งเดียว และค่าที่ประกาศรายการได้จะมีดังนี้

list-style-type //ชนิดของเครื่องหมายรายการ
list-style-position //ตำแหน่งของเครื่องหมายรายการ inside และ outside
list-style-image //รูปภาพสัญลักษณ์เครื่องหมายรายการ

HTML

<div class="container">
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</div>

CSS

ul {
//กำหนด Style , Position , Image
     list-style: square inside url("https://img.icons8.com/bubbles/2x/list.png");
}

List — Shorthand property

Styling List With Colors การออกแบบรายการกับสี

เราสามารถ การออกแบบรายการกับสี เพื่อให้ดูน่าสนใจยิ่งขึ้น โดยการใช้สี background เข้ามาช่วย

HTML

<div class="container">
   <h1>Styling Lists With Colors:</h1>
   <ol>  //เครื่องหมายรายการเป็นลำดับหมายเลข
      <li>Coffee</li>  //บรรทัดแรก
      <li>Tea</li>     //บรรทัดสอง
      <li>Coca Cola</li>    //บรรทัดสาม
   </ol>
   <ul>  //เครื่องหมายรายการเป็นสัญลักษณ์
      <li>Coffee</li>    //บรรทัดแรก
      <li>Tea</li>       //บรรทัดสอง
      <li>Coca Cola</li>   //บรรทัดสาม
   </ul>
</div>

CSS

ol {
   background: #ee6969;   //สีพื้นหลัง ของรายการที่เป็นหมายเลข
   padding: 20px;     //กำหนดพื้นที่ของตัวเองทั้งหมด
}
ul {
   background: #1e8bf8; //สีพื้นหลัง ของรายการที่เป็นสัญลักษณ์
   padding: 20px;   //กำหนดพื้นที่ของตัวเองทั้งหมด
}
ol li {
   background: #ffe5e5;  //สีพื้นหลังของแต่ละบรรทัด
   padding: 2px;  //กำหนดพื้ที่ให้มีความกว้างขึ้น ระยะห่างระหว่างบรรทัด
   margin-left: 50px;   //กำหนดขอบด้านซ้าย ผลัก Padding เข้าไป
}
ul li {
   background: #cce5ff;  //สีพื้นหลังของแต่ละบรรทัด
   margin: 5px;   //กำหนดขอบด้านซ้าย ผลัก Padding เข้าไป
}

Styling List With Colors การออกแบบรายการกับสี

เรื่องของ CSS lists ก็จะประมาณนี้ ยังติดตรงที่จะให้รายการที่เป็นรูปภาพ คืออยากจะให้รูปภาพมีขนาดเล็กลง เดี๋ยวหาวิธีกก่อน บ๊ายยยย ไว้มาเจอกันในเรื่อง Tables ต่อ