เพื่อตั้งค่า Outline ให้เป็น Groove ใช้ outline-style ค่า groove รูปแบบนี้จะทำให้ Outline ดูเหมือนถูกแกะสลักซุ้มเข้าไปในหน้าจอ ตัวอย่าง <html> <head></head> <body> <p style=outline-width:3px; outline-style:groove;> This text is having 3px groove outline.

เพื่อตั้งค่า Outline ให้เป็น Ridge ใช้ outline-style ค่า ridge รูปแบบนี้จะทำให้ Outline ดูเหมือนยื่นขึ้นมาจากหน้าจอ (ตรงข้ามกับ Groove) ตัวอย่าง <html> <head></head> <body> <p style=outline-width:3px; outline-style:ridge;> This text is having 3px ridge outli

เพื่อตั้งค่า Outline ให้เป็นเส้นทึบเดี่ยว ใช้คุณสมบัติ outline-style ค่า solid ตัวอย่าง <html> <head></head> <body> <p style=outline-width:3px; outline-style:solid;> This text is having 3px solid outline. </p> </body> </html>

คุณสมบัติ padding-left ใช้กำหนดระยะห่างภายในด้านซ้ายของ Element รับค่าเป็นความยาวหรือเปอร์เซ็นต์ ตัวอย่าง <html> <head></head> <body> <p style=padding-left: 10px; border:1px solid blue;> This is a paragraph with a specified left padding </p> &l

คุณสมบัติ min-height ใช้กำหนดความสูงต่ำสุดที่ Box สามารถมีได้ ค่าสามารถเป็นตัวเลข, ความยาว, หรือเปอร์เซ็นต์ ตัวอย่าง <html> <head></head> <body> <p style=width:400px; min-height:150px; border:1px solid blue; padding:5px; margin:10px;> This paragraph is 400px

คุณสมบัติ max-width ใช้กำหนดความกว้างสูงสุดที่ Box สามารถมีได้ ค่าสามารถเป็นตัวเลข, ความยาว, หรือเปอร์เซ็นต์ <html> <head></head> <body> <p style=max-width:100px; height:200px; border:1px solid green; padding:5px; margin:10px;> This paragraph is 200px high a

คุณสมบัติ padding-bottom ใช้กำหนดระยะห่างภายในด้านล่างของ Element รับค่าเป็นความยาวหรือเปอร์เซ็นต์ ตัวอย่าง <html> <head></head> <body> <p style=padding-bottom: 20px; border:1px solid red;> This is demo content. </p> <p style=padding-bottom:

คุณสมบัติ padding-top ใช้กำหนดระยะห่างภายในด้านบนของ Element รับค่าเป็นความยาวหรือเปอร์เซ็นต์ ตัวอย่าง <html> <head></head> <body> <p style=padding-top: 15px; border:2px solid orange;> This is demo content. </p> <p style=padding-top: 15%; bo

เพื่อตั้งค่า Outline ให้เป็นเส้นประ ใช้คุณสมบัติ outline-style ค่า dotted ตัวอย่าง <html> <head></head> <body> <p style=outline-width:7px; outline-style:dotted;> This text is having 7px dotted outline. </p> </body> </html> คุณสมบัติที่เ

คุณสมบัติ padding-right ใช้กำหนดระยะห่างภายในด้านขวาของ Element สามารถรับค่าเป็นความยาว (px, em, rem) หรือเปอร์เซ็นต์ (%) ตัวอย่าง <html> <head></head> <body> <p style=padding-right: 20px; border:2px solid blue;> This is demo content. </p> <

คุณสมบัติ cursor ใน CSS ใช้ระบุประเภทของเคอร์เซอร์ที่จะแสดงเมื่อผู้ใช้เลื่อนเมาส์ไปบน Element ตัวอย่าง <html> <head></head> <body> <p>Move the mouse over the words and see the changes in cursor:</p> <div style=cursor:auto>Auto</div> <div

คุณสมบัติ padding ใช้กำหนดระยะห่างภายใน (Padding) 4 ด้านของ Element ได้แก่ ซ้าย, ขวา, บน, ล่าง ตัวอย่าง <html> <head></head> <body> <p style=padding: 25px; border:2px solid orange;> This is a paragraph. </p> <p style=padding:20px 4%; border:

คุณสมบัติ cursor ใน CSS ใช้ระบุรูปแบบของเคอร์เซอร์ที่จะแสดงให้ผู้ใช้เห็น ตารางด้านล่างแสดงค่าที่เป็นไปได้ของ cursor property: ค่า (Value)คำอธิบาย (Description) autoรูปทรงขึ้นอยู่กับบริบท เช่น I-beam บนข้อความ, มือบนลิงก์ crosshairเครื่องหมายไขว้หรือเครื่องหมายบวก defaultลูกศรทั่วไป pointerมือชี้

ใน HTML สามารถจำกัดความยาว Input ได้ง่ายด้วย Attribute maxlength แต่ CSS3 ไม่สามารถจำกัดจำนวนตัวอักษร Input ได้ เนื่องจาก CSS จัดการเรื่อง การนำเสนอ (Presentation) ส่วนการจำกัดความยาวเป็นพฤติกรรม (Behavior) ที่ต้องทำด้วย HTML ตัวอย่างการใช้ maxlength ใน HTML <!DOCTYPE html> <html> <he

Favicon คือไอคอนเล็กๆ ที่แสดงบนแท็บเบราว์เซอร์ ก่อนชื่อหน้าเว็บ โดยทั่วไปจะเป็นโลโก้ขนาดเล็ก ไม่สามารถกำหนดขนาด Favicon ด้วย CSS ได้ มาตรฐานไม่รองรับการตั้งค่าขนาด Favicon ผ่าน CSS ต้องใช้ Attribute แทน: <link rel=icon type=image/png href=https://example.com/favicon-16x16.png sizes=16x16> Attr

คุณสมบัติ position กำหนดวิธีการจัดตำแหน่งของ element (static, relative, absolute, fixed, หรือ sticky) ในตัวอย่างด้านล่าง ไม่ต้องกำหนดความสูงเป็นเปอร์เซ็นต์ และไม่ต้องใช้ jQuery: .mainbody { position: absolute; /* ตั้งตำแหน่งเป็น absolute */ top: 30px; /* ความสูงของ Header = 30px */

ใน CSS3 ยังไม่มี Parent Selector (ตัวเลือกผู้ปกครอง) โดยตรง แต่มีเสนอใน CSS4 โดยใช้เครื่องหมาย $ เช่น ul $li ul.sub { ... } เพื่อเลือก li ที่มี ul.sub อยู่ข้างใน วิธีทางเลือกที่ใช้งานได้ในปัจจุบันคือใช้ jQuery ด้วยโค้ดบรรทัดเดียว: $(ul li:has(ul.sub)).addClass(has_sub); จากนั้นจึงสามารถกำหนดสไตล์ให้

บทนำ คุณสมบัติ height ใน CSS ใช้สำหรับกำหนด **ความสูง** ของรูปภาพ (<img>) หรือองค์ประกอบบล็อกอื่นๆ ค่าที่รองรับ ความยาวคงที่: px, em, rem, vh ฯลฯ เปอร์เซ็นต์ (%): คำนวณจาก **ความสูงของบล็อกบรรจุ (Containing Block)** auto - ความสูงอัตโนมัติตามอัตราส่วนเดิม (Default) ตัวอย่าง <

บทนำ คุณสมบัติ border-collapse ใน CSS ควบคุมการแสดงเส้นขอบ (Border) ของตาราง (<table>) ว่าจะรวมกันเป็นเส้นเดียว (collapse) หรือแยกกัน (separate) ค่าที่เป็นไปได้ collapse - รวมเส้นขอบของ Cell ที่ติดกันเป็นเส้นเดียว (Default ในบราวเซอร์สมัยใหม่หลายตัว) separate - แยกเส้นขอบของแต่ละ Cel

บทนำ คุณสมบัติ padding-left ใน CSS ใช้สำหรับกำหนด **ระยะห่างภายใน (Padding) ด้านซ้าย** ขององค์ประกอบ (Element) ระหว่างขอบ (Border) และเนื้อหา (Content) ค่าที่รองรับ ความยาวคงที่: px, em, rem, pt, cm ฯลฯ เปอร์เซ็นต์ (%): คำนวณจาก **ความกว้างของบล็อกบรรจุ (Containing Block)** inherit - 繼