คุณสมบัติ list-style-position ใน CSS ใช้สำหรับตั้งค่าตำแหน่งเครื่องหมายของรายการ ค่าเริ่มต้นคือ outside ซึ่งตั้งค่าเครื่องหมายไว้นอกรายการ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS list-style-position ดังนี้: Selector {    list-style-position: /*value*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CS

คุณสมบัติ list-style-image ใน CSS ใช้สำหรับตั้งค่ารูปภาพเป็นเครื่องหมายสำหรับรายการ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS list-style-image ดังนี้: Selector {    list-style-image: /*value*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS list-style-image: <!DOCTYPE html> <html> <he

เพื่อแสดงเครื่องหมายรูปภาพให้ถูกต้องในทุกเบราว์เซอร์ จำเป็นต้องมีโซลูชันข้ามเบราว์เซอร์ การจัดตำแหน่งข้อความหลังเครื่องหมายรูปภาพบางครั้งบิดเบี้ยว เพื่อให้ได้ผลลัพธ์ที่สม่ำเสมอ เราจะระบุรูปภาพที่ใช้เป็นเครื่องหมายเป็นพื้นหลังและจัดตำแหน่งให้เหมาะสม ตัวอย่าง ตัวอย่างต่อไปนี้แสดงการจัดรูปแบบรายการ: &

ตัวเลือก * ใน CSS เป็นตัวเลือกสากล (universal selector) ซึ่งใช้เลือกองค์ประกอบทั้งหมดของ HTML DOM ไวยากรณ์ ไวยากรณ์สำหรับตัวเลือกสากล CSS ดังนี้: * {    /*declarations*/ } ตัวอย่างต่อไปนี้แสดงตัวเลือกสากล CSS: ตัวอย่าง <!DOCTYPE html> <html> <head> <style> * { &nbs

CSS ช่วยให้เราจัดรูปแบบรายการได้โดยการระบุพื้นหลัง คุณสมบัติ list-style การจัดรูปแบบแบบอักษร ฯลฯ คุณสมบัติ list-style เป็นคุณสมบัติแบบย่อสำหรับระบุ list-style-type, list-style-image และ list-style-position ในลำดับเดียวกัน ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS list-style ดังนี้: Selector {    

คุณสมบัติ list-style ใน CSS ใช้สำหรับระบุ list-style-type, list-style-position และ list-style-image สำหรับองค์ประกอบ ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS list-style ดังนี้: Selector {    list-style: /*value*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แสดงการจัดรูปแบบรายการ: <!DOCTYPE html> <html&g

ในการเพิ่มรูปภาพขอบใน CSS3 ให้ใช้คุณสมบัติ border-image ซึ่งเป็นคุณสมบัติแบบย่อสำหรับคุณสมบัติต่อไปนี้: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat ค่าสามารถกำหนดได้ดังนี้: border-image: source slice width outset repeat|initial|inherit; ตัวอย่าง

CSS3 รองรับการกำหนดสีหลายรูปแบบ: RGB, RGBA, HSL, HSLA, Hex, Named Colors 1. RGBA (Red, Green, Blue, Alpha) Alpha = ความทึบแสง 0.0 (โปร่งใส) - 1.0 (ทึบแสงเต็มที่) ตัวอย่าง RGBA ค่า Alpha ต่างกัน <!DOCTYPE html> <html> <head> <style> #demo1 {background-color:rgba(108,111,35,

หน่วยความยาวแบบสัมพัทธ์ (Relative Length Units) ระบุขนาดเทียบกับขนาดอื่นๆ เช่น ขนาดฟอนต์, viewport, parent element ตารางหน่วยความยาวแบบสัมพัทธ์ ลำดับหน่วยคำอธิบาย 1emเทียบกับ font-size ของ element นั้นๆ (4em = 4x font-size ปัจจุบัน) 2exเทียบกับ x-height ของฟอนต์ปัจจุบัน (ความสูงตัว x) 3chเทียบ

คุณสมบัติพื้นหลังหลัก 2 ตัวคือ background-position (ตำแหน่งเริ่มต้น) และ background-repeat (การทำซ้ำ) 1. background-position กำหนดตำแหน่งเริ่มต้นของ background image ค่าที่ใช้ได้: Keyword: top, bottom, left, right, center Percentage: 50% 50% (center) Length: 20px 30px (จาก top-left) ผสม: right 20

CSS Child Selector (>) ใช้เลือก element ที่เป็น **ลูกโดยตรง (direct children)** ของ parent element เท่านั้น ไม่รวมหลาน (grandchildren) หรือระดับลึกกว่า Syntax parent > child { /* declarations */ } P <!DOCTYPE html> <html> <head> <style> * {    padding: 5px

คุณสมบัติ padding เป็น shorthand สำหรับกำหนด padding-top, padding-right, padding-bottom, padding-left พร้อมกัน รูปแบบค่า (1-4 ค่า) /* 1 ค่า */ padding: 10px; /* ทุกด้าน */ /* 2 ค่า */ padding: 10px 5px; /* top/bottom, left/right */ /* 3 ค่า */ padding: 10px 5px 7px; /* top, left/right

คุณสมบัติ border ใน CSS ใช้กำหนดและจัดสไตล์เส้นขอบของ element เป็น shorthand ของ border-width, border-style, border-color รองรับรูปภาพเป็นขอบผ่าน border-image ด้วย Syntax Selector { border: <width> <style> <color>; } ตัวอย่างที่ 1: Border Image (รูปภาพเป็นขอบ) <!DOCTYPE html&

คุณสมบัติ border เป็น shorthand รวม border-width, border-style, border-color สามารถจัดสไตล์แต่ละด้านแยกได้ด้วย border-top, border-right, border-bottom, border-left Syntax Selector { border: <width> <style> <color>; } ตัวอย่างที่ 1: Border รูปทรงกลม พร้อมขอบด้านข้างต่างกัน <!D

คุณสมบัติ border-width กำหนดความกว้างของเส้นขอบ element สามารถกำหนดแต่ละด้านแยกได้ด้วย border-top-width, border-right-width, border-bottom-width, border-left-width Syntax Selector { border-width: <value> } ตัวอย่างที่ 1: ความกว้างต่างๆ และมุมโค้ง <!DOCTYPE html> <html> <head&

คุณสมบัติ background เป็น shorthand รวมคุณสมบัติพื้นหลังทั้งหมด: background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin, background-attachment Syntax Selector { background: <color> <image> <position> <size

คุณสมบัติ display: inline ทำให้ element แสดงในบรรทัดเดียวกัน (ไม่ขึ้นบรรทัดใหม่) และใช้ความกว้าง/สูงเพียงพอต่อเนื้อหา ไม่สามารถกำหนด width/height ได้ ตัวอย่างที่ 1: span แบบ inline <!DOCTYPE html> <html> <head> <style> span {    background-color: orange;   &n

ใช้ display: none เพื่อซ่อน element อย่างสมบูรณ์ - ไม่แสดง ไม่ครองพื้นที่ และไม่เข้าถึงได้ ตัวอย่างที่ 1: ซ่อน paragraph <!DOCTYPE html> <html> <head> <style> span {    background-color: orange;    color: white; } p.demo {    display: none; } s

คุณสมบัติ display ใน CSS ใช้ควบคุมการแสดงผลและลักษณะการวางของ element บนหน้าเว็บ ค่าหลักของ Display Property ลำดับค่าคำอธิบาย 1inlineแสดงเป็น inline element (ไม่ขึ้นบรรทัดใหม่, ไม่กำหนด width/height ได้) 2blockแสดงเป็น block element (ขึ้นบรรทัดใหม่, กำหนด width/height ได้) 3contentsทำให้ conta

ใช้คุณสมบัติ border เพื่อเพิ่มเส้นขอบให้ตาราง (table) และเซลล์ (th, td) ตัวอย่างที่ 1: เส้นขอบรวม <!DOCTYPE html> <html> <head> <style> table, th, td {    border: 2px dashed orange; } </style> </head> <body> <h2>Team Ranking Table</h2>