คุณสมบัติ CSS Display ใช้เพื่อกำหนดวิธีการแสดงองค์ประกอบบนหน้าเว็บ ค่าบางส่วนจะแสดงที่นี่ - ซีเนียร์ มูลค่าทรัพย์สิน คำอธิบาย 1 อินไลน์ แสดงองค์ประกอบเป็นองค์ประกอบแบบอินไลน์ 2 บล็อค แสดงองค์ประกอบเป็นองค์ประกอบบล็อก 3 เนื้อหา ทำให้คอนเทนเนอร์หายไป ทำให้องค์ประกอบลูกขององค์ประกอบนั้นสูงขึ้นไปอีก
ชุดองค์ประกอบพร้อมการแสดงค่าคุณสมบัติบล็อกอินไลน์ใช้เพื่อแสดงองค์ประกอบเป็นคอนเทนเนอร์บล็อกระดับอินไลน์ ตัวอย่าง ให้เราดูตัวอย่างการใช้ค่าคุณสมบัติบล็อกอินไลน์ใน CSS - <!DOCTYPE html> <html> <head> <style> p { background-color: orange; color: white;
หากต้องการยุบเส้นขอบตาราง ให้ใช้คุณสมบัติ border-collapse ใน CSS เรามาดูตัวอย่างการยุบขอบตารางกัน − ตัวอย่าง <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; background-color: black; color: white; } th, td {
ฟังก์ชัน skew() ใช้เพื่อเอียงองค์ประกอบในตำแหน่ง 2 มิติ กำหนดจำนวนการเอียงที่จะใช้เป็นพารามิเตอร์ของฟังก์ชัน skew() ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .translate_img { transform: translate(50px, 10%); } .skew_img { transform-origin: top l
ในการตั้งค่าคุณสมบัติขนาดฟอนต์ใน CSS คุณสามารถใช้พิกเซล (px) ได้เช่นกัน สิ่งนี้มีประโยชน์เมื่อคุณต้องการความแม่นยำของพิกเซลสำหรับข้อความ ตัวอย่าง เรามาดูตัวอย่างการกำหนดขนาดตัวอักษรด้วยพิกเซล − <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 5
ในการควบคุมเค้าโครงตาราง ให้ใช้คุณสมบัติ table-layout คุณสามารถตั้งค่าเลย์เอาต์เป็น − table-layout: auto|fixed|initial|inherit; ตัวอย่าง ให้เราดูตัวอย่างเพื่อควบคุมการจัดวางตารางด้วยค่าอัตโนมัติ - <!DOCTYPE html> <html> <head> <style> table { border-collapse: co
ฟังก์ชัน rgb() ใช้สำหรับตั้งค่าสี RGB พารามิเตอร์สำหรับฟังก์ชันกำหนดความเข้มของสีเป็นเปอร์เซ็นต์หรือค่าตั้งแต่ 0 ถึง 255 ตัวอย่าง มาดูตัวอย่างการใช้งาน rgb() ใน CSS กันก่อน − <!DOCTYPE html> <html> <head> <style> div { text-align: justify; text-just
ในการตั้งค่าคอนทราสต์ของรูปภาพใน CSS ให้ใช้ฟิลเตอร์คอนทราสต์ (%) โปรดจำไว้ว่า ค่า 0 ทำให้รูปภาพเป็นสีดำ 100% สำหรับรูปภาพต้นฉบับและค่าเริ่มต้น พักผ่อน คุณสามารถตั้งค่าใดก็ได้ตามต้องการ แต่ค่าที่สูงกว่า 100% จะทำให้ภาพมีความเปรียบต่างมากขึ้น ตัวอย่าง เรามาดูตัวอย่างการปรับคอนทราสต์ของภาพด้วย CSS3 กั
ในการเพิ่มเงาให้กับรูปภาพใน CSS3 ให้ใช้ค่า drop-shadow สำหรับคุณสมบัติตัวกรอง มีค่าดังต่อไปนี้ - h-เงา – เพื่อระบุค่าพิกเซลสำหรับเงาแนวนอน v-shadow – เพื่อระบุค่าพิกเซลสำหรับเงาแนวตั้ง ค่าลบจะทำให้เงาอยู่เหนือภาพ เบลอ – เพื่อเพิ่มเอฟเฟกต์เบลอให้กับเงา กระจาย - ค่าบวกทำให้เงาขยายตัวและค่าลบหดตัว
คุณสมบัติ text-justify ใน CSS ใช้เพื่อตั้งค่าวิธีการจัดข้อความเมื่อตั้งค่าคุณสมบัติ text-align เป็นค่า justify ต่อไปนี้เป็นค่าคุณสมบัติ - text-justify: auto|inter-word|inter-character|none|initial|inherit; ตัวอย่าง ให้เรามาดูตัวอย่างการใช้คุณสมบัติ text-justify ใน CSS − <!DOCTYPE html> <ht
คุณสมบัติ scroll-behavior ใช้เพื่อกำหนดลักษณะการทำงานของ scroll เราสามารถตั้งค่าคุณสมบัติที่แตกต่างกันดังต่อไปนี้สำหรับคุณสมบัติการเลื่อน - scroll-behavior: auto|smooth|initial|inherit; ตัวอย่าง ให้เรามาดูตัวอย่างการใช้งานคุณสมบัติพฤติกรรมการเลื่อน - <!DOCTYPE html> <html> <head>
ฟังก์ชัน scale3d() ใช้เพื่อปรับขนาดองค์ประกอบในพื้นที่ 3 มิติ องค์ประกอบถูกปรับขนาดตามตัวเลขที่กำหนดเป็นพารามิเตอร์ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .scale3d_img { transform: scale3d(0.5, 1, 1.7); } </style> </head> <body> <h1&g
สำหรับองค์ประกอบการจัดตำแหน่ง CSS มีวิธีการกำหนดตำแหน่งดังต่อไปนี้ - การวางตำแหน่งสัมพัทธ์ใน CSS ด้วยการวางตำแหน่งสัมพัทธ์ องค์ประกอบจะอยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งปกติ สำหรับสิ่งนี้ ให้ใช้ตำแหน่ง:สัมพันธ์ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div.demo {
สำหรับการแปลงข้อความใน CSS ให้ใช้คุณสมบัติการแปลงข้อความด้วยค่าต่อไปนี้ - text-transform: none|capitalize|uppercase|lowercase|initial|inherit; ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div { line-height: 1.9; text-transform: uppercase; } </st
ฟังก์ชัน matrix3d() ใน CSS ใช้เพื่อกำหนดเมทริกซ์การแปลง 3 มิติที่เป็นเนื้อเดียวกัน 4x4 ตัวอย่าง <!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> <body> <h1>Learn&l
rgba() กำหนดค่าสี RGBA สำหรับสีแดง สีเขียว สีน้ำเงิน และอัลฟ่า อัลฟ่าคือความทึบของสี เช่น ตัวเลขระหว่าง 0.0 ถึง 1.0 ที่นี่ 1.0 จะเป็นแบบเต็มทึบ ตัวอย่าง ให้เรามาดูตัวอย่างการใช้งานฟังก์ชัน rgba() - <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100
หากต้องการกำหนดช่องว่างระหว่างตัวอักษร เช่น อักขระ ให้ใช้คุณสมบัติการเว้นวรรคตัวอักษร ต่อไปนี้เป็นค่าคุณสมบัติ - letter-spacing: normal|length|initial|inherit; ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p.demo1 { letter-spacing: 1px; } p.demo2 {
ฟังก์ชันตัวกรองใช้เพื่อตั้งค่าเอฟเฟ็กต์ภาพบนองค์ประกอบต่างๆ เช่น คอนทราสต์ ความสว่าง การหมุนสี ความทึบ บนภาพ ฯลฯ ตอนนี้ให้เราดูฟังก์ชันตัวกรองบางอย่าง - คอนทราสต์ ในการตั้งค่าคอนทราสต์ของรูปภาพใน CSS ให้ใช้ฟิลเตอร์คอนทราสต์ (%) โปรดจำไว้ว่า ค่า 0 ทำให้รูปภาพเป็นสีดำ 100% สำหรับรูปภาพต้นฉบับและค่าเร
หากต้องการกำหนดสีข้อความ ให้ใช้คุณสมบัติสีใน CSS คุณสามารถตั้งค่าสีด้วยชื่อสี ค่าฐานสิบหก ค่า RGB หรือใช้ค่า HSL ตัวอย่าง <!DOCTYPE html> <html> <head> <style> span { background-color: orange; color: white; } p.demo { display: none; } sp
คุณสมบัติโหมดการเขียนใช้เพื่อกำหนดว่าจะวางบรรทัดข้อความในแนวนอนหรือแนวตั้ง ค่าคุณสมบัติคือ − writing-mode: horizontal-tb|vertical-rl|vertical-lr; ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p { writing-mode: vertical-rl; } </style> </head> <body
