คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 13

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
 

Example
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>
Output
Enjoyday.net - Web builder Tutorial
  • HTML
  • CSS
  • XHTML
  • JavaScript
  • SQL
Example
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>
Output
Enjoyday.net - Web builder Tutorial
  • HTML
  • CSS
  • XHTML
  • JavaScript
  • SQL
Example
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>
Output
Enjoyday.net - Web builder Tutorial
  • HTML
  • CSS
  • XHTML
  • JavaScript
  • SQL
Example
ประโยชน์ของ 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>
Output
ประโยชน์ของ CSS
  • การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว
  • เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว
  • สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร
Example
ประโยชน์ของ 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>

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

« Chapter 12
Chapter 14 »