Khi viết bất kỳ bài báo hay tài liệu nào, chúng ta thường cần đến một số ký tự trong những trường hợp cụ thể. Trên một trang web, phần tử HTML có văn bản cần chuyển đổi được áp dụng với thuộc tính CSS “ chuyển đổi văn bản ”. Thuộc tính này cũng tiết kiệm thời gian theo cách mà sau khi thêm tất cả các ký tự, trường hợp của chúng có thể được chuyển đổi cùng một lúc.

Bài đăng này sẽ hướng dẫn bạn cách chúng ta có thể thay đổi trường hợp văn bản bằng CSS. Vì vậy, hãy bắt đầu!

Làm cách nào để viết hoa và viết thường bằng CSS?

Trong CSS, “ chuyển đổi văn bản ” thuộc tính kiểm soát cách viết hoa của văn bản. Nó cũng được sử dụng để chuyển đổi văn bản thành chữ hoa hoặc chữ thường.

giá trị thuộc tính chuyển đổi văn bản

Các giá trị có thể có của thuộc tính chuyển đổi văn bản CSS được liệt kê bên dưới:

• • “ chữ hoa ”: Giá trị này làm cho tất cả các ký tự trong văn bản của phần tử được viết hoa.
  • “ chữ thường ”: Giá trị này thay đổi văn bản của phần tử thành chữ thường.
  • “ viết hoa ”: Giá trị này thay đổi chữ cái đầu tiên của mỗi từ được viết hoa.
  • “ không ai ”: Giá trị này giới hạn văn bản của phần tử để sửa đổi.
  • “ ban đầu ”: Giá trị này đặt giá trị mặc định.
  • “ bạn thừa hưởng ”: Giá trị này đặt giá trị của nó từ phần tử cha của nó.

Phân tích ví dụ dưới đây!

Ví dụ: Chuyển đổi văn bản thành chữ hoa và chữ thường

Đầu tiên, thêm một phần tử div với tên lớp “ hộp ”. Bên trong nội dung, hãy thêm ba thẻ tiêu đề

,

và

, trong đó văn bản của tiêu đề

đều được viết hoa,

là chữ thường và thẻ thứ ba cũng là chữ thường.

Dưới đây là mã HTML:

< div lớp = 'hộp' >
< h1 > chữ thường: CHÀO MỪNG BẠN ĐẾN VỚI LINUXHINT h1 >
< h2 > chữ hoa: chào mừng bạn đến với linuxhint h2 >
< h3 > viết hoa: chào mừng bạn đến với linuxhint h3 >
div >

div hộp kiểu

.hộp {
chiều cao: 200px;
chiều rộng: 80 % ;
đường viền: 4px rắn #e4cfcf;
màu nền: cadetblue;
lề: tự động 1px;
phần đệm: 10px;
}

Div được tạo trong tệp HTML ở trên hiện được tạo kiểu bằng các thuộc tính CSS được giải thích bên dưới:

• • “ Chiều cao ” được sử dụng để thiết lập chiều cao của div.
  • “ chiều rộng ” được sử dụng để thiết lập độ rộng của div.
  • “ ranh giới ” thuộc tính được sử dụng để áp dụng đường viền xung quanh phần tử có chiều rộng 4px, loại đường liền nét và màu #e4cfcf.
  • “ màu nền ” chỉ định màu nền của phần tử.
  • “ lề ” thuộc tính điều chỉnh không gian ở mọi phía của phần tử.
  • “ đệm ” thuộc tính được sử dụng để tạo khoảng trống xung quanh nội dung của phần tử div hoặc bên trong đường viền của phần tử.

Các khối mã bên dưới chỉ ra rằng tất cả các thành phần tiêu đề được tạo kiểu với các giá trị khác nhau của thuộc tính chuyển đổi văn bản. Phần tử

được áp dụng với thuộc tính text-transform với giá trị được đặt là “ chữ thường ”:

h1 {
chuyển đổi văn bản: chữ thường;
}

Phần tử

được áp dụng với thuộc tính text-transform với giá trị được đặt là “ chữ hoa ”:

h2 {
chuyển đổi văn bản: chữ hoa;
}

Đối với phần tử

, giá trị của thuộc tính text-transform được đặt là “ viết hoa ”:

h3 {
chuyển đổi văn bản: viết hoa;
}

Bằng cách cung cấp mã được đề cập ở trên, toàn bộ văn bản của tiêu đề đầu tiên được chuyển thành chữ thường và tiêu đề thứ hai thành chữ hoa. Trong khi chữ cái đầu tiên của mỗi từ được viết hoa trong tiêu đề thứ ba:

Tuyệt quá! Chúng ta đã học thành công cách chuyển văn bản thành chữ hoa, chữ thường và viết hoa toàn bộ.

Phần kết luận

Thuộc tính chuyển đổi văn bản của CSS kiểm soát cách viết hoa của văn bản và được sử dụng để thay đổi kiểu chữ của văn bản tài liệu. Thuộc tính này áp dụng cho tất cả các phần tử, trong đó các giá trị của thuộc tính này có thể là chữ hoa, chữ thường, viết hoa hoặc không. Blog này đã giải thích quy trình chuyển đổi văn bản thành chữ hoa và chữ thường bằng cách sử dụng thuộc tính CSS text-transform.