CSS การใช้ text-transform

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

CSS การใช้ text-transform

Post by GoB »

CSS การใช้ text-transform

จะเป็นการกำหนดลักษณะของตัวอักษร ตัวพิมพ์เล็ก หรือ ตัวพิมพ์ใหญ่ ตัวอย่างการใช้คำสั่ง เช่น
text-transform:capitalize; เป็นการกำหนดให้ตัวอักษรตัวแรกเป็นตัวพิมพ์ใหญ่
text-transform:uppercase; เป็นการกำหนดให้ตัวอักษรเป็นตัวพิมพ์ใหญ่ทั้งหมด
text-transform:lowercase; เป็นการกำหนดให้ตัวอักษรเป็นตัวพิมพ์เล็กทั้งหมด
text-transform:none; เป็นการกำหนดให้ตัวอักษร เป็นไปตามรูปแบบเดิม

ตัวอย่างการใช้โค้ด

Code: Select all

<html>
<head>
<style>  				//กำหนดลักษณะของตัวอักษร
p.uppercase {			//กำหนดให้เป็นตัวพิมพ์ใหญ่ทั้งหมด
    text-transform:uppercase;		
}
p.lowercase {			//กำหนดให้เป็นตัวพิมพ์เล็กทั้งหมด
    text-transform:lowercase;
}
p.capitalize {			//กำหนดให้ตัวอักษรตัวแรกเป็นตัวพิมพ์ใหญ่
    text-transform:capitalize;
}
p.none {				//กำหนดให้ตัวอักษรเป็นไปตามรูปแบบเดิม
    text-transform:none;
}
</style>
</head>
<body>
<p class="uppercase">CSS tExt - TraNsForM</p>
<p class="lowercase">CSS tExt - TraNsForM</p>
<p class="capitalize">CSS tExt - TraNsForM</p>
<p class="none">CSS tExt - TraNsForM</p>
</body>
</html>
ผลลัพธ์ที่ได้
==================================================
1.jpg
1.jpg (26.84 KiB) Viewed 1086 times
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 4 guests