CSS :nth-child() pseudo-class ใช้เลือกองค์ประกอบที่เป็นลูกลำดับที่ n ของพาเรนต์ ไวยากรณ์ (Syntax) :nth-child(/*argument*/) { /* declarations */ } ตัวอย่างที่ 1: จัดสีกล่องตามลำดับ <!DOCTYPE html> <html> <head> <title>CSS :nth-child() Pseudo Class</title> <sty

CSS Pseudo-element คือตัวเลือก (selector) สำหรับส่วนเฉพาะขององค์ประกอบ เช่น ตัวอักษรแรก (::first-letter), บรรทัดแรก (::first-line) และ ::before, ::after สำหรับแทรกเนื้อหาก่อน/หลังองค์ประกอบ ไวยากรณ์ (Syntax) Selector::pseudo-element { css-property: /*value*/; } ตัวอย่างที่ 1: ใช้ ::before และ ::

เราสามารถรวม CSS ในหน้า HTML ได้ 3 วิธี: Inline - ระบุสไตล์ในแอตทริบิวต์ style ขององค์ประกอบ แนะนำให้ใช้ Internal/External เพื่อแยกไฟล์ (modularize) Internal - วางข้อกำหนด CSS ในแท็ก <style> ภายใน <head> External - ลิงก์ไฟล์ .css ด้วยแท็ก <link> ไฟล์อาจอยู่ local หรือ serve

การรวม CSS ใน HTML สามารถทำได้ 3 วิธี ได้แก่ Inline, Internal และ External ไวยากรณ์ (Syntax) /* Inline */ <element style=/*declarations*/></element> /* Internal */ <head> <style> /*declarations*/ </style> </head> /* External */ <head> <link rel=sty

CSS Element Type Selector ใช้เลือกองค์ประกอบทั้งหมดของชนิด (type) ที่ระบุ ไวยากรณ์ (Syntax) element { /* declarations */ } ตัวอย่างที่ 1: ใช้กับ li และ div <!DOCTYPE html> <html> <head> <style> li { list-style: none; margin: 5px; border-bottom-style: dotted;

CSS Descendant Selector ใช้เลือกองค์ประกอบที่เป็นลูกหลาน (descendant) ขององค์ประกอบแรก โดยชื่อองค์ประกอบตรงกับตัวเลือกที่สอง ไวยากรณ์ (Syntax) element element { /* declarations */ } ตัวอย่างที่ 1: นested div หลายชั้น <!DOCTYPE html> <html> <head> <style> div {

คุณสมบัติ outline-width ใช้กำหนดความหนาของเส้นขอบนอก (outline) รอบขอบขององค์ประกอบ แต่ outline ไม่ใช่ส่วนหนึ่งของขนาดองค์ประกอบ ไม่ส่งผลต่อ layout ต่างจาก border ไวยากรณ์ (Syntax) Selector { outline-width: /*value*/; } หมายเหตุ: ต้องกำหนด outline-style ก่อนจึงจะเห็น outline-width ทำงาน ตัวอย่าง

คุณสมบัติ min-width ใน CSS ใช้กำหนดความกว้างขั้นต่ำของกล่องเนื้อหา (content box) ไม่ให้องค์ประกอบแคบลงไปกว่าค่านี้ แม้ความกว้างจริงจะน้อยกว่าก็ตาม ไวยากรณ์ (Syntax) Selector { min-width: /*value*/; } ตัวอย่างที่ 1: กำหนด min-width และเปลี่ยนค่าด้วย JavaScript <!DOCTYPE html> <html> &

หน่วยวัดระยะทางใน CSS แบ่งเป็น 2 ประเภทหลักคือ Absolute Units (หน่วยคงที่) และ Relative Units (หน่วยสัมพัทธ์) Relative Units (หน่วยสัมพัทธ์) กำหนดขนาดโดยอ้างอิงจากองค์ประกอบอื่น เช่น vh อ้างอิงจากความสูงของ viewport ลำดับหน่วย & อ้างอิงจาก 1% - ขนาดของพาเรนต์ 2em - ขนาดฟอ

คุณสมบัติ min-height ใน CSS ใช้กำหนดความสูงขั้นต่ำของกล่องเนื้อหา (content box) ขององค์ประกอบ ไม่ให้กล่องเล็กลงกว่าค่านี้ แม้ความสูงจริงจะน้อยกว่าก็ตาม ไวยากรณ์ (Syntax) Selector { min-height: /*value*/; } ตัวอย่างที่ 1: กำหนด min-height และเปลี่ยนค่าด้วย JavaScript <!DOCTYPE html> <htm

คุณสมบัติ clear ใน CSS ใช้ระบุด้านขององค์ประกอบที่ลอย (floated element) ที่ต้องการให้เนื้อหาไม่ได้ไหลผ่าน ตัวอย่างที่ 1: ใช้ clear:left <!DOCTYPE html> <html> <head> <title>CSS Clear</title> <style type=text/css> .clear { clear: left; } .yellow { back

เราสามารถจัดตำแหน่งองค์ประกอบหรือเนื้อหาภายในได้หลายวิธีด้วย CSS ไม่ว่าจะเป็นแนวนอน แนวตั้ง หรือตรงกลาง การจัดตำแหน่งแนวนอน (Horizontal Alignment) Inline elements - องค์ประกอบ inline หรือ inline-block เช่น ข้อความ ลิงก์ span สามารถจัดแนวนอนได้ด้วย text-align Block-level elements - องค์ประกอบบล

ใน CSS เราสามารถกำหนดตำแหน่งขององค์ประกอบเป็น absolute ซึ่งจะทำให้องค์ประกอบถูกจัดตำแหน่งตามพาเรนต์ตัวแรกที่มีตำแหน่งไม่ใช่ static องค์ประกอบที่ใช้วิธีการจัดตำแหน่งแบบ absolute จะถูกควบคุมโดยคุณสมบัติ CSS Positioning ได้แก่ left, right, top และ bottom ตัวอย่างที่ 1: จัดตำแหน่งข้อความตรงกลางด้วย Abs

คุณสมบัติ float ใน CSS ใช้สำหรับจัดตำแหน่งหรือจัดรูปแบบกล่อง (box) และเนื้อหา ให้นักพัฒนาสามารถจัดวางองค์ประกอบไปทางซ้ายหรือขวาของคอนเทนเนอร์ได้ ค่าของคุณสมบัติ float left - องค์ประกอบลอยไปทางซ้ายของคอนเทนเนอร์ right - องค์ประกอบลอยไปทางขวาของคอนเทนเนอร์ none - องค์ประกอบไม่ลอย (ค่าเริ่มต้น)

CSS :first-child pseudo-class เลือกองค์ประกอบที่เป็นองค์ประกอบลูกคนแรกขององค์ประกอบอื่น ไวยากรณ์ ไวยากรณ์มีดังนี้: :first-child{    /*declarations*/ } ตัวอย่าง ลองดูตัวอย่างของ CSS first-child Pseudo class: <!DOCTYPE html> <html> <head> <style> table {   &nb

เราสามารถกำหนดการจัดตำแหน่งขององค์ประกอบใน CSS เป็น fixed ซึ่งจะเรนเดอร์องค์ประกอบ相对กับ viewport ของผู้ใช้ องค์ประกอบที่มีวิธีการจัดตำแหน่งเป็น fixed จะไม่เคลื่อนที่แม้จะเลื่อนหน้า (scroll) และถูกจัดตำแหน่งโดยคุณสมบัติ CSS Positioning properties (left, right, top และ bottom) ตัวอย่าง ลองดูตัวอย่าง

คุณสมบัติ CSS height และ width ใช้ระบุความสูงและความกว้างขององค์ประกอบตามลำดับ เราสามารถตั้งค่าค่าสูงสุดและต่ำสุดสำหรับคุณสมบัติเหล่านี้ได้โดยใช้ max-height, max-width, min-height, และ min-width properties ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS height และ CSS width property มีดังนี้: Selector {  

คุณสมบัติ CSS margin property ใช้ตั้งค่าพื้นที่ margin รอบองค์ประกอบที่เลือก รอบขอบของมัน คุณสมบัติ margin เป็น shorthand สำหรับ margin-top, margin-right, margin-bottom, และ margin-left ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS margin property มีดังนี้: Selector {    margin: /*value*/ } ตัวอย่า

คุณสมบัติ CSS margin property เป็น shorthand สำหรับ margin-top, margin-right, margin-bottom, และ margin-left มันช่วยให้เราระบุพื้นที่รอบๆ องค์ประกอบได้ เราสามารถตั้งค่า margin สำหรับแต่ละด้านแยกกันได้ด้วย ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS margin property มีดังนี้: Selector {    margin: /

คุณสมบัติ background-attachment ใน CSS ใช้ระบุตำแหน่งของภาพพื้นหลังเมื่อหน้าถูกเลื่อน (scroll) 相对กับ viewport สามารถมีค่าเป็น scroll, fixed และ local ไวยากรณ์ ไวยากรณ์ของคุณสมบัติ CSS background-attachment property มีดังนี้: Selector {    background-attachment: /*value*/ } ตัวอย่าง ตัวอ