คุณสมบัติ CSS Display ใช้สำหรับกำหนดว่าองค์ประกอบจะแสดงบนหน้าเว็บอย่างไร ค่าหลักๆ มีดังนี้: ลำดับค่า Propertyคำอธิบาย 1inlineแสดงเป็นองค์ประกอบ inline 2blockแสดงเป็นองค์ประกอบ block 3contentsทำให้คอนเทนเนอร์หายไป ลูกเป็นลูกของระดับบน 4flexแสดงเป็น block-level flex cont

องค์ประกอบที่ตั้งค่า display: inline-block จะแสดงเป็น inline-level block container หมายถึง อยู่ในบรรทัดเดียวกันแต่ตั้งค่าความกว้าง สูง padding margin ได้เหมือน block ตัวอย่างที่ 1: แสดงวันที่ในบรรทัดเดียวกับข้อความ <!DOCTYPE html> <html> <head> <style> p {    backg

เพื่อรวมขอบตาราง ให้ใช้คุณสมบัติ border-collapse ใน CSS มาดูตัวอย่างกัน: ตัวอย่างที่ 1: รวมขอบพร้อมสไตล์ขอบ dashed <!DOCTYPE html> <html> <head> <style> table {    border-collapse: collapse;    background-color: black;    color: white; } th, td

ฟังก์ชัน skew() ใช้สำหรับเงียงองค์ประกอบในพื้นที่ 2 มิติ กำหนดจำนวนองศาการเงียงเป็นพารามิเตอร์ของฟังก์ชัน skew() ตัวอย่างที่ 1: เงียง 45 องศาแกน X <!DOCTYPE html> <html> <head> <style> .translate_img {    transform: translate(50px, 10%); } .skew_img {    

สำหรับการตั้งค่าคุณสมบัติ font-size ใน CSS สามารถใช้หน่วยพิกเซล (px) ได้ ซึ่งมีประโยชน์เมื่อต้องการความแม่นยำระดับพิกเซลสำหรับข้อความ ตัวอย่างที่ 1: ใช้ขนาดฟอนต์ต่างๆ พร้อมพื้นหลัง HSLA <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8)

เพื่อควบคุมเลย์เอาต์ตาราง ให้ใช้คุณสมบัติ table-layout สามารถตั้งค่าได้ดังนี้: table-layout: auto | fixed | initial | inherit; ตัวอย่าง: ใช้ค่า auto (ค่าเริ่มต้น) เมื่อใช้ auto ความกว้างคอลัมน์จะปรับตามเนื้อหา <!DOCTYPE html> <html> <head> <style> table {    border

ฟังก์ชัน rgb() ใช้สำหรับกำหนดค่าสี RGB พารามิเตอร์ของฟังก์ชันตั้งค่าความเข้มของสีเป็นเปอร์เซ็นต์หรือค่าตั้งแต่ 0 ถึง 255 ตัวอย่างที่ 1: ใช้ค่า 0-255 <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;   &n

เพื่อตั้งค่าคอนทราสต์ของภาพใน CSS ให้ใช้ filter: contrast(%) จำไว้ว่า: ค่า 0% ทำให้ภาพสีดำทั้งหมด ค่า 100% เป็นภาพต้นฉบับ (ค่าเริ่มต้น) ค่า มากกว่า 100% จะทำให้ภาพมีคอนทราสต์มากขึ้น ตัวอย่าง <!DOCTYPE html> <html> <head> <style> img.demo {    filter: bright

เพื่อเพิ่มเงาให้ภาพใน CSS3 ให้ใช้ค่า drop-shadow สำหรับคุณสมบัติ filter มีค่าต่อไปนี้: h-shadow - ระบุค่าพิกเซลสำหรับเงาแนวนอน v-shadow - ระบุค่าพิกเซลสำหรับเงาแนวตั้ง ค่าติดลบจะวางเงาเหนือภาพ blur - เพิ่มเอฟเฟกต์เบลอให้เงา spread - ค่าบวกทำให้เงาขยาย ค่าลบทำให้เงายุบ color - เพิ่มสีให้เ

คุณสมบัติ text-justify ใน CSS ใช้สำหรับกำหนดวิธีการจัดข้อความให้กว้างเต็ม (justification) เมื่อคุณสมบัติ text-align ถูกตั้งค่าเป็น justify ค่าที่ใช้ได้มีดังนี้: text-justify: auto | inter-word | inter-character | none | initial | inherit; ตัวอย่าง: ใช้ inter-word <!DOCTYPE html> <html>

คุณสมบัติ scroll-behavior ใช้กำหนดพฤติกรรมการเลื่อนหน้าจอ (scrolling) ให้ตั้งค่าค่าต่างๆ ได้ดังนี้: scroll-behavior: auto | smooth | initial | inherit; ตัวอย่าง: Smooth Scrolling ตัวอย่างการใช้งาน scroll-behavior เพื่อให้การเลื่อนหน้าจอเป็นแบบนุ่มนวล (smooth) <!DOCTYPE html> <html> <

ฟังก์ชัน scale3d() ใช้สำหรับปรับขนาดองค์ประกอบในพื้นที่ 3 มิติ โดยองค์ประกอบจะถูกปรับขนาดตามตัวเลขที่กำหนดเป็นพารามิเตอร์ ตัวอย่าง: การปรับขนาด 3D <!DOCTYPE html> <html> <head> <style> .scale3d_img {    transform: scale3d(0.5, 1, 1.7); } </style> </head>

สำหรับการจัดตำแหน่งองค์ประกอบ CSS มีวิธีการจัดตำแหน่งดังต่อไปนี้: 1. Relative Positioning (ตำแหน่งสัมพัทธ์) เมื่อใช้ตำแหน่งสัมพัทธ์ องค์ประกอบจะถูกจัดตำแหน่งสัมพันธ์กับตำแหน่งปกติของมัน ใช้ position: relative ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div.demo {  

สำหรับการแปลงข้อความใน CSS ให้ใช้คุณสมบัติ text-transform พร้อมกับค่าต่อไปนี้: text-transform: none | capitalize | uppercase | lowercase | initial | inherit; ตัวอย่าง: แปลงเป็นตัวพิมพ์ใหญ่ทั้งหมด (uppercase) <!DOCTYPE html> <html> <head> <style> div {    line-heigh

ฟังก์ชัน matrix3d() ใน CSS ใช้กำหนดเมทริกซ์การแปลง 4x4 แบบ homogeneous สำหรับการแปลง 3D (3D transformation matrix) ตัวอย่างที่ 1 <!DOCTYPE html> <html> <head> <style> .demo_img {    transform: matrix3d(1,1,0,0,0,1,0,0,0,0,1,0,1,100,0,1); } </style> </head

ฟังก์ชัน rgba() กำหนดค่าสี RGBA: Red, Green, Blue และ Alpha (ความทึบแสง) Alpha = 0.0 (โปร่งใส) ถึง 1.0 (ทึบแสงเต็มที่) ตัวอย่างที่ 1: แสดงความทึบแสงต่างๆ <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hs

ใช้คุณสมบัติ letter-spacing เพื่อกำหนดระยะห่างระหว่างตัวอักษร (character spacing) ค่าที่ใช้ได้ letter-spacing: normal | length | initial | inherit; normal - ระยะห่างปกติของฟอนต์ (ค่าเริ่มต้น) length - ระยะห่างที่กำหนดเอง (px, em, rem, cm, ฯลฯ) ใช้ค่าลบได้ initial - คืนค่าเริ่มต้น inherit - สืบทอ

Filter functions ใช้สร้างเอฟเฟกต์ภาพ เช่น ปรับคอนทราสต์ ความสว่าง หมุนสี ความทึบแสง บนรูปภาพหรือ element 1. Contrast (คอนทราสต์) ใช้ filter: contrast(%)100% = คอนทราสต์สูงกว่าเดิม ตัวอย่าง Contrast <!DOCTYPE html> <html> <head> <style> img.demo {    filter: brigh

ใช้คุณสมบัติ color ใน CSS เพื่อกำหนดสีข้อความ สามารถระบุสีได้หลายรูปแบบ: ชื่อสี, ค่า Hex, RGB, HSL, HSLA, RGBA ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <style> span {    background-color: orange;    color: white; } p.demo {    display: none;

คุณสมบัติ writing-mode ใช้กำหนดทิศทางการไหลของข้อความ ว่าจะวางแนวนอน (horizontal) หรือแนวตั้ง (vertical) ค่าที่ใช้ได้ writing-mode: horizontal-tb | vertical-rl | vertical-lr; horizontal-tb - แนวนอน บนลงล่าง (ค่าเริ่มต้น, ภาษาอังกฤษ/ไทย) vertical-rl - แนวตั้ง ขวาไปซ้าย (ภาษาญี่ปุ่น/จีนแบบดั้งเดิม