ในขณะที่เขียนบทความหรือเอกสาร เรามักต้องการอักขระบางตัวในกรณีเฉพาะ บนหน้าเว็บ องค์ประกอบ HTML ที่ต้องการแปลงข้อความจะถูกนำไปใช้กับคุณสมบัติ CSS “ แปลงข้อความ '. คุณสมบัตินี้ยังช่วยประหยัดเวลาในลักษณะที่หลังจากเพิ่มอักขระทั้งหมดแล้ว ตัวพิมพ์และตัวพิมพ์สามารถแปลงได้ทันที

โพสต์นี้จะสอนวิธีที่เราสามารถเปลี่ยนตัวพิมพ์ข้อความด้วย CSS เริ่มกันเลย!

วิธีการพิมพ์ข้อความตัวพิมพ์ใหญ่และตัวพิมพ์เล็กโดยใช้ CSS?

ใน CSS คำว่า “ แปลงข้อความ ” คุณสมบัติควบคุมตัวพิมพ์ใหญ่ของข้อความ นอกจากนี้ยังใช้เพื่อแปลงข้อความเป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็ก

ค่าคุณสมบัติการแปลงข้อความ

ค่าที่เป็นไปได้ของคุณสมบัติการแปลงข้อความ CSS แสดงอยู่ด้านล่าง:

• • “ ตัวพิมพ์ใหญ่ ”: ค่านี้ทำให้อักขระทั้งหมดในข้อความขององค์ประกอบเป็นตัวพิมพ์ใหญ่
  • “ ตัวพิมพ์เล็ก ”: ค่านี้เปลี่ยนข้อความขององค์ประกอบเป็นตัวพิมพ์เล็ก
  • “ พิมพ์ใหญ่ ”: ค่านี้จะเปลี่ยนตัวอักษรตัวแรกของแต่ละคำที่เป็นตัวพิมพ์ใหญ่
  • “ ไม่มี ”: ค่านี้จำกัดข้อความขององค์ประกอบสำหรับการแก้ไข
  • “ อักษรย่อ ”: ค่านี้ตั้งค่าเริ่มต้น
  • “ คุณได้รับมรดก ”: ค่านี้ตั้งค่าจากองค์ประกอบหลัก

วิเคราะห์ตัวอย่างด้านล่าง!

ตัวอย่าง: การแปลงข้อความเป็นตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก

ขั้นแรก เพิ่มองค์ประกอบ div ด้วยชื่อคลาส “ กล่อง '. ภายในเนื้อหา ให้เพิ่มแท็กหัวเรื่องสามแท็ก

,

และ

โดยที่ข้อความของส่วนหัว

เป็นตัวพิมพ์ใหญ่ทั้งหมด

เป็นตัวพิมพ์เล็ก และตัวที่สามเป็นตัวพิมพ์เล็กเช่นกัน

ด้านล่างนี้คือรหัส HTML:

< แผนก ระดับ = 'กล่อง' >
< h1 > ตัวพิมพ์เล็ก: ยินดีต้อนรับสู่ LINUXHINT h1 >
< ชั่วโมง2 > ตัวพิมพ์ใหญ่: ยินดีต้อนรับสู่ linuxhint ชั่วโมง2 >
< h3 > เป็นตัวพิมพ์ใหญ่: ยินดีต้อนรับสู่ linuxhint h3 >
แผนก >

กล่องสไตล์ div

.กล่อง {
ความสูง: 200px;
ความกว้าง: 80 % ;
เส้นขอบ: ทึบ 4px #e4cfcf;
สีพื้นหลัง: cadetblue;
ระยะขอบ: อัตโนมัติ 1px;
ช่องว่างภายใน: 10px;
}

div ที่สร้างขึ้นในไฟล์ HTML ข้างต้นได้รับการกำหนดสไตล์ด้วยคุณสมบัติ CSS ที่อธิบายไว้ด้านล่าง:

• • “ ความสูง ” ใช้สำหรับกำหนดความสูงของ div
  • “ ความกว้าง ” ใช้สำหรับกำหนดความกว้างของ div
  • “ ชายแดน คุณสมบัติ ” ใช้เพื่อใช้เส้นขอบรอบองค์ประกอบ ซึ่งมีความกว้าง 4px ประเภทเส้นทึบ และสี #e4cfcf
  • “ สีพื้นหลัง ” ระบุสีพื้นหลังขององค์ประกอบ
  • “ ขอบ ” คุณสมบัติปรับพื้นที่ทุกด้านขององค์ประกอบ
  • “ การขยายความ คุณสมบัติ ” ใช้เพื่อสร้างพื้นที่รอบเนื้อหาขององค์ประกอบ div หรือภายในเส้นขอบขององค์ประกอบ

บล็อกโค้ดด้านล่างระบุว่าองค์ประกอบส่วนหัวทั้งหมดมีสไตล์ด้วยค่าต่างๆ ของคุณสมบัติการแปลงข้อความ องค์ประกอบ

ใช้กับการแปลงข้อความคุณสมบัติโดยตั้งค่าเป็น “ ตัวพิมพ์เล็ก ”:

h1 {
การแปลงข้อความ: ตัวพิมพ์เล็ก;
}

องค์ประกอบ

ใช้กับคุณสมบัติการแปลงข้อความโดยตั้งค่าเป็น “ ตัวพิมพ์ใหญ่ ”:

ชั่วโมง2 {
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
}

สำหรับองค์ประกอบ

ค่าของคุณสมบัติการแปลงข้อความจะถูกตั้งค่าเป็น “ พิมพ์ใหญ่ ”:

h3 {
แปลงข้อความ: พิมพ์ใหญ่;
}

ด้วยการระบุรหัสที่กล่าวถึงข้างต้น ข้อความของส่วนหัวแรกจะถูกแปลงเป็นตัวพิมพ์เล็กทั้งหมด และส่วนหัวที่สองเป็นตัวพิมพ์ใหญ่ โดยที่อักษรตัวแรกของแต่ละคำจะเป็นตัวพิมพ์ใหญ่ในหัวข้อที่สาม:

ยอดเยี่ยม! เราได้เรียนรู้วิธีแปลงข้อความเป็นตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก และตัวพิมพ์ใหญ่ทั้งหมดเรียบร้อยแล้ว

บทสรุป

คุณสมบัติการแปลงข้อความของ CSS ควบคุมการใช้อักษรตัวพิมพ์ใหญ่ของข้อความและใช้เพื่อเปลี่ยนตัวพิมพ์ของข้อความในเอกสาร คุณสมบัตินี้ใช้กับองค์ประกอบทั้งหมด โดยค่าของคุณสมบัตินี้สามารถเป็นตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือไม่มีเลย บล็อกนี้ได้อธิบายขั้นตอนการแปลงข้อความเป็นตัวพิมพ์ใหญ่และตัวพิมพ์เล็กโดยใช้คุณสมบัติการแปลงข้อความ CSS