CSS สามารถช่วยเราจัดรูปแบบตัวอักษรตัวแรกขององค์ประกอบโดยใช้ ::first-letter pseudo-element โปรดทราบว่าเครื่องหมายวรรคตอน ไดกราฟ และคุณสมบัติเนื้อหาสามารถเปลี่ยนอักษรตัวแรกได้ ตัวอย่างต่อไปนี้แสดงให้เห็นถึง CSS ::first-letter pseudo-element. ตัวอย่าง <!DOCTYPE html> <html> <head> &l
CSS ::first-line pseudo-element ช่วยให้เราจัดรูปแบบบรรทัดแรกขององค์ประกอบ ตัวอย่างต่อไปนี้แสดงให้เห็นถึง CSS ::first-line pseudo-element ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { text-align: center; background-color: darkorchid; } ::firs
เราใช้ตัวเลือกพี่น้องที่อยู่ติดกัน (+) หากเราต้องการจับคู่องค์ประกอบที่เกิดขึ้นทันทีหลังจากตัวเลือกแรก ในที่นี้ ตัวเลือกทั้งสองเป็นลูกขององค์ประกอบหลักเดียวกัน ไวยากรณ์ของ CSS CSS ข้างเคียง combinator มีดังนี้ - Selector + Selector{ attribute: /*value*/ } หากเราต้องการเลือกพี่น้องของพ
CSS child combinator ใช้เพื่อเลือกองค์ประกอบย่อยทั้งหมดขององค์ประกอบหลัก ไวยากรณ์ของ CSS child combinator มีดังนี้ ตัวเลือก { คุณลักษณะ:/*value*/} CSS descendant combinator ใช้สำหรับเลือกทายาททั้งหมดขององค์ประกอบหลัก ไวยากรณ์ของ CSS descendant combinator มีดังนี้ ตัวเลือกตัวเลือก { คุณลักษณะ:/*v
หากเราต้องการจัดรูปแบบพาเรนต์ขององค์ประกอบที่เน้น เราใช้ CSS :focus-within pseudo-class ตัวอย่างต่อไปนี้แสดง CSS :focus-within pseudo-class. ตัวอย่าง <!DOCTYPE html> <html> <head> <style> form { margin: 2%; padding: 2%; display: flex; &
CSS วัตถุพอดี และ ตำแหน่งวัตถุ คุณสมบัติช่วยให้เราครอบตัดรูปภาพและระบุวิธีการแสดงในองค์ประกอบ ไวยากรณ์ของคุณสมบัติ CSS object-fit มีดังนี้ - Selector { object-fit: /*value*/ object-position:/*value*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS วัตถุพอดี <!DO
เราสามารถจัดเก็บข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบโดยใช้แอตทริบิวต์ data-* ตัวอย่างต่อไปนี้แสดงแอตทริบิวต์ CSS data-* ตัวอย่าง <!DOCTYPE html> <html> <head> <style> dl { margin: 2%; } p { width: 60%; background-color: lightgreen;
ในการปิดใช้งานการยึดเลื่อนเริ่มต้นโดยเว็บเบราว์เซอร์ เราสามารถใช้ overflowanchor ทรัพย์สิน ตัวอย่าง ตัวอย่างต่อไปนี้ให้แนวคิดเกี่ยวกับคุณสมบัติ overflow-anchor - <!DOCTYPE html> <html> <head> <style> body { overflow-anchor: none; } div{ display: fle
การใช้คุณสมบัติตัวชี้เหตุการณ์ CSS เราสามารถควบคุมว่าจะอนุญาตให้ใช้เมาส์และการสัมผัสบนองค์ประกอบหรือไม่ ไวยากรณ์ของคุณสมบัติ CSS pointer-events มีดังนี้ - pointer-events: auto|none; ข้างบน อัตโนมัติ เป็นค่าเริ่มต้น องค์ประกอบตอบสนองต่อเหตุการณ์ตัวชี้ในขณะที่ ไม่มี: องค์ประกอบไม่ตอบสนองต่อเหตุการ
สำหรับการเปลี่ยนสีของเครื่องหมายคาเร็ตการแทรก CSS คุณสมบัติคาเร็ตสี ถูกนำมาใช้ ตัวอย่าง ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS คาเร็ตสี <!DOCTYPE html> <html> <head> <style> form { padding: 2%; margin: 2%; text-align: center; } for
CSS คุณสมบัติขนาดแท็บ ทำให้เราสามารถกำหนดจำนวนช่องว่างที่ใช้ในแท็บได้ ตัวอย่างต่อไปนี้แสดงคุณสมบัติขนาดแท็บ CSS ตัวอย่าง <!DOCTYPE html> <html> <head> <style> body { display: flex; flex-direction: column; } p { white-space: pre; } p:last
CSS ปรับข้อความ คุณสมบัติช่วยให้เราระบุประเภทเหตุผลสำหรับองค์ประกอบ คุณสมบัติ text-align ตั้งค่าการจัดแนวข้อความในแนวนอนในองค์ประกอบ ตัวอย่าง ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS text-justify <!DOCTYPE html> <html> <head> <style> article { margin: 3%;
การใช้ ยัติภังค์ CSS CSS คุณสมบัติ เราสามารถระบุวิธีการเพิ่มยัติภังค์ในข้อความได้ ตัวอย่าง ตัวอย่างต่อไปนี้แสดงคุณสมบัติของ CSS ยัติภังค์ div { ความกว้าง:20%; เส้นขอบ:มะนาวร่อง 2px; ระยะขอบ:10px; ช่องว่างภายใน:10px; ยัติภังค์:ไม่มี; -webkit-ยัติภังค์:none; -ms-ยัติภังค์:none;}div:last-of-type { ยัต
CSS เยื้องข้อความ คุณสมบัติช่วยให้เราสามารถระบุจำนวนช่องว่างในการเยื้องข้อความ ตัวอย่าง ตัวอย่างต่อไปนี้แสดงคุณสมบัติการเยื้องข้อความ CSS p { เยื้องข้อความ:15%;}บทความ { สีพื้นหลัง:#000000; อัตรากำไรขั้นต้น:2%; ดังนั้น eros จำนวนมากจึงเป็นหุบเขาที่สวยงามของวัยรุ่น เมื่อเรือข้ามฟากกลายเป็นมวล มันไม่
ด้วยการแนะนำคุณสมบัติการตกแต่งข้อความต่อไปนี้ เราสามารถจัดรูปแบบข้อความได้หลากหลายรูปแบบมากกว่าเดิม text-decoration เป็นชวเลขสำหรับ text-decoration-thickness, text-decoration-color, text-decoration-line และ text-decoration-style ต้องระบุ text-decoration-skip, text-decoration-skip-ink, text-decoratio
ด้วยการเปลี่ยนสีข้อความและสีพื้นหลังของหน้า เราสามารถเพิ่มโหมดมืด/สว่างสำหรับเว็บไซต์ของเราได้ ไวยากรณ์ ไวยากรณ์ต่อไปนี้สามารถใช้เพื่อใช้โหมดมืดได้ Selector { color: white; background-color: black } ตัวอย่าง <!DOCTYPE html> <html> <head> &nbs
เราสามารถเปลี่ยนผลลัพธ์ของการเลื่อนพื้นที่ขอบเขตของหน้าเว็บโดยใช้คุณสมบัติ CSS overscrollbehavior ด้วยวิธีนี้ เราสามารถปิดใช้งาน Pull-to-Refresh บนเบราว์เซอร์ได้ ไวยากรณ์ของคุณสมบัติพฤติกรรม overscroll CSS มีดังต่อไปนี้ - Selector { overscroll-behavior: /*value*/ } ตัวอย่าง ตัวอย่างต่อไปนี้แสดง
เพื่อช่วยให้นักพัฒนาปรับแต่งเว็บไซต์ของตนด้วยการผสมผสานระหว่าง JavaScript และ CSS คุณสมบัติ CSS ใหม่ได้รับการพัฒนาและสนับสนุนเบราว์เซอร์ยอดนิยมในขณะนี้ บางส่วนมีดังต่อไปนี้ − โฟกัส-ภายใน มีจุดมุ่งหมายเพื่อแก้ปัญหาการเข้าถึงโฟกัสภายในองค์ประกอบ เลื่อนสแนป ซึ่งจะทำให้การเลื่อนและการชะลอตัวแบบเนทีฟ @
เมื่อใช้ CSS :not() pseudo-class เราสามารถปรับแต่งสไตล์ของเราได้โดยการเลือกองค์ประกอบที่ไม่มีค่าเฉพาะหรือไม่ตรงกับตัวเลือก ตัวอย่าง ตัวอย่างต่อไปนี้แสดง CSS :ไม่ใช่ pseudo-class <!DOCTYPE html> <html> <head> <style> p { background-color: cornflowerblue; &
โดยการตั้งค่า postion:sticky และ top:0 เราสามารถสร้างส่วนหัวคงที่บน scroll ในตาราง HTML ตัวอย่าง ตัวอย่างต่อไปนี้ทำให้เรามีแนวคิดในการนำสิ่งนี้ไปใช้ − <!DOCTYPE html> <html> <head> <style> div { color: white; display: flex; padding: 2%;
