CSS chuyển đổi văn bản

Hướng dẫn CSS này giải thích cách sử dụng thuộc tính CSS được gọi là chuyển đổi văn bản với cú pháp và ví dụ

Sự mô tả

Thuộc tính text-transform CSS xác định cách viết hoa văn bản của một phần tử như chữ hoa, chữ thường, viết hoa

cú pháp

Cú pháp của thuộc tính CSS chuyển đổi văn bản là

text-transform: value;

Tham số hoặc Đối số

Chữ hoa của một phông chữ. Nó có thể là một trong những điều sau đây

ValueDescriptionuppercaseTất cả các chữ cái được chuyển thành chữ hoa
p { text-transform. chữ hoa; . chữ thường; . viết hoa; . không ai; . thừa kế;
p { text-transform: lowercase; }capitalizeFirst letter of each word is converted to uppercase
p { text-transform: capitalize; }noneCapitalization of letters are not changed
p { text-transform: none; }inheritElement will inherit the text-transform from its parent element
p { text-transform: inherit; }

Ghi chú

• Nếu chọn viết hoa làm chuyển đổi văn bản, chữ cái đầu tiên của mỗi từ được viết hoa trong khi tất cả các chữ cái khác không thay đổi
• Thuộc tính chuyển đổi văn bản CSS là một cách tuyệt vời để làm cho các tiêu đề của bạn viết hoa mà không cần phải chỉnh sửa các trang HTML

tính tương thích của trình duyệt web

Thuộc tính chuyển đổi văn bản CSS có hỗ trợ cơ bản với các trình duyệt sau

• Trình duyệt Chrome
• Android
• Firefox (Tắc kè)
• Firefox Di động (Tắc kè)
• Internet Explorer (IE)
• điện thoại IE
• Ô-pê-ra
• Opera di động
• Safari (WebKit)
• Safari di động

Thí dụ

Chúng ta sẽ thảo luận về thuộc tính text-transform bên dưới, khám phá các ví dụ về cách sử dụng thuộc tính này trong CSS

Sử dụng chữ hoa

Hãy xem một ví dụ về chuyển đổi văn bản CSS nơi chúng tôi đặt chuyển đổi văn bản thành chữ hoa

h1 { text-transform: uppercase; }

Trong ví dụ chuyển đổi văn bản CSS này, chúng tôi đã sử dụng thuộc tính chuyển đổi văn bản CSS để viết hoa chữ cái đầu tiên của mỗi từ trong văn bản của lớp author_name

Thuộc tính CSS này cho phép chúng tôi thay đổi trường hợp của văn bản. Nó được sử dụng để kiểm soát viết hoa văn bản. Thuộc tính CSS này có thể được sử dụng để hiển thị văn bản ở dạng toàn chữ thường hoặc toàn chữ hoa hoặc có thể chuyển đổi ký tự đầu tiên của mỗi từ thành chữ hoa

cú pháp

Hãy thảo luận về các giá trị thuộc tính của nó cùng với một ví dụ

viết hoa

Nó biến ký tự đầu tiên của mỗi từ thành chữ hoa. Nó sẽ không viết hoa chữ cái đầu tiên sau số. Nó chỉ ảnh hưởng đến các chữ cái đầu tiên của từ thay vì thay đổi các chữ cái còn lại trong từ

Nếu chúng ta áp dụng thuộc tính viết hoa cho một từ đã có chữ in hoa, thì các chữ cái của từ đó sẽ không chuyển sang chữ thường

Bạn có thể kiểm soát cách văn bản được viết hoa bằng các thuộc tính CSS. Có rất nhiều 'thủ thuật' sử dụng CSS text-transform để thay đổi cách hiển thị văn bản của bạn

Không có mã html nào cho tất cả chữ hoa hoặc chữ thường, chữ hoa tiêu đề. Tất cả được thực hiện bằng CSS

Cho đến gần đây, tôi chưa từng sử dụng CSS để quản lý cách viết hoa được áp dụng, giúp tôi lưu trữ dữ liệu bằng các ký tự chữ thường. Tôi thấy tốt hơn là sử dụng tất cả các ký tự chữ thường cho dữ liệu vì sau đó tôi có thể chuyển đổi các trường khi cần cho các ứng dụng khác nhau

Ví dụ: tôi có xu hướng sử dụng tiêu đề bài viết của mình làm sên url. Tôi chạy tiêu đề thông qua một biểu thức chính quy để viết thường các ký tự, xóa các ký tự url không hợp lệ và thay thế bất kỳ khoảng trắng nào bằng '-'

Bằng cách sử dụng thuộc tính chuyển đổi văn bản CSS, bạn có thể đặt tiêu đề bằng chữ hoa, chữ hoa và chữ thường. Kết hợp các thuộc tính chuyển đổi văn bản với các bộ chọn giả, bạn có thể thực hiện nhiều tùy chỉnh hơn nữa để làm cho các trang của bạn nổi bật so với đối thủ

• Thuộc tính chuyển đổi văn bản CSS
• Làm thế nào để bạn làm cho mỗi từ trong một chuỗi hoặc văn bản bắt đầu bằng chữ in hoa hoặc viết hoa tiêu đề cho văn bản?
• Bản tóm tắt

Thuộc tính chuyển đổi văn bản CSS

Thuộc tính chuyển đổi văn bản CSS là chìa khóa để quản lý kết xuất chữ hoa và chữ thường của văn bản. Có 5 giá trị khác nhau mà bạn có thể sử dụng

1. chữ thường. biến tất cả các chữ cái trong văn bản đã chọn thành chữ thường
2. chữ hoa. làm cho tất cả các chữ cái trong văn bản được chọn viết hoa hoặc TẤT CẢ CÁC CHỮ HOA
   
3. viết hoa. viết hoa chữ cái đầu tiên của mỗi từ trong văn bản đã chọn
   
4. không ai. để nguyên cách viết hoa và cách viết hoa chính xác như khi nhập
   
5. thừa kế. cung cấp cho văn bản trường hợp và viết hoa của cha mẹ của nó
   
6. chiều rộng đầy đủ. Là một từ khóa buộc phải viết một ký tự (chủ yếu là chữ tượng hình và chữ viết Latinh) bên trong một hình vuông, cho phép chúng được căn chỉnh trong các chữ viết Đông Á thông thường
   

chữ thường CSS

Sử dụng giá trị chữ thường buộc văn bản hoặc phông chữ được hiển thị bằng các ký tự chữ thường

p {
 text-transform: lowercase; 
}

ĐÂY LÀ MỘT CÂU LẠI CÓ THỂ LÀM MỀM MẠI BẰNG CÁCH SỬ DỤNG CHỮ HOA

Chữ hoa CSS - Cách viết hoa tất cả các chữ cái trong Word

Sử dụng giá trị chữ hoa buộc văn bản hoặc phông chữ được hiển thị bằng các ký tự chữ hoa

ví dụ này chuyển đổi tất cả chuỗi chữ thường thành chữ hoa

p {
 text-transform: uppercase; 
}

Làm thế nào để bạn làm cho mỗi từ trong một chuỗi hoặc văn bản bắt đầu bằng chữ in hoa hoặc viết hoa tiêu đề cho văn bản?

Trường hợp tiêu đề là nơi mỗi từ trong một câu hoặc chuỗi bắt đầu bằng một chữ in hoa. Giá trị viết hoa làm cho một chuỗi hiển thị trong trường hợp tiêu đề hoặc ít nhất mỗi từ bắt đầu bằng một chữ in hoa

Nếu một chữ cái trong văn bản được định dạng là chữ hoa, nó sẽ không viết thường chữ cái để tạo thành chữ hoa tiêu đề phù hợp

VĂN BẢN NGUỒN NÀY LÀ TẤT CẢ CÁC NƠI CÓ CHỮ THƯỜNG VÀ CHỮ HOA. nhưng Mỗi từ đều bắt đầu bằng một CHỮ HOA

ví dụ này là một ví dụ trường hợp tiêu đề thích hợp hơn

p {
 text-transform: capitalize; 
}

Chú ý đoạn đầu tiên, với sự kết hợp ngẫu nhiên của các ký tự viết hoa và viết thường, không viết thường tất cả các ký tự?

Ngay bây giờ không có sẵn giá trị chữ cái. Thay vào đó, bạn nên cẩn thận viết thường nguồn trước khi kết xuất

Sử dụng Bộ chọn Giả để Áp dụng chuyển đổi văn bản cho Chữ cái Đầu tiên

Một tính năng tương đối hiện đại có sẵn cho bộ chọn CSS là khái niệm về bộ chọn giả. Bạn có thể dùng. bộ chọn chữ cái đầu tiên để áp dụng một kiểu khác cho ký tự đầu tiên của chuỗi

Điều này cho phép bạn áp dụng một số kiểu dáng 'lạ mắt' nếu bạn muốn. Hãy nghĩ về nó như một cách để tạo ra bức thư pháp ảnh hưởng đến chữ cái đầu tiên của một chương lớn và mang tính trang trí

Trong ví dụ này, chuyển đổi văn bản chữ thường được áp dụng cho câu. Sau đó. bộ chọn chữ cái đầu tiên được sử dụng để áp dụng kiểu dáng tùy chỉnh cho chữ cái đầu tiên của đoạn văn. Cụ thể, chữ cái đầu tiên là chữ hoa, lớn hơn và được áp dụng một họ phông chữ khác

p {
 text-transform: lowercase;
 line-height: 3; 
} 

p::first-letter {
 text-transform: uppercase;
 font-size: 3em;
 font-weight: bold;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; letter-spacing: 5px; 
}

VĂN BẢN NGUỒN NÀY LÀ TẤT CẢ CÁC NƠI CÓ CHỮ THƯỜNG VÀ CHỮ HOA. but the first word Bắt đầu với một LỚN CHỮ VỐN. Đây là câu thứ hai

Bản tóm tắt

Như bạn có thể thấy, bạn có thể kiểm soát cách hiển thị văn bản bằng thuộc tính text-transform. Biết rằng bạn có thể kiểm soát cách văn bản của mình được viết hoa có nghĩa là bạn có thể lưu trữ văn bản dưới dạng chữ thường

Một ưu điểm khác mà thuộc tính chuyển đổi văn bản CSS cho phép là loại bỏ JavaScript để chuyển đổi các ký tự. CSS sẽ là một công việc hiệu quả hơn nhiều khi viết hoa các ký tự trong trình duyệt

công dụng của văn bản là gì

Giá trị của văn bản là gì

Viết hoa trong CSS là gì?