List

Property	Description	Values
list-style-type	ใช้กำหนดลักษณะที่ใช้นำหน้าแต่ละรายการย่อย	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha	disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian georgian cjk-ideographic hiragana hiragana-iroha katakana-iroha
list-style-position	ใช้การกำหนดลักษณะการปัดขึ้นบรรทัดใหม่ของข้อความ กรณีที่มีความยาวเกิน 1 บรรทัด * ถ้าไม่กำหนดจะเป็นแบบ outside	inside outside	จัดให้ตรงแนวกับสัญลักษณ์ จัดให้ตรงแนวกับข้อความแถวแรก
list-style-image	ใช้การกำหนดรูปภาพเพื่อนำมาเป็นสัญลักษณ์รายการย่อย	url	ของรูปภาพ
list-style	สามารถกำหนด property ให้กับ list ได้ในคำสั่งประกาศเดียว	list-style-type list-style-position list-style-image

ตัวอย่าง

Enjoyday.net - Web builder Tutorial
<ul style="list-style-type:square">
<li>HTML</li>
<li>CSS</li>
<li>XHTML</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>

ผลลัพธ์

Enjoyday.net - Web builder Tutorial

• HTML
• CSS
• XHTML
• JavaScript
• SQL

ตัวอย่าง

Enjoyday.net - Web builder Tutorial
<ul>
<li style="list-style-type:circle">HTML</li>
<li style="list-style-type:disc">CSS</li>
<li style="list-style-type:square">XHTML</li>
<li style="list-style-type:decimal">JavaScript</li>
<li style="list-style-type:upper-roman">SQL</li>
</ul>

ผลลัพธฺ์

Enjoyday.net - Web builder Tutorial

• HTML
• CSS
• XHTML
• JavaScript
• SQL

ตัวอย่าง

Enjoyday.net - Web builder Tutorial
<ul style="list-style-image:url(images/list.gif)">
<li>HTML</li>
<li>CSS</li>
<li>XHTML</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>

ลลลัพธ์

Enjoyday.net - Web builder Tutorial

• HTML
• CSS
• XHTML
• JavaScript
• SQL

ตัววอย่าง

ประโยชน์ของ CSS
<ul style="list-style-type:circle; list-style-position:inside">
<li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว</li>
<li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li>
<li>สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li>
</ul>

ผลลัพธ์

ประโยชน์ของ CSS

• การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว
• เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว
• สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร

ตัวอย่าง

ประโยชน์ของ CSS
<ul style="list-style-type:circle; list-style-position:outside">
<li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว</li>
<li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li>
<li>สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li>
</ul>

ผลลัพธ์

ประโยชน์ของ CSS

• การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว
• เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว
• สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร

ตัวอย่าง  กำหนด property ให้กับ list ได้ในคำสั่งประกาศเดียว

ประโยชน์ของ CSS
<ul style="list-style:decimal inside">
<li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว</li>
<li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li>
<li>สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li>
</ul> 

ผลลัพธ์

ประโยชน์ของ CSS

• การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว
• เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว
• สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร