Thuộc tính text-biến:chữ hoa đặt nội dung của một phần tử văn bản thành tất cả các chữ hoa. Bạn cũng có thể sử dụng thuộc tính này để đặt nội dung của phần tử văn bản thành chữ thường hoặc chữ hoa tiêu đề. biến đổi văn bản có thể áp dụng cho các đoạn văn, tiêu đề hoặc bất kỳ thành phần văn bản nào khác.
Khi viết và phát triển một trang web, các nhà phát triển có thể sử dụng các thuộc tính CSS để điều chỉnh trường hợp của phông chữ văn bản nếu họ cần. Hai cách mà chúng ta sẽ đề cập trong bài viết này là sử dụng text-biến đổi và sử dụng font-variant. Hãy xem cú pháp của cả hai.
CSS All Caps
Bạn có thể thay đổi nội dung của một phần tử văn bản thành tất cả các chữ hoa bằng cách sử dụng thuộc tính CSS text-biến đổi. Thuộc tính này đặt cách viết hoa văn bản trên một trang web. Bạn cũng có thể sử dụng thuộc tính này để đặt nội dung của phần tử văn bản thành chữ thường.
Để tạo một khối văn bản có tất cả các chữ cái viết hoa, hãy sử dụng text-biến đổi:chữ hoa trong bộ chọn CSS của bạn:
text-biến đổi:chữ hoa;
Thuộc tính biến đổi văn bản chấp nhận ba giá trị có thể có:
- chữ hoa:Đặt từng từ thành chữ hoa trong một phần tử văn bản.
- chữ thường:Đặt văn bản thành chữ thường.
- viết hoa:Viết hoa từng từ, còn được gọi là viết hoa tiêu đề.
Hãy cùng xem một ví dụ về phương pháp biến đổi văn bản đang hoạt động.
Ví dụ về tất cả các Caps CSS
Chúng tôi sẽ xây dựng một trang web hiển thị “Trang này không tồn tại”. bằng tất cả các chữ cái viết hoa.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Để làm điều này, chúng tôi có thể nhập tất cả các chữ cái của chúng tôi bằng chữ hoa. Nhược điểm của phương pháp này là chúng ta sẽ phải viết lại văn bản của mình theo cách thủ công. Đây không phải là vấn đề đối với một câu ngắn như vậy. Tuy nhiên, việc thay đổi các chữ cái theo cách thủ công sẽ ngày càng trở nên rắc rối nếu bạn thay đổi trường hợp của một chuỗi văn bản dài hơn.
Chúng tôi sẽ sử dụng phương pháp chuyển đổi văn bản để an toàn.
Hãy xác định tài liệu HTML bằng văn bản của chúng tôi và quy tắc chuyển đổi văn bản:
<html>
<head>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<p>this is in all caps</p>
</body>
</html> Tất cả các chữ cái trong văn bản đã chọn đều xuất hiện ở dạng chữ hoa.
Đầu tiên, chúng tôi xác định thẻ
. Thẻ này bao gồm thẻ