Hướng dẫn text-transform trong css
Show Định nghĩa và sử dụngThuộc tính text-transform thiết lập các ký tự viết hoa cho văn bản. Cấu trúctag {
text-transform: giá trị;
}Với giá trị như sau:
Ví dụHTML viết:
Hiển thị trình duyệt khi chưa có CSS:học web chuẩn học web chuẩn học web chuẩn CSS viết:p.capitalizeText {
text-transform: capitalize;
}
p.uppercaseText {
text-transform: uppercase;
}
p.lowercaseText {
text-transform: lowercase;
}Hiển thị trình duyệt khi có CSS:học web chuẩn học web chuẩn học web chuẩn Trình duyệt hỗ trợThuộc tính text-transform được hỗ trợ trong đa số các trình duyệt. Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype 1) Thuộc tính text-transform trong CSS- Thuộc tính text-transform dùng để điều chỉnh văn bản sang dạng chữ in hoa hoặc chữ thường. - Tôi có phần tử chứa một đoạn văn bản như sau: - Với việc sử dụng thuộc tính text-transform, ta có thể chuyển toàn bộ các ký tự trong phần tử sang dạng chữ in hoa. - Chuyển toàn bộ các ký tự trong phần tử sang dạng chữ thường. - Hoặc chuyển ký tự đầu tiên của mỗi từ trong phần tử sang dạng chữ in hoa. 2) Cách sử dụng thuộc tính text-transform trong CSS- Để sử dụng thuộc tính text-transform, ta dùng cú pháp như sau: - Trong đó, ta thấy giá trị của thuộc tính text-transform có thể được xác định bởi một trong sáu loại:
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: Để hiểu hơn bạn chạy ví dụ sau: This is a paragraph - giá trị none This is a paragraph - giá trị capitalize This is a paragraph - giá trị uppercase THIS IS A PARAGRAPH - GIÁ TRỊ LOWERCASE Kết quả: 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é! |
