Thuộc tính Text-Transform trong CSS

Text-Transform là một thuộc tính cũng thường được sử dụng với chữ. Nó dùng để hiển thị chữ thường thành chữ hoa trên trình duyệt. Mời bạn cùng quachquynh.com tìm hiểu về thuộc tính text-transform trong CSS qua bài này.

Cú pháp viết:

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

Giải thích:

  • none: Giá trị mặc định, nó sẽ không viết hoa
  • capitalize: Viết hoa mình chữ cái đầu tiên
  • uppercase: Viết hoa toàn bộ chữ cái
  • lowercase: Chuyển tất cả chữ hoa thành in thường

Để hiểu hơn bạn chạy ví dụ sau:

<!DOCTYPE html>
<html>
<head>
<title>Ví dụ viết chữ</title>
<style>
.text1 {
text-transform: none;
}
.text2 {
text-transform: capitalize;
}
.text3 {
text-transform: uppercase;
}
.text4 {
text-transform: lowercase;
}
</style>
</head>
<body>

<p class="text1">This is a paragraph - giá trị none</p>
<p class="text2">This is a paragraph - giá trị capitalize</p>
<p class="text3">This is a paragraph - giá trị uppercase</p>
<p class="text4">THIS IS A PARAGRAPH - GIÁ TRỊ LOWERCASE</p>

</body>
</html>

Kết quả:

Thuộc tính Text-transform

Trên đây là các giá trị và ví dụ về thuộc tính text transform sử dụng trong viết chữ. Qua đây bạn đã hiểu cách sử dụng chưa nhỉ? Hãy tiếp tục theo dõi các bài viết khác tại chuyên mục học CSS online miễn phí nhé!

Cùng chủ đề

Hãy để lại bình luận:

Mình rất vui khi bạn đã để lại một bình luận. Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *