Viết hoa trong CSS sử dụng thuộc tính text-transform

Viết hoa trong CSS - ảnh minh họa

Viết hoa trong CSS – ảnh minh họa

Để viết hoa trong CSS thì chúng ta sẽ sử dụng thuộc tính text-transform, thuộc tính này giúp tự viết hoa, viết thường toàn bộ văn bản hoặc viết hoa đầu mỗi từ.

Viết hoa toàn bộ các từ

Để viết hoa chúng ta sử dụng thuộc tính text-transform, và giá trị để nó hiển thị viết hoa hoàn toàn là: uppercase

Ví dụ mình có một đoạn text sau và muốn nó viết hoa toàn bộ các chữ: “tịnh nguyễn là một người rất đẹp zai

<span style="text-transform: uppercase;">tịnh nguyễn là một người rất đẹp zai.</span>

Đấy, các bạn chỉ cần dán đoạn code trên vào công cụ Codepen này để xem demo.

Viết thường toàn bộ các từ

Để viết thường toàn bộ các từ thì chúng ta sử dụng giá trị lowercase, cụ thể thì các bạn tham khảo cách làm bên dưới.

<span style="text-transform: lowercase;">TỊNH NGUYỄN LÀ MỘT NGƯỜI RẤT ĐẸP ZAI.</span>

Viết hoa đầu mỗi từ

Để viết hoa đầu mỗi từ thì chúng ta sẽ dùng giá trị capitalize, các bạn xem ví dụ bên dưới nhé !

<span style="text-transform: capitalize;">tịnh nguyễn là một người rất đẹp zai.</span>

Xong rồi đó, mà các bạn nhớ dán vào công cụ Codepen ở trên để xem demo và thực hành nhé !

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Không biết bạn đã từng đọc qua các nội dung dưới đây chưa nhỉ ?

avatar
3 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
HuyềnNam HảiHocban.vnPhước Đt Recent comment authors
Huyền <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">4</span><span style="color: #e91e63;">) </span>
Guest

hay quá, cảm ơn admin rất nhiều

Nam Hải <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">13</span><span style="color: #e91e63;">) </span>
Guest

cho mình hỏi, bài viết của bạn sử dụng font chữ gì vậy bạn?

Phước ĐạiKa <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">36</span><span style="color: #e91e63;">) </span>
Member

Hay quá bác. Cần tìm thấy web bác trên google!