CSS คือ คำสั่งที่ใช้ในการจัดรูปแบบการแสดงผลของ คำสั่ง html ซึ่งสามารถใช้ในการกำหนดขนาดของข้อความ สีของข้อความ ตำแหน่งของข้อความ สีของพื้นหลัง เป็นต้น ซึ่ง CSS จะประกอบด้วยคำสั่งต่างมากกมาย และบทความนี้ จะใช้คำสั่ง CSS ในการที่จะให้ รูปภาพแสดงใน Tag List ซึ่งเป็น html tag นั่นเอง
Tag List ซึ่งเป็น html tag ซึ่งใช้ในการจัดรูปแบบการแสดงผลแบบรายการ ซึ่งสามารถใช้คำสั่ง เพื่อให้แสดงตัวเลขลำดับรายการ หรือไม่ให้แสดงก็สามารถทำได้ ซึ่งการใช้ CSS ที่ใช้ในการนำรูปภาพมาแสดงที่ tag list ทำได้ ดังนี้
คำสั่งที่ใช้
โค้ด: เลือกทั้งหมด
ul {
list-style-image: url(' รูปภาพที่ใช้ ');
}
โค้ด: เลือกทั้งหมด
.new-list ul {
list-style-image: url('../icon/new.png');
}
.update-list ul {
list-style-image: url('../icon/update.png');
}
.bug-list ul {
list-style-image: url('../icon/bug.png');
}
โค้ด: เลือกทั้งหมด
<div class="changelog-content"><div class="new-list"><h4 class="changelog-type changelog-type-new">New</h4>
<ul>
<li>ข้อความบอกการเพิ่ม</li>
<li>ข้อความบอกการเพิ่ม</li>
</ul>
</div><div class="update-list"><h4 class="changelog-type changelog-type-update">Update</h4>
<ul>
<li>ข้อความบอกการอัพเดท</li>
<li>ข้อความบอกการอัพเดท</li>
</ul>
</div><div class="bug-list"><h4 class="changelog-type changelog-type-fix">Bug fix</h4>
<ul>
<li>ข้อความบอกการแก้ไข</li>
<li>ข้อความบอกการแก้ไข</li>
</ul>
</div></div>
ผลลัพธ์ที่ได้