กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

รายการ CSS


รายการที่ไม่เรียงลำดับ:

  • กาแฟ
  • ชา
  • โคก
  • กาแฟ
  • ชา
  • โคก

รายการสั่งซื้อ:

  1. กาแฟ
  2. ชา
  3. โคก
  1. กาแฟ
  2. ชา
  3. โคก

รายการ HTML และคุณสมบัติรายการ CSS

ใน HTML มีรายการหลักสองประเภท:

  • รายการที่ไม่เรียงลำดับ (<ul>) - รายการที่มีเครื่องหมายสัญลักษณ์แสดงหัวข้อย่อย
  • รายการที่สั่งซื้อ (<ol>) - รายการจะถูกทำเครื่องหมายด้วยตัวเลขหรือตัวอักษร

คุณสมบัติรายการ CSS ช่วยให้คุณ:

  • ตั้งเครื่องหมายรายการต่างๆ สำหรับรายการสั่งซื้อ
  • ตั้งเครื่องหมายรายการต่างๆ สำหรับรายการที่ไม่เรียงลำดับ
  • ตั้งค่ารูปภาพเป็นเครื่องหมายรายการ
  • เพิ่มสีพื้นหลังในรายการและรายการ

เครื่องหมายรายการต่างๆ

คุณสมบัติlist-style-typeระบุประเภทของตัวทำเครื่องหมายรายการ

ตัวอย่างต่อไปนี้แสดงเครื่องหมายรายการที่มีอยู่บางส่วน:

ตัวอย่าง

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;
}

หมายเหตุ: ค่าบางค่าสำหรับรายการที่ไม่เรียงลำดับ และค่าบางค่าสำหรับรายการที่เรียงลำดับ



รูปภาพเป็นตัวทำเครื่องหมายรายการสินค้า

คุณสมบัติlist-style-imageระบุรูปภาพเป็นเครื่องหมายรายการ:

ตัวอย่าง

ul {
  list-style-image: url('sqpurple.gif');
}

วางตำแหน่งเครื่องหมายรายการสินค้า

คุณสมบัติlist-style-positionระบุตำแหน่งของเครื่องหมายรายการ (bullet points)

"list-style-position: ภายนอก" หมายความว่าสัญลักษณ์แสดงหัวข้อย่อยจะอยู่นอกรายการ จุดเริ่มต้นของแต่ละบรรทัดของรายการจะถูกจัดตำแหน่งในแนวตั้ง นี่เป็นค่าเริ่มต้น:

  • กาแฟ - เครื่องดื่มชงจากเมล็ดกาแฟคั่ว...
  • ชา
  • โคก

"รายการสไตล์ตำแหน่ง: ภายใน;" หมายความว่าสัญลักษณ์แสดงหัวข้อย่อยจะอยู่ภายในรายการ เนื่องจากเป็นส่วนหนึ่งของรายการ รายการนั้นจะเป็นส่วนหนึ่งของข้อความและกดข้อความในตอนเริ่มต้น:

  • กาแฟ - เครื่องดื่มชงจากเมล็ดกาแฟคั่ว...
  • ชา
  • โคก

ตัวอย่าง

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

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

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

คุณสมบัติlist-style-type:noneนี้ยังสามารถใช้เพื่อลบเครื่องหมาย/สัญลักษณ์แสดงหัวข้อย่อย โปรดทราบว่ารายการยังมีระยะขอบและช่องว่างภายในเริ่มต้น หากต้องการลบสิ่งนี้ ให้เพิ่มmargin:0และpadding:0ใน <ul> หรือ <ol>:

ตัวอย่าง

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

รายการ - ทรัพย์สินชวเลข

list-styleทรัพย์สินเป็นทรัพย์สินชวเลข มันถูกใช้เพื่อตั้งค่าคุณสมบัติรายการทั้งหมดในหนึ่งประกาศ:

ตัวอย่าง

ul {
  list-style: square inside url("sqpurple.gif");
}

เมื่อใช้คุณสมบัติชวเลข ลำดับของค่าคุณสมบัติคือ:

  • list-style-type(หากระบุ list-style-image ค่าของคุณสมบัตินี้จะแสดงขึ้นหากไม่สามารถแสดงภาพได้ด้วยเหตุผลบางประการ)
  • list-style-position(ระบุว่าเครื่องหมายรายการควรปรากฏภายในหรือภายนอกโฟลว์เนื้อหา)
  • list-style-image(ระบุรูปภาพเป็นเครื่องหมายรายการ)

หากไม่มีค่าคุณสมบัติข้างต้น ค่าเริ่มต้นสำหรับคุณสมบัติที่ขาดหายไปจะถูกแทรก หากมี


รายการจัดแต่งทรงผมด้วยสี

นอกจากนี้เรายังสามารถจัดรูปแบบรายการด้วยสีต่างๆ เพื่อให้ดูน่าสนใจขึ้นอีกเล็กน้อย

สิ่งที่เพิ่มลงในแท็ก <ol> หรือ <ul> จะส่งผลต่อรายการทั้งหมด ในขณะที่คุณสมบัติที่เพิ่มลงในแท็ก <li> จะส่งผลต่อแต่ละรายการ:

ตัวอย่าง

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

ผลลัพธ์:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

ตัวอย่างเพิ่มเติม


ตัวอย่างนี้สาธิตวิธีสร้างรายการที่มีขอบซ้ายสีแดง


ตัวอย่างนี้สาธิตวิธีการสร้างรายการที่มีเส้นขอบโดยไม่มีสัญลักษณ์แสดงหัวข้อย่อย


ตัวอย่างนี้สาธิตเครื่องหมายรายการต่างๆ ทั้งหมดใน CSS


ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

ตั้งค่ารูปแบบรายการสำหรับรายการที่ไม่เรียงลำดับเป็น "สี่เหลี่ยมจัตุรัส"

<style>
ul {
  : ;
}
</style>

<body>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>


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

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker