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ề việc 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 : css cho tất cả chữ hoa

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
  • Nhận 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:

text-biến đổi: chữ hoa;

Xem Thêm  NGHIÊN CỨU KHOA HỌC - redefine là gì

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 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 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 in 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  Thay đổi giá trị từ điển trong Python - cách thay đổi giá trị của một khóa trong từ điển python

“Sự nghiệp Karma bước vào cuộc đời tôi khi tôi cần nó nhất và nhanh chóng giúp tôi bắt kịp với một chiến lược gia khởi nghiệp. 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 tôi 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 của 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 cho tất cả các chữ hoa

10. Tách File CSS – Định Dạng Nội Dung ( Màu Sắc – Font Chữ – Kiểu Chữ )

  • Tác giả: nghiepuit
  • Ngày đăng: 2017-09-07
  • Đánh giá: 4 ⭐ ( 4035 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: _ Video chia sẻ học lập trình HTML-CSS-JS – Khóa học dành cho người bắt đầu học lập trình web hoặc muốn chuyên sâu hơn về lập trình front end.
    _ Mong nhận được sự đóng góp ý kiến để team chúng tôi cải thiện video và chất lượng kiến thức tốt hơn.
    _ Subscribe ( đăng ký kênh ) để nhận được nhiều video hơn nữa.
    _ Liên hệ :
    Facebook : https://www.facebook.com/nghiepuit
    Mail : nghiepuit@gmail.com
    Kênh Youtube : https://www.youtube.com/channel/UCxRgDi15EJsB2ayyP-eg3Tg/playlists
Xem Thêm  HTML cho người mới bắt đầu Cách dễ dàng: Bắt đầu học HTML & CSS ngay hôm nay » - cách viết mã html

Tổng hợp các thuộc tính của CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 2193 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp và phân loại tất cả các thuộc tính của CSS theo các nhóm Color, Background và Borders, Box, Text, Fonts, Table, Animation, Transform, Transition, v.v.

Thuộc tính text-transform trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 6701 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.

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

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

Cú pháp CSS

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 3 ⭐ ( 5987 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học CSS này, bạn sẽ tìm hiểu về cú pháp CSS, cách định nghĩa và khai báo CSS trong file CSS của mình.

Sociss Class – Online Education Center

  • Tác giả: sociss.edu.vn
  • Đánh giá: 3 ⭐ ( 6803 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trình bày đầy đủ lý thuyết và cách ứng dụng tất cả kỹ thuật vùng chọn hiện có của CSS

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

  • Tác giả: hocban.vn
  • Đánh giá: 3 ⭐ ( 3502 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

By ads_php