Thuộc tính in đậm trong CSS và cách sử dụng

Có rất nhiều cách khác nhau để in đậm một đoạn text trên trang web. Ngoài việc sử dụng thẻ bold hoặc strong, bạn có thể sử dụng thẻ in đậm trong CSS. Thuộc tính in đậm của CSS giúp bạn có nhiều lựa chọn hơn so với HTML. Hãy cùng tìm hiểu về thẻ in đậm trong CSS cùng cách sử dụng nó qua bài viết dưới đây.

1. Thẻ in đậm trong CSS là gì?

Khi thiết kế một website, việc in đậm một đoạn text giúp người dùng chú ý hơn vào đoạn text này. Đây là cách hữu ích để truyền đạt một thông tin quan trọng cho người đọc. In đậm một đoạn text cũng có công dụng về SEO website. Các từ khóa được in đậm sẽ giúp công cụ tìm kiếm đánh giá tầm quan trọng cao hơn khi index website. Để in đậm một đoạn text, thông thường bạn hay sử dụng thẻ bold và thẻ strong trong HTML. Tuy nhiên, 2 thẻ này có khá ít lựa chọn và không dễ thao tác đối với lập trình viên.

in đậm trong CSS
Thẻ in đậm trong CSS là gì?

Một trong những cách tối ưu hơn để in đậm text là sử dụng thẻ in đậm trong CSS. Thẻ in đậm text trong CSS là thẻ font-weight. Thẻ này sẽ giúp thay đổi độ mỏng và dày của chữ tùy theo mục đích của lập trình viên. Thẻ font-weight mang lại rất nhiều lựa chọn cho bạn so với thẻ bold và strong trong HTML. Thuộc tính font-weight được hỗ trợ bởi hầu hết các trình duyệt như Chrome, Firefox, Safari,…

2. Cách sử dụng thẻ in đậm

Cách sử dụng thẻ in đậm
Cách sử dụng thẻ in đậm

Thuộc tính in đậm được sử dụng giống như hầu hết các thuộc tính CSS khác. Để sử dụng thuộc tính này, đầu tiên bạn hãy lựa chọn đoạn text mà mình muốn in đậm. Bạn có thể in đậm cả đoạn văn bản, hoặc sử dụng span để in đậm một text nhỏ. Bạn hãy tham khảo đoạn code mẫu dưới đây:

p {

font-weight: bold;

}

Đoạn code trên sẽ in đậm toàn bộ văn bản p của website. “font-weight” là tên thuộc tính in đậm trong CSS. Còn “bold” là giá trị in đậm. Bạn có thay thế giá trị “bold” bằng các giá trị khác tùy theo mục đích.

3. Các giá trị của thẻ in đậm trong CSS

thẻ in đậm là gì
Các giá trị của thẻ in đậm trong CSS

Thẻ in đậm có rất nhiều giá trị khác nhau. Bạn có thể thay đổi độ mỏng và dày của đoạn text bằng các giá trị này. Thẻ font-weight trong CSS thường có các giá trị như:

  • normal: Đây là giá trị mặc định của thẻ font-weight. Đoạn text sẽ được hiển thị với độ dày mặc định của trình duyệt web.
  • bold: Giá trị này sẽ hiển thị đoạn text đậm hơn so với bình thường.
  • bolder: Đây là giá trị hiển thị đoạn text đậm hơn so với giá trị bold.
  • lighter: Giá trị lighter của thẻ in đậm sẽ hiển thị đoạn text mỏng hơn so với normal.
  • 100,200,…,900: Bạn có thể nhập các giá trị này vào để tùy chỉnh độ dày của đoạn text.
  • Inherit: Giá trị này sẽ kế thừa độ đậm của thành phần mẹ bao quanh đoạn text.

Thuộc tính in đậm là cách hữu hiệu để in đậm một đoạn text của website. Bạn có thể tùy chỉnh độ đậm nhạt của văn bản với nhiều giá trị của thẻ font-weight. Thẻ in đậm trong CSS sẽ giúp bạn thiết kế website một cách tốt nhất.

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

branding
branding
February 07, 2021
0
Share this post to:
Tags:
css
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Thuộc tính in đậm trong CSS và cách sử dụng

Thuộc tính in đậm trong CSS và cách sử dụng

Có rất nhiều cách khác nhau để in đậm một đoạn text trên trang web. Ngoài việc sử dụng thẻ bold hoặc strong, bạn có thể sử dụng thẻ in đậm trong CSS. Thuộc tính in đậm của CSS giúp bạn có nhiều lựa chọn hơn so với HTML. Hãy cùng tìm hiểu về thẻ […]
Những kiến thức học CSS cơ bản bạn cần biết

Những kiến thức học CSS cơ bản bạn cần biết

Học CSS cơ bản bao gồm nhiều vấn đề như: cú pháp, màu sắc, font, hình ảnh… Liệu bạn đã nắm được những kiến thức cơ bản này chưa? Bài viết dưới đây sẽ giúp bạn nắm được một số vấn đề nền tảng nhất! Mục lụcCú pháp của CSS cơ bảnTìm hiểu về đơn […]
Cách sử dụng CSS trong HTML và thuộc của tính CSS

Cách sử dụng CSS trong HTML và thuộc của tính CSS

CSS là ngôn ngữ tạo phong cách cho trang web. Biết cách sử dụng CSS trong HTML, ta có thể định dạng ra các phần tử HTML thật đặc biệt và chuyên nghiệp. Bài viết sau đây sẽ giúp bạn hiểu hơn về CSS cũng như cách sử dụng nó. Mục lụcKhái niệm về CSSLý […]
HTML và CSS có gì khác nhau?

HTML và CSS có gì khác nhau?

Nếu ta ví HTML giống như bộ khung của một trang web, thì CSS chính là phần da thịt đắp lên để hoàn thiện giao diện cho website đó. HTML và CSS vốn là hai ngôn ngữ hoàn toàn độc lập với nhau, giữa chúng tồn tại rất nhiều điểm khác biệt mà bạn nên […]
Làm thế nào để thêm tệp CSS trong HTML?

Làm thế nào để thêm tệp CSS trong HTML?

CSS và HTML vốn là 2 ngôn ngữ hoàn toàn độc lập. Thêm tệp CSS trong HTML chính là cách tốt nhất để tạo nên sự giao tiếp giữa chúng. Trong bài viết dưới đây, bạn sẽ biết được những cách thức thường được sử dụng để kết nối một tệp CSS với HTML.  Mục […]
CSS framework là gì? Các CSS framework tốt nhất hiện nay

CSS framework là gì? Các CSS framework tốt nhất hiện nay

CSS framework là gì? Công cụ này đã trở nên vô cùng thông dụng trong giới lập trình viên nhờ ưu điểm về sự thuận tiện và tiết kiệm thời gian thiết kế website vô cùng hiệu quả. Dưới đây là định nghĩa CSS framework và danh sách những framework tốt nhất dành cho frontend […]