CSS All Caps: Hướng Dẫn Bước Đi Bước

Thuộc tính CSS text-transform: uppercase set nội dung text element thành CHỮ HOA. Cũng dùng property này để set lowercase hoặc title case. text-transform áp dụng cho paragraph, heading, hoặc bất kỳ text element nào.

Khi viết và develop website, developer dùng CSS property điều chỉnh case của text font nếu cần. Hai cách nói trong bài: text-transform và font-variant. Xem cú pháp cả hai.

CSS All Caps

Đổi nội dung text element thành all caps dùng text-transform property. Property này set cách text được capitalize trên web page. Cũng dùng để set lowercase.

Để block text thành CHỮ HOA, dùng text-transform: uppercase trong CSS selector:

text-transform: uppercase;

text-transform chấp nhận 3 giá trị:

• uppercase: Set mỗi từ thành uppercase.
• lowercase: Set text thành lowercase.
• capitalize: Viết hoa chữ cái đầu mỗi từ (title case).

Xem ví dụ text-transform thực tế.

Ví Dụ All Caps CSS

Xây dựng web page hiển thị "This page does not exist." toàn CHỮ HOA.

Có thể gõ thủ công tất cả chữ hoa. Nhược điểm: phải rewrite manual. Không vấn đề với câu ngắn. Nhưng chuỗi text dài → ngày càng rắc rối.

Dùng text-transform cho an toàn.

Định nghĩa HTML document với text và rule text-transform:

<html> 
  <head> 
    <style> 
      p { text-transform: uppercase; } 
    </style> 
  </head> 
  <body> 
    <p>this is in all caps</p> 
  </body> 
</html>

Tất cả chữ trong text được chọn hiển thị uppercase.

Đầu tiên định nghĩa <head> tag chứa <style>. Dùng style tag thêm rule text-transform. Có thể dùng external CSS stylesheet nhưng ví dụ ngắn không cần.

Trong <body>, định nghĩa paragraph. Paragraph hiển thị all caps dù viết sentence case. Biết vì text-transform áp dụng cho TẤT CẢ <p> tag trên trang.

Lưu Ý Về font-variant: small-caps

Nếu muốn đặc điểm title case nhưng dùng lowercase, dùng font-variant: small-caps. Title case = câu có chữ cái đầu mỗi từ viết hoa.

Ví dụ font-variant rule:

<head> 
  <style> 
    p { font-variant: small-caps; } 
  </style> 
</head> 
<body> 
  <p>this is in all caps</p> 
</body> 
</html>

Kết Luận

text-transform cho phép làm tất cả text trong element thành uppercase. font-variant cho phép small case text hiển thị uppercase với chiều cao chữ small case.

Hai rule này là thêm 2 công cụ trong toolbox format text HTML.

Muốn học thêm code HTML? Đọc How to Learn HTML guide – advice top courses, books, learning resources, tips tiếp tục learning journey.