Chuyển đổi văn bản bằng CSS

Để chuyển đổi văn bản trong CSS, hãy sử dụng thuộc tính text-transform với các giá trị sau:

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

Ví dụ 1: Chuyển thành chữ hoa

<!DOCTYPE html>
<html>
<head>
<style>
div {
  line-height: 1.9;
  text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Tiêu đề Demo</h1>
<div>
  <p>Đây là văn bản demo.<br> Đây là văn bản demo khác.</p>
</div>
</body>
</html>

Kết quả

Ví dụ 2: Chuyển thành chữ thường

<!DOCTYPE html>
<html>
<head>
<style>
div {
  text-transform: lowercase;
}
</style>
</head>
<body>
<h1>Tiêu đề Demo</h1>
<div>
  <p>ĐÂY LÀ VĂN BẢN DEMO.<br> Đây là VĂN BẢN DEMO KHÁC.</p>
</div>
</body>
</html>

Kết quả

Giải thích các giá trị:

• none: Không chuyển đổi (mặc định)
• capitalize: Viết hoa chữ cái đầu mỗi từ
• uppercase: Chuyển toàn bộ thành chữ hoa
• lowercase: Chuyển toàn bộ thành chữ thường
• initial: Trả về giá trị mặc định
• inherit: Kế thừa từ phần tử cha