CSS property text-transform: uppercase ตั้งค่าเนื้อหาของ text element ให้เป็นตัวใหญ่ทั้งหมด สามารถใช้ property นี้ตั้งค่าเป็น lowercase หรือ title case ได้ text-transform ใช้กับ paragraphs, headings หรือ text elements ใดๆ
เวลาเขียนและพัฒนาเว็บไซต์ developers ใช้ CSS properties ปรับ case ของ text font หากต้องการ 2 วิธีในบทความนี้: text-transform และ font-variant มาดู syntax ทั้งสอง
CSS All Caps
เปลี่ยนเนื้อหา text element เป็นตัวใหญ่ทั้งหมดด้วย CSS text-transform property property นี้ตั้งค่าการ capitalized ของ text บน web page ใช้ตั้งค่า lowercase ได้เช่นกัน
เพื่อทำให้ block ของ text เป็นตัวใหญ่ทั้งหมด ใช้ text-transform: uppercase ใน CSS selector:
text-transform: uppercase;
text-transform property ยอมรับ 3 ค่า:
- uppercase: ตั้งทุกคำเป็น uppercase ใน text element
- lowercase: ตั้ง text เป็น lowercase
- capitalize: ทำให้แต่ละคำขึ้นต้นด้วยตัวใหญ่ (title case)
มาดูตัวอย่าง text-transform method ในการทำงาน
All Caps CSS Example
จะสร้าง web page แสดง "This page does not exist." เป็นตัวใหญ่ทั้งหมด
วิธีหนึ่ง: พิมพ์ตัวอักษรทั้งหมดเป็น uppercase แต่ downside คือต้อง rewrite text ด้วยมือ ไม่ใช่ปัญหาสำหรับประโยคสั้น แต่จะยุ่งยากขึ้นเรื่อยๆ หาก string ยาว
เราจะใช้ text-transform method เพื่อความปลอดภัย
กำหนด HTML document พร้อม text และ text-transform rule:
<html> <head> <style> p { text-transform: uppercase; } </style> </head> <body> <p>this is in all caps</p> </body> </html>
ตัวอักษรทั้งหมดใน text ที่เลือกปรากฏเป็น uppercase
ก่อนอื่นกำหนด
tag รวม