การแปลงข้อความ:คุณสมบัติ CSS ตัวพิมพ์ใหญ่ตั้งค่าเนื้อหาขององค์ประกอบข้อความเป็นตัวพิมพ์ใหญ่ทั้งหมด คุณยังสามารถใช้คุณสมบัตินี้เพื่อตั้งค่าเนื้อหาขององค์ประกอบข้อความเป็นตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ การแปลงข้อความใช้ได้กับย่อหน้า หัวเรื่อง หรือองค์ประกอบข้อความอื่นๆ
เมื่อเขียนและพัฒนาเว็บไซต์ นักพัฒนาสามารถใช้คุณสมบัติ CSS เพื่อปรับกรณีของแบบอักษรข้อความได้หากต้องการ สองวิธีที่เราจะพูดถึงในบทความนี้คือการใช้ text-transform และ โดยใช้ font-variant มาดูไวยากรณ์ของทั้งคู่กัน
CSS ตัวพิมพ์ใหญ่ทั้งหมด
คุณสามารถเปลี่ยนเนื้อหาขององค์ประกอบข้อความเป็นตัวพิมพ์ใหญ่ทั้งหมดได้โดยใช้คุณสมบัติการแปลงข้อความ CSS คุณสมบัตินี้กำหนดวิธีที่ข้อความเป็นตัวพิมพ์ใหญ่บนหน้าเว็บ คุณยังสามารถใช้คุณสมบัตินี้เพื่อตั้งค่าเนื้อหาขององค์ประกอบข้อความเป็นตัวพิมพ์เล็กได้
ในการทำให้บล็อกข้อความมีตัวพิมพ์ใหญ่ทั้งหมด ให้ใช้ text-transform:ตัวพิมพ์ใหญ่ ในตัวเลือก CSS ของคุณ:
การแปลงข้อความ:ตัวพิมพ์ใหญ่;
คุณสมบัติการแปลงข้อความยอมรับค่าที่เป็นไปได้สามค่า:
- ตัวพิมพ์ใหญ่:ตั้งค่าแต่ละคำเป็นตัวพิมพ์ใหญ่ในองค์ประกอบข้อความ
- ตัวพิมพ์เล็ก:ตั้งค่าข้อความเป็นตัวพิมพ์เล็ก
- ตัวพิมพ์ใหญ่:ใช้อักษรตัวพิมพ์ใหญ่แต่ละคำ หรือเรียกอีกอย่างว่าตัวพิมพ์ใหญ่ของชื่อ
มาดูตัวอย่างการทำงานของวิธีแปลงข้อความกัน
ตัวอย่าง CSS ตัวพิมพ์ใหญ่ทั้งหมด
เรากำลังจะสร้างหน้าเว็บที่แสดง "หน้านี้ไม่มีอยู่" ด้วยตัวพิมพ์ใหญ่ทั้งหมด
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
เมื่อต้องการทำเช่นนี้ เราสามารถพิมพ์ตัวอักษรทั้งหมดของเราเป็นตัวพิมพ์ใหญ่ ข้อเสียของแนวทางนี้คือ เราจะต้องเขียนข้อความใหม่ด้วยตนเอง นี่ไม่ใช่ปัญหาสำหรับประโยคสั้นๆ เช่นนี้ แต่การเปลี่ยนตัวอักษรด้วยตนเองจะยิ่งสร้างปัญหามากขึ้นหากคุณเปลี่ยนตัวพิมพ์ของสตริงข้อความที่ยาวขึ้น
เราจะใช้วิธีแปลงข้อความเพื่อความปลอดภัย
มากำหนดเอกสาร HTML ด้วยข้อความของเราและกฎการแปลงข้อความ:
<html>
<head>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<p>this is in all caps</p>
</body>
</html> ตัวอักษรทั้งหมดในข้อความที่เลือกจะปรากฏเป็นตัวพิมพ์ใหญ่
ขั้นแรก เรากำหนดแท็ก
แท็กนี้มีแท็ก