CSS text-transform: Chuyển đổi chữ hoa/thường

Thuộc tính CSS text-transform cho phép chúng ta thiết lập viết hoa/chữ thường cho văn bản của một phần tử. Các giá trị: capitalize, lowercase, uppercase, full-width, full-size-kana, none.

Cú pháp

selector {
    text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana;
}

Các giá trị

Giá trị	Mô tả	Ví dụ
`none`	Không chuyển đổi (mặc định)	"Hello World"
`capitalize`	Viết hoa chữ cái đầu từ	"Hello World"
`uppercase`	Viết hoa tất cả	"HELLO WORLD"
`lowercase`	Viết thường tất cả	"hello world"
`full-width`	Chuyển sang full-width (CJK)	"Ｈｅｌｌｏ"
`full-size-kana`	Kana full-size (Japanese)	カタカナ → カタカナ

Ví dụ 1: Uppercase, lowercase, capitalize

<!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>

Ví dụ 2: Kết hợp với text-decoration (lưu ý: text-decoration không có uppercase)

<!DOCTYPE html>
<html>
<head>
<style>
div { background-color: lightgreen; margin: auto; text-align: center; }
p {
    width: 80%; background-color: aquamarine;
    text-transform: uppercase; /* Sửa từ 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...
    </article>
</div>
</body>
</html>

Sửa lỗi: Bài gốc viết text-decoration: uppercase — sai, phải là text-transform: uppercase.

Lưu ý quan trọng

capitalize chỉ viết hoa ký tự đầu tiên của mỗi từ (phân tách bằng space, hyphen, punctuation)
Không ảnh hưởng đến nội dung HTML thực tế — chỉ hiển thị
Copy/paste văn bản sẽ giữ nguyên case gốc
full-width và full-size-kana chủ yếu cho typography CJK (Chinese/Japanese/Korean)
Kết hợp với ::first-letter cho drop cap + uppercase

Ứng dụng thực tế

/ * Heading */
h1, h2, h3 { text-transform: uppercase; letter-spacing: 0.05em; }

/ * Button text */
.btn { text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.08em; }

/ * Input format */
input[type="email"] { text-transform: lowercase; }
input[pattern="[A-Z]{3}"] { text-transform: uppercase; }

/ * Table header */
th { text-transform: capitalize; font-size: 0.875rem; }

/ * Tránh: text-transform: capitalize cho tên riêng tiếng Việt (sẽ sai: "Nguyễn Văn A" → "Nguyễn Văn A" - OK, nhưng "Đặng Lê Nguyên Vũ" → "Đặng Lê Nguyên Vũ" - OK) */