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 Got It 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.

https://d1iv5z3ivlqga1.cloudfront.net/wp-content/uploads/2021/04/29235048/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
February 07, 2021
Share this post to:
Tags:
CSS
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
CSS là gì? Kinh nghiệm giúp bạn tự học CSS tại nhà không nên bỏ qua!

CSS là gì? Kinh nghiệm giúp bạn tự học CSS tại nhà không nên bỏ qua!

Tự học CSS là một quy trình không có điểm dừng, vì thế những người mới bắt đầu sẽ dễ bị rối trong thư viện kiến thức về CSS. Vậy tự học CSS nên bắt đầu với những điều gì? Cùng tìm hiểu nhé! Mục lụcCSS là gì?Bạn nên chuẩn bị gì trước khi tự […]
CSS là gì? Tìm hiểu về chú thích trong CSS

CSS là gì? Tìm hiểu về chú thích trong CSS

Chú thích trong CSS thường được sử dụng để giải thích các đoạn mã trong CSS. Nó rất hữu ích khi bạn hoặc người khác đọc lại các đoạn mã đã viết ra. Bài viết dưới đây sẽ cung cấp tới bạn những thông tin cơ bản về CSS nói chung và tìm hiểu về […]
8 lưu ý khi thực hiện cách viết CSS tiêu chuẩn

8 lưu ý khi thực hiện cách viết CSS tiêu chuẩn

Để người dùng có những trải nghiệm tốt nhất, các developer luôn cần phải tìm hiểu và biết cách tối ưu hóa tốc độ xử lý dữ liệu website thông qua cách viết CSS tốt nhất. Bên cạnh đó, các yếu tố cơ bản như HTML, Javascript cũng như các hình ảnh cũng cần được […]
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 Got It tìm hiểu […]
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ý […]