หน้าแรก
หน้าแรก
หากต้องการกำหนดระยะห่างระหว่างคำ ให้ใช้คุณสมบัติการเว้นวรรคคำ ค่าคุณสมบัติมีดังนี้ − word-spacing: normal|length|initial|inherit; ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> p.demo1 { word-spacing: normal; } p.demo2 { word-sp
คุณสมบัติโหมดผสมผสมใช้เพื่อกำหนดว่าเนื้อหาขององค์ประกอบควรผสมผสานกับพื้นหลังหลักโดยตรงอย่างไร ต่อไปนี้เป็นค่าคุณสมบัติ - mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity; ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCT
ในการตั้งค่าการจัดตำแหน่งข้อความโดยใช้ CSS ให้ใช้คุณสมบัติ text-align ต่อไปนี้เป็นค่าคุณสมบัติที่เป็นไปได้ - text-align: left|right|center|justify|initial|inherit; ตัวอย่าง เรามาดูตัวอย่างการตั้งค่าการจัดตำแหน่งข้อความ − <!DOCTYPE html> <html> <head> <style> .demo { &
สำหรับการตกแต่งข้อความใน CSS ให้ใช้คุณสมบัติ text-decoration เป็นคุณสมบัติชวเลขสำหรับคุณสมบัติต่อไปนี้ - text-decoration-line text-decoration-color text-decoration-style ตัวอย่าง เรามาดูตัวอย่างการตกแต่งข้อความใน CSS − <!DOCTYPE html> <html> <head> <style> .demo { &nb
หากต้องการจัดรูปแบบทั้งรายการที่ไม่เรียงลำดับและเรียงลำดับ ให้ใช้คุณสมบัติ list-style-type, list-style-image และ list-style-position ตัวอย่าง ให้เราดูตัวอย่างในการจัดรูปแบบรายการที่ไม่เรียงลำดับ (ul) - <!DOCTYPE html> <html> <head> <style> ul { list-style-type:
รายการมีการสั่งซื้อเช่นกัน unordered ด้วย CSS คุณสามารถตั้งค่าเครื่องหมายรายการที่กำหนดหรือรูปภาพสำหรับเครื่องหมายได้ ด้วยเหตุนี้ ด้วย CSS เราจึงสามารถกำหนดตำแหน่งสำหรับเครื่องหมายรายการได้ เรามาดูตัวอย่างกัน − list-style-type list-style-type ใช้เพื่อกำหนดประเภทของตัวทำเครื่องหมายรายการ ตัวอย่าง
สำหรับการจัดสไตล์ตารางด้วย CSS เราสามารถกำหนดเส้นขอบ ยุบ กำหนดความกว้างและความสูงได้ นอกจากนี้เรายังสามารถกำหนด padding, alig text เป็นต้น เรามาดูตัวอย่างกัน − ตัวอย่าง ในการเพิ่มเส้นขอบให้กับตารางใน CSS ให้ใช้คุณสมบัติ borders เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> &l
ในการตั้งค่าช่องว่างของคอลัมน์โดยใช้ CSS3 ให้ใช้คุณสมบัติ column-gap คุณสามารถตั้งค่าเป็น − column-gap: length|normal|initial|inherit; ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .demo { column-count: 4; -webkit-column-count: 4; /* Chrome, Safari,
หน่วยความยาวสัมบูรณ์ได้รับการแก้ไขโดยสัมพันธ์กัน หน่วยเหล่านี้ใช้เมื่อทราบรูปแบบเอาต์พุตแล้ว ต่อไปนี้คือหน่วยความยาวสัมบูรณ์บางส่วน - Sr.No หน่วย &คำอธิบาย 1 ซม. เซนติเมตร 2 mm มิลลิเมตร 3 ใน นิ้ว (1in =96px =2.54cm) 4 px * พิกเซล (1px =1/96th of 1in) 5 pt คะแนน (1pt =1/72 ของ 1i
ใช้คุณสมบัติคอลัมน์ใน CSS3 เพื่อกำหนดจำนวนคอลัมน์และความกว้าง เป็นคุณสมบัติชวเลขสำหรับคุณสมบัติความกว้างคอลัมน์และจำนวนคอลัมน์ ถูกกำหนดเป็น − columns: auto|column-width column-count|initial|inherit; ตัวอย่าง เรามาดูตัวอย่างการนับคอลัมน์กัน − <!DOCTYPE html> <html> <head> <style
ในการตั้งค่าความสว่างของภาพใน CSS ให้ใช้ความสว่างของตัวกรอง (%) โปรดจำไว้ว่า ค่า 0 ทำให้รูปภาพเป็นสีดำ 100% สำหรับรูปภาพต้นฉบับและค่าเริ่มต้น พักผ่อน คุณสามารถตั้งค่าใดก็ได้ตามต้องการ แต่ค่าที่สูงกว่า 100% จะทำให้ภาพสว่างขึ้น ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head
ค่าสี RGBA สำหรับสีแดง สีเขียว สีน้ำเงิน และอัลฟ่า อัลฟ่าคือความทึบของสี เช่น ตัวเลขระหว่าง 0.0 ถึง 1.0 ที่นี่ 1.0 จะเป็นแบบเต็มทึบ ที่นี่ เราจะเห็นความแตกต่างของความทึบที่สร้างขึ้นด้วยพารามิเตอร์ Alpha ใน RGBA - ตัวอย่าง เรามาดูตัวอย่างค่าสี RGBA กัน − <!DOCTYPE html> <html> <head
หากต้องการแปลงรูปภาพเป็นโทนสีเทาใน CSS3 ให้ใช้ค่าระดับสีเทาสำหรับคุณสมบัติของตัวกรอง ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> img.demo { filter: brightness(120%); filter: contrast(120%); filter: grayscale(130%
หากต้องการใช้การหมุนสีในรูปภาพด้วย CSS3 ให้ใช้ค่าการหมุนสีสำหรับคุณสมบัติตัวกรอง ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> img.demo { filter: hue-rotate(45deg); } </style> </head> <body> <h1>Learn Spring Framewor
หากต้องการใช้ความทึบกับรูปภาพ swith CSS3 ให้ใช้ค่าความทึบสำหรับคุณสมบัติตัวกรอง ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> img.demo { filter: opacity(60%); } </style> </head> <body> <h1>Learn Spring Framework</
ฟังก์ชัน matrix() ใน CSS ใช้เพื่อกำหนดเมทริกซ์การแปลง 2D ที่เป็นเนื้อเดียวกัน ตั้งค่าการแปลงเชิงเส้นเป็นพารามิเตอร์ ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> .demo { transform: matrix(2, 1, -1, 1, 190, 100); } .skew_img { t
คุณสมบัติที่ถูกต้องใช้เพื่อกำหนดตำแหน่งแนวนอนขององค์ประกอบ ถูกกำหนดเป็น − right: auto|length|initial|inherit; ตัวอย่าง ให้เรามาดูตัวอย่างการใช้คุณสมบัติที่เหมาะสมใน CSS - <!DOCTYPE html> <html> <head> <style> div { text-align: justify; text-justify:
linear-gradient() ใช้เพื่อกำหนด linear gradient เป็นภาพพื้นหลัง - background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ด้านบน ให้ตั้งค่าจุดเริ่มต้นและทิศทาง โดยให้สีนั้นหยุดเพื่อให้การเปลี่ยนภาพเป็นไปอย่างราบรื่น ตัวอย่าง ให้เรามาดูตัวอย่างการใช้งาน linear-gradient() − <
ค่าสี CSS3 RGBA ใช้สำหรับสีแดง สีเขียว สีฟ้า และสีอัลฟ่า อัลฟ่าคือความทึบของสี เช่น ตัวเลขระหว่าง 0.0 ถึง 1.0 ที่นี่ 1.0 จะเป็นแบบเต็มทึบ ที่นี่ เราจะเห็นความแตกต่างของความทึบที่สร้างขึ้นด้วยพารามิเตอร์ Alpha ใน RGBA - ตัวอย่าง เรามาดูตัวอย่างค่าสี RGBA กัน − #demo1 {background-color:rgba(108,111
คุณสมบัติ font-variant ใน CSS เป็นชวเลขสำหรับคุณสมบัติต่อไปนี้:font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures และ font-variant-east-asian มีค่าดังต่อไปนี้ − font-variant: normal|small-caps|initial|inherit; ตัวอย่าง ให้เรามาดูตัวอย่างการใช้งานคุณสมบัติตัวแปร