คุณสมบัติการแปลงข้อความ CSS ช่วยให้เราสามารถตั้งค่าตัวพิมพ์ใหญ่ของข้อความสำหรับองค์ประกอบ สามารถรับค่าต่อไปนี้:ตัวพิมพ์ใหญ่, ตัวพิมพ์เล็ก, ตัวพิมพ์ใหญ่, เต็มความกว้าง, เต็มขนาด-kana และไม่มี
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติการแปลงข้อความ CSS มีดังต่อไปนี้ -
Selector {
text-transform: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติการแปลงข้อความ CSS -
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-transform: uppercase;
}
.demo {
text-transform: lowercase;
}
q {
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h2>WordPress</h2>
<q>WordPress is open source software you can use to create a beautiful website, blog, or app.</q>
<p class="demo">34% of the web uses WordPress, from hobby blogs to the biggest news sites online.</p>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgreen;
margin: auto;
text-align: center;
}
p {
width: 80%;
background-color: aquamarine;
text-decoration: uppercase;
}
article {
background-color: darksalmon;
text-transform: lowercase;
}
</style>
</head>
<body>
<h2>What is Magento?</h2>
<div>
<p>Magento is an open-source e-commerce platform written in PHP.</p>
<article>
Build your own branded store powered by Magento Commerce and Amazon. Choose from 4,600 themes and extensions in the Magento Marketplace as well as more than 300,000 Magento developers.
</article>
</div>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
