CSS All Caps: Hướng dẫn từng bước – css tất cả các chữ cái viết hoa

Các nhà phát triển có thể sử dụng CSS để viết hoa tất cả các chữ cái theo một cách nào đó. Ở đây, chúng ta sẽ nói về cách tạo chữ hoa cho văn bản bằng cách sử dụng thuộc tính text-biến đổi và tạo chữ hoa nhỏ cho văn bản bằng cách sử dụng thuộc tính font-variant.

Bạn đang xem : viết hoa tất cả các chữ cái

Christina Kopecky
– Ngày 29 tháng 12 năm 2020

Thuộc tính CSS 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ỳ phần tử 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 Tất cả 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ìm kết hợp Bootcamp của bạn

  • Career Karma phù hợp với bạn với những chiến dịch khởi động công nghệ hàng đầu
  • Tiếp cận các học bổng độc quyền và các khóa học luyện thi

Chọn sở thích của bạn

Họ

Họ

E-mail

Số điện thoại

Bằng cách tiếp tục, bạn đồng ý với

Điều khoản dịch vụ



Chính sách bảo mật

, và bạn đồng ý nhận các đề nghị và cơ hội từ Career Karma qua điện thoại, tin nhắn văn bản và email.

Để 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:

Xem Thêm  Tìm hiểu cách thêm cột trong SQL với ví dụ - sql tạo một cột mới

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 mỗi từ thành chữ hoa trong một phần tử văn bản.
  • lowercase: Đặt văn bản thành chữ thường.
  • viết hoa: Viết hoa mỗi 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 chuyển đổi văn bản đang hoạt động.

Ví dụ về tất 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.

Để 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:

 & lt; html & gt;
 
 & lt; đầu & gt;
   & lt; phong cách & gt;
     P {
       text-biến đổi: chữ hoa;
     }
   & lt; / style & gt;
 & lt; / head & gt;
 & lt; body & gt;
 
   & lt; p & gt; cái này được viết hoa toàn bộ & lt; / p & gt;
 & lt; / body & gt;
& lt; / html & gt; 

Tất cả các chữ cái trong văn bản đã chọn sẽ xuất hiện ở dạng chữ hoa.

Đầu tiên, chúng tôi xác định & lt; head & gt; nhãn. Thẻ này bao gồm & lt; style & gt; nhãn. Chúng tôi sử dụng thẻ kiểu này để thêm quy tắc chuyển đổi văn bản của chúng tôi vào trang. Chúng ta có thể sử dụng bảng định kiểu CSS bên ngoài nhưng vì ví dụ này quá ngắn nên chúng tôi không nhất thiết phải cần.

Trong phần & lt; body & gt; , chúng tôi xác định một đoạn văn. Đoạn văn này sẽ xuất hiện bằng tất cả các chữ cái viết hoa mặc dù chúng ta đã viết câu trong dạng câu. Chúng tôi biết điều này vì thuộc tính biến đổi văn bản áp dụng cho tất cả

HTML & lt; p & gt; thẻ

trên trang web của chúng tôi.

Xem Thêm  Bộ chọn jQuery - bộ chọn trong jquery là gì

“Sự nghiệp Karma bước vào đời tôi khi tôi cần nó nhất và nhanh chóng giúp tôi có được một chiến thắng. Hai tháng sau khi tốt nghiệp, tôi đã tìm được công việc mơ ước phù hợp với giá trị và mục tiêu của tôi trong cuộc sống!”

Venus, Kỹ sư phần mềm tại Rockbot

Một Word trên biến thể phông chữ: small-caps;

Nếu bạn muốn các đặc điểm của chữ hoa tiêu đề nhưng cũng sử dụng chữ thường, bạn có thể sử dụng font-variant: smallcaps. Trường hợp tiêu đề đề cập đến một câu mà chữ cái đầu tiên của mỗi từ xuất hiện bằng chữ in hoa.

Dưới đây là một ví dụ về quy tắc phông chữ-biến thể đang hoạt động:

 & lt; head & gt;
   & lt; phong cách & gt;
     P {
       font-variant: small-caps;
     }
   & lt; / style & gt;
 & lt; / head & gt;
 & lt; body & gt;
 
   & lt; p & gt; cái này được viết hoa toàn bộ & lt; / p & gt;
 & lt; / body & gt;
& lt; / html & gt; 

Sự kết luận

Thuộc tính text-biến đổi cung cấp cho chúng ta tùy chọn để đặt tất cả văn bản ở dạng chữ hoa của phần tử. Thuộc tính font-variant cung cấp cho chúng tôi tùy chọn để làm cho tất cả văn bản viết hoa nhỏ xuất hiện chữ hoa với chiều cao chữ cái của các chữ cái viết hoa nhỏ.

Các quy tắc này quy định thêm hai công cụ trong hộp công cụ của bạn để định dạng văn bản trong HTML.

Bạn có muốn tìm hiểu thêm về cách viết mã trong HTML? Đọc của chúng tôi

Hướng dẫn cách học HTML

. Bạn sẽ tìm thấy lời khuyên về các khóa học, sách và tài nguyên học tập hàng đầu cũng như các mẹo về cách tiếp tục hành trình học tập của mình.


Xem thêm những thông tin liên quan đến chủ đề css tất cả các chữ cái viết hoa

Bảng chữ cái viết hoa ( Mẫu chữ được điều chỉnh sao cho dễ viết, các nét bám ô li hoặc ra giữa )

  • Tác giả: Cô Ngọc Vân
  • Ngày đăng: 2021-02-25
  • Đánh giá: 4 ⭐ ( 2505 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn nào cần hướng dẫn chi tiết mà đơn giản ,dễ hiểu từng nét chữ hãy liên hệ zalo theo số điện thoại : 0769203155 ngay nhé!
    CôNgọcVân

    Bảng chữ cái, Tập viết, Luyện chữ đẹp, chữ viết hoa, Cách viết đẹp và đơn giản nhất

Chữ cái viết hoa trong html và css

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

Tất tần tật các trường hợp bắt buộc phải viết hoa trong VBQPPL

  • Tác giả: thuvienphapluat.vn
  • Đánh giá: 3 ⭐ ( 9525 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chính phủ ban hành Nghị định 154/2020/NĐ-CP sửa đổi Nghị định 34/2016/NĐ-CP hướng dẫn Luật Ban hành văn bản quy phạm pháp luật , có hiệu lực thi hành từ ngày 01/01/2021.

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 ⭐ ( 3997 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à: …

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 ⭐ ( 9461 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…

Thuộc tính text-transform trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 4215 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính text-transform trong CSS – Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Thuộc tính text-transform

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 9009 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính text-transform thiết lập các ký tự viết hoa cho văn bản – Học web chuẩn

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

Xem Thêm  CHỌN trong MySQL - mysql trong truy vấn chọn