Tất cả chữ hoa trong CSS – Cách viết hoa văn bản có kiểu dáng – văn bản thành chữ hoa css

Khi bạn đang thiết kế một trang web hoặc làm việc trong một dự án, bạn có thể muốn sử dụng văn bản viết hoa vì nhiều lý do khác nhau. Có thể bạn muốn sử dụng chữ viết tắt hoặc từ viết tắt, nhấn mạnh văn bản nhất định hoặc sử dụng nó cho các tiêu đề. Có nhiều cách để viết hoa văn bản trong HTML. Cách đầu tiên là

Bạn đang xem: chuyển văn bản thành chữ hoa css

Khi bạn đang thiết kế một trang web hoặc làm việc trong một dự án, bạn có thể muốn sử dụng văn bản chữ hoa vì nhiều lý do. Có thể bạn muốn sử dụng chữ viết tắt hoặc từ viết tắt, nhấn mạnh văn bản nhất định hoặc sử dụng nó cho các tiêu đề.

Có nhiều cách để viết hoa văn bản trong HTML. Cách đầu tiên là mã hóa văn bản viết hoa trong HTML:

  & lt; p & gt; UPPERCASE TEXT & lt; / p & gt;
 

Cách thứ hai là sử dụng phương thức Chuỗi JavaScript toUpperCase () và hiển thị nó trên DOM:

  const upper = string.toUpperCase ()

// sau đó kết xuất
 

Cách thứ ba, chúng ta sẽ xem xét trong bài viết này, là sử dụng thuộc tính CSS text-biến đổi .

Cách sử dụng biến đổi văn bản trong CSS

Bạn có thể sử dụng thuộc tính CSS text -formation để viết hoa văn bản ở các dạng khác nhau. Thuộc tính này có thể sửa đổi văn bản thành chữ hoa , chữ thường hoặc viết hoa (để mỗi từ bắt đầu bằng một chữ cái viết hoa và các ký tự còn lại trong từ vẫn giữ nguyên dạng ban đầu của chúng).

Xem Thêm  Tạo yêu cầu đăng AJAX JavaScript: Có và không có jQuery - ví dụ về bài đăng javascript ajax

Để chuyển văn bản thành chữ hoa trong CSS, hãy sử dụng khai báo kiểu sau:

  phần tử-selector {
  text-biến đổi: chữ hoa;
}
 

Điều này định kiểu văn bản trong phần tử đã chọn thành chữ hoa.

Khai báo này không thay đổi nội dung của DOM. Ví dụ: hãy xem mã HTML này:

  & lt; p class = 'paragraph' & gt;
  Một số tiếp theo
& lt; / p & gt;
 

Và phong cách này:

 . Đoạn {
  text-biến đổi: chữ hoa;
}
 

Trên giao diện người dùng, văn bản được tạo kiểu như sau:

image-137

Nhưng trong DOM, văn bản vẫn giống như sau:

image-139

Khi bạn sao chép văn bản trên trình duyệt, văn bản gốc “Một số văn bản” sẽ được sao chép trong một số trình duyệt, nhưng ở một số trình duyệt khác, phiên bản theo kiểu sẽ được sao chép.

Bạn nên sử dụng biến đổi văn bản trong CSS hay các phương pháp khác?

Nếu bạn đang sử dụng chữ hoa cho mục đích tạo kiểu, tôi khuyên bạn nên sử dụng CSS. Lý do là có thể có sự mâu thuẫn trong cách các trình duyệt và công cụ trình duyệt khác nhau xử lý văn bản viết hoa.

Một điểm mâu thuẫn là sự khác biệt về cách sao chép mà tôi đã đề cập trước đó.

Một điểm mâu thuẫn khác là một số trình đọc màn hình giải thích văn bản chữ hoa là chữ viết tắt. Vì vậy, một văn bản như “MỘT SỐ VĂN BẢN” sẽ được đọc là “S.O.M.E T.E.X.T”, điều này có thể ảnh hưởng đến cách người đọc hiểu một tin nhắn.

Xem Thêm  Các cách khác nhau để truy cập các phần tử HTML bằng JavaScript - javascript lấy phần tử theo thẻ

Mặc dù, điều đáng chú ý là một số trình đọc màn hình cũng giải thích văn bản viết hoa bằng CSS là chữ viết tắt.

Tuy nhiên, chúng tôi khuyên bạn nên giữ các kiểu như các kiểu. Nếu bạn muốn có văn bản viết hoa chỉ cho mục đích tạo kiểu, hãy sử dụng CSS và có văn bản gốc trong HTML. Nhưng nếu bạn đang sử dụng chữ hoa cho các chữ viết tắt hoặc một lý do cụ thể để viết chữ hoa, bạn có thể mã hóa nó trong HTML.

Bạn có thể tham khảo tweet này về cách viết hoa không có CSS ​​ để xem các cuộc thảo luận xung quanh nó.


Xem thêm những thông tin liên quan đến chủ đề văn bản thành chữ hoa css

CSS Text – Các thuộc tính định dạng văn bản trong CSS

alt

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2021-08-17
  • Đánh giá: 4 ⭐ ( 9499 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu các thuộc tính định dạng văn bản trong CSS: color, text-align, text-align-last, text-decoration, text-transform, letter-spacing, word-spacing, text-shadow…
    Nếu bạn thấy nội dung video giá trị và hữu ích, hãy ủng hộ mình một ly cà phê nhé.
    Rất mong nhận được sự động viên từ các bạn. Một chút khích lệ từ người xem sẽ là động lực to lớn để mình tiếp tục phát triển kênh.
    BIDV: 21510002210466
    Vietcombank: 0451000308735
    hoặc qua ví điện tử momo, zalopay, shoppeepay: https://bit.ly/ViDienTu
    html css nguyenthithuylien

Thuộc tính Text trong CSS, chiều cao, kích cỡ và màu sắc chữ CSS

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 4 ⭐ ( 5599 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: thuoc tinh text trong css, Thuộc tính Text trong CSS, chiều cao, kích cỡ và màu sắc chữ CSS
Xem Thêm  Nhận giá trị của nút radio Onclick - nút radio javascript onclick

Làm thế nào để làm cho chữ hoa trong CSS?

  • Tác giả: vi.birmiss.com
  • Đánh giá: 5 ⭐ ( 5494 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Text trong CSS

  • Tác giả: comdy.vn
  • Đánh giá: 3 ⭐ ( 8019 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho văn bản trên các trang web của mình bằng CSS.

Chuyển đổi văn bản CSS viết hoa trên tất cả các chữ hoa

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 6949 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Không có cách nào để làm điều này với CSS, bạn có thể sử dụng PHP…

Chuyển đổi văn bản CSS viết hoa tất cả các chữ hoa

  • Tác giả: vi.etsoutdoors.com
  • Đánh giá: 4 ⭐ ( 3839 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây là HTML của tôi: mũ nhỏ & TẤT CẢ CHỮ HOA Đây là CSS của tôi: .link {text-biến đổi: capitalize;} Kết quả đầu ra là: …

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

  • Tác giả: hocban.vn
  • Đánh giá: 3 ⭐ ( 4063 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để 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ừ.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình