Thuộc tính text-transform CSS

Định nghĩa và cách sử dụng

Thuộc tính text-transform kiểm soát chữ hoa và chữ thường của văn bản.

Giải thích

Thuộc tính này sẽ thay đổi chữ hoa và chữ thường trong yếu tố, bất kể văn bản trong tài liệu nguồn có viết hoa hay viết thường. Nếu giá trị là capitalize, một số chữ cái cần viết hoa, nhưng không có định nghĩa rõ ràng về cách xác định các chữ cái nào cần viết hoa, điều này phụ thuộc vào cách trình duyệt xác định các "từ".

Xem thêm:

Hướng dẫn CSS:CSS văn bản

Hướng dẫn tham khảo HTML DOM:Thuộc tính textTransform

Ví dụ

Chuyển đổi văn bản trong các yếu tố khác nhau:

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

Thử ngay

Hướng dẫn và chú ý

Chú ý:Các trình duyệt khác nhau có thể sử dụng các phương pháp khác nhau để xác định từ bắt đầu từ đâu, do đó xác định các chữ cái nào cần viết hoa. Ví dụ, văn bản "w3-school" có thể được hiển thị bằng hai cách: "W3-school" và "W3-School". CSS không quy định cách nào là đúng, vì vậy cả hai đều hợp lệ.

Ngữ pháp CSS

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
none Mặc định. Định nghĩa văn bản tiêu chuẩn có chữ thường và chữ hoa.
capitalize Mỗi từ trong văn bản bắt đầu bằng chữ hoa.
uppercase Định nghĩa chỉ có chữ hoa.
lowercase Định nghĩa không có chữ hoa, chỉ có chữ thường.
inherit Định nghĩa rằng giá trị của thuộc tính text-transform nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: none
Thừa kế: yes
Phiên bản: CSS1
Ngữ pháp JavaScript: object.style.textTransform="uppercase"

Các ví dụ khác

Kiểm soát chữ hoa và chữ thường trong văn bản
Ví dụ này minh họa cách kiểm soát chữ hoa và chữ thường trong văn bản.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0