Tận dụng CSS Text Transform. Tạo văn bản viết hoa, viết thường và viết hoa. Bấm vào đây để tìm hiểu.

Bạn đang xem : chữ hoa trang trí văn bản css

Khi làm việc với văn bản, bạn sẽ muốn tận dụng nhiều tùy chọn mà CSS cung cấp. Một trong số đó là thay đổi sử dụng chữ hoa, chữ thường và viết hoa. Như bạn sẽ thấy trong ví dụ mã sau, nó rất đơn giản. Lưu ý rằng điều này sử dụng thẻ h1 và thuộc tính CSS text-biến đổi với các thuộc tính CSS3 viết hoa và CSS3 viết thường.

Liệt kê 1: Hiển thị biến đổi văn bản CSS

  & lt;! doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Tài liệu không có tiêu đề & lt; / title & gt;
& lt; phong cách & gt;
h1.uppercase {
    text-biến đổi: chữ hoa;
}
h1.lowercase {
    text-biến đổi: chữ thường;
}
h1.capitalize {
    text-biến đổi: viết hoa;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 class = "uppercase" & gt; Đây là một số văn bản cơ bản. & lt; / h1 & gt;
& lt; h1 class = "lowercase" & gt; Đây là một số văn bản cơ bản. & lt; / h1 & gt;
& lt; h1 class = "capitalize" & gt; Đây là một số văn bản cơ bản. & lt; / h1 & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra của đánh dấu html được hiển thị dưới dạng:

Như bạn có thể thấy, mẫu này sử dụng chữ hoa CSS, chữ thường CSS và viết hoa. Điều thú vị về kết quả là không quan trọng văn bản được viết như thế nào như bạn có thể thấy trong danh sách một. Văn bản buộc phải sử dụng các thuộc tính của trường hợp đã chọn.

Mặc dù rất hữu ích khi thay đổi cách viết hoa của văn bản trong tài liệu của bạn, nhưng có thể bạn sẽ muốn đi xa hơn và áp dụng các hiệu ứng bổ sung khác nhau.

Xem Thêm  Làm thế nào để căn giữa h1 trong CSS? - cách căn giữa h1 trong html

Trong danh sách 2, các thuộc tính sau đã được thêm vào thay đổi màu và các tính năng phông chữ:

  màu: # 000DFF;
phông chữ: 15px arial, sans-serif;
màu: # 9E03D9;
font-weight: bold;
font-style: xiên;
chiều cao dòng: 1,5;  

Ngoài ra, các thẻ phông chữ đã được thay đổi thành h1, h2 và P. Đây là mã:

Liệt kê 2: Thu gọn văn bản của bạn với nhiều thuộc tính CSS hơn

  & lt;! doctype html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; meta charset = "utf-8" & gt;
& lt; title & gt; Tài liệu không có tiêu đề & lt; / title & gt;
& lt; phong cách & gt;
h1.uppercase {
text-biến đổi: chữ hoa;
màu: # 000DFF;
}
h2.lowercase {
    text-biến đổi: chữ thường;
}
p.capitalize {
text-biến đổi: viết hoa;
phông chữ: 15px arial, sans-serif;
màu: # 9E03D9;
font-weight: bold;
font-style: xiên;
chiều cao dòng: 1,5;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 class = "uppercase" & gt; Đây là một số văn bản viết hoa & lt; / h1 & gt;
& lt; h2 class = "lowercase" & gt; Đây là một số văn bản viết thường & lt; / h2 & gt;
& lt; p class = "capitalize" & gt; Đây là một số văn bản được viết hoa & lt; br & gt;
Đây là một số văn bản được viết hoa & lt; br & gt;
Đây là một số văn bản được viết hoa & lt; br & gt;
Đây là một số văn bản được viết hoa & lt; br & gt;
Đây là một số văn bản viết hoa
& lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;  

Hiển thị HTML từ danh sách 2 trình duyệt của bạn dẫn đến kết quả hiển thị như sau:

Như bạn có thể thấy, mẫu này đã kết hợp việc sử dụng các thuộc tính CSS viết hoa, CSS viết thường và CSS viết hoa, cùng với các hiệu ứng phông chữ và văn bản khác. Điều này cung cấp cho bạn ý tưởng cơ bản về những gì bạn có thể làm với văn bản và phông chữ trong CSS (và còn có nhiều hơn thế nữa ).

Xem Thêm  Nối bằng Python - Cách nối vào một danh sách hoặc một mảng - thêm giá trị vào danh sách python

Giới thiệu về tác giả

Nathan Segal đã làm việc với tư cách là một nhà văn tự do trong 18 năm. Trong thời gian đó, ông đã xuất bản hơn 1.000 bài báo và đã viết 9 cuốn sách. Bạn có thể tìm hiểu thêm về anh ấy tại http://NathanSegal.org .


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

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

alt

  • Tác giả: nghiepuit
  • Ngày đăng: 2017-09-07
  • Đánh giá: 4 ⭐ ( 5038 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

[CSS] Bài 8 – Trang Trí Nội Dung Chữ

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 2836 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng ta đã sử dụng thuộc tính font-size vài lần để thay đổi kích thước của nội dung văn bản trước đó. Hãy cùng gặp gỡ một vài thuộc tính hỗ trợ trang trí nội dung chữ trong CSS. Sau đó, chúng ta sẽ…

Viết hoa văn bản bằng CSS

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 4 ⭐ ( 7483 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:
Xem Thêm  Toán tử SQL IN - sử dụng trong sql

Định Kiểu Văn Bản trong CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 7566 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS cung cấp các thuộc tính giúp định kiểu cho văn bản của phần tử HTML trên trang như: color, text-alignment, text-decoration, text-transform, text-indent, line-height, line-spacing, letter-spacing…

Hiệu ứng Text trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 9897 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiệu ứng Text trong CSS | Thuộc tính Text trong CSS | Định dạng văn bản 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.

Trang trí font chữ cho văn bản

  • Tác giả: thachpham.com
  • Đánh giá: 3 ⭐ ( 7894 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu các thuộc tính CSS thường dùng để trang trí font chữ cho văn bản là font-family, font-weight và color.

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

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