Thuộc tính text-transform trong CSS
Trần Thị Vân - 1317
- 12/07/2025
Chức năng của Thuộc tính text-transform trong CSS
Thuộc tính text-transform trong CSS dùng để in hoa, in thường toàn văn bản, in hoa chữ cái đầu tiên của mỗi từ trên văn bản trong phần tử HTML.
Cú pháp của Thuộc tính text-transform trong CSS
text-transform: giatri;
giatri: Giá trị để in hoa, in thường toàn văn bản, in hoa chữ cái đầu tiên của mỗi từ trên văn bản trong phần tử HTML (Ví dụ: uppercase, lowercase, capitalize,.....)
Các giá trị của Thuộc tính text-transform trong CSS
uppercase: In hoa toàn văn bản.
lowercase: In thường toàn văn bản.
capitalize: In hoa chữ cái đầu tiên của mỗi từ.
none: Không thực hiện text-transform.
Ví dụ Thuộc tính text-transform trong CSS
text-transform: uppercase (In hoa toàn văn bản)
text-transform: lowercase; (In thường toàn văn bản)
text-transform: capitalize; (In hoa chữ cái đầu tiên của mỗi từ)
text-transform: none; (Không thực hiện text-transform)
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính text-transform trong CSS</title>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính text-transform trong CSS</h1>
<p>Dùng để in hoa, in thường toàn văn bản, in hoa chữ cái đầu tiên của mỗi từ trên văn bản trong phần tử HTML:</p>
<p style="text-transform:uppercase;">text-transform: uppercase (In hoa toàn văn bản)</p>
<p style="text-transform:lowercase;">Text-transform: lowercase; (In thường toàn văn bản)</p>
<p style="text-transform:capitalize;">Text-transform: capitalize; (In hoa chữ cái đầu tiên của mỗi từ)</p>
<p style="text-transform:none;">Text-transform: None; (Không thực hiện text-transform)</p>
</body>
</html>
Ứng dụng text-transform CSS khi định dạng nội dung website
text-transform phù hợp khi cần kiểm soát cách hiển thị chữ trên giao diện mà không phải thay đổi nội dung gốc trong HTML. Thuộc tính này đặc biệt hữu ích với tiêu đề, nhãn, danh mục hoặc những khu vực cần một quy tắc viết hoa thống nhất.
Định dạng tiêu đề và tên danh mục
Với tiêu đề hoặc tên danh mục, text-transform có thể tạo ra cách trình bày đồng nhất trên toàn bộ website. Chẳng hạn, các nhãn điều hướng có thể được chuyển thành chữ in hoa để dễ nhận biết, trong khi nội dung gốc vẫn giữ nguyên cách viết.
.menu-title {
text-transform: uppercase;
}
Cách làm này giúp kiểm soát giao diện bằng CSS thay vì phải sửa từng nội dung trong HTML. Khi muốn thay đổi phong cách hiển thị, chỉ cần điều chỉnh quy tắc CSS là toàn bộ khu vực áp dụng sẽ được cập nhật.
Chuẩn hóa cách hiển thị văn bản trên giao diện
Trong những website có nội dung được nhập từ nhiều nguồn, cách viết hoa và viết thường có thể không đồng nhất. text-transform giúp định hướng cách hiển thị văn bản theo cùng một quy tắc, tạo cảm giác thống nhất giữa các thành phần.
.category-name {
text-transform: capitalize;
}
Điểm đáng chú ý là thuộc tính này chủ yếu tác động đến phần trình bày trên màn hình, không phải công cụ để sửa dữ liệu văn bản. Vì vậy, nội dung gốc vẫn nên được lưu trữ đúng chuẩn, đặc biệt khi dữ liệu còn được dùng cho tìm kiếm, xử lý bằng JavaScript hoặc các chức năng khác.
Kết hợp text-transform với các thuộc tính CSS khác
text-transform phát huy hiệu quả tốt hơn khi kết hợp với các thuộc tính định dạng chữ khác. Có thể sử dụng cùng font-size, font-weight, letter-spacing hoặc color để tạo hệ thống tiêu đề và nhãn có thứ bậc rõ ràng.
.label {
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.08em;
}
Cách kết hợp này giúp giao diện có tính nhất quán mà vẫn giữ CSS dễ quản lý. Nên áp dụng text-transform cho đúng thành phần cần định dạng, tránh lạm dụng khiến văn bản dài bị biến đổi quá mức và làm giảm khả năng đọc.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-transform trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
