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 như cách sử dụng nó qua bài viết dưới đây nhé. Mục lục 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 nội dung 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ề cải thiện SEO (Search Engine Optimization) 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, hai 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. 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 đậmCách sử dụng thẻ in đậmThuộ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: Đ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 CSSCác giá trị của thẻ in đậm trong CSSThẻ 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ư:
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. Ở bài hướng dẫn này, bạn sẽ được tìm hiểu một số thuộc tính định dạng chữ như sau:
Thiết lập KÍCH CỠ CHỮThuộc tính font-size dùng để thiết lập kích cỡ chữ của văn bản Giá trị của thuộc tính font-size có thể xác định theo đơn vị:
Lưu ý: Nếu không thiết lập kích cỡ chữ cho văn bản thì mặc định văn bản có kích cỡ chữ là 16px Thiết lập CHỮ TÔ ĐẬMThuộc tính font-weight dùng để thiết lập sự tô đậm của chữ. Thuộc tính font-weight có hai giá trị cơ bản:
Thiết lập CHỮ IN NGHIÊNGThuộc tính font-style dùng để thiết lập sự in nghiêng của chữ. Thuộc tính font-style có ba giá trị cơ bản:
Thiết lập KIỂU CHỮKhái niệm font chữ & nhóm font chữFont chữ chính là kiểu chữ, mẫu mã của chữ. Ví dụ, một số font chữ quen thuộc như: Times New Roman, Arial, Lucida Console,.... Các font chữ có cùng một vài nét tương đồng nào đó về hình dáng sẽ được xếp chung một nhóm. Có ba nhóm font chữ cơ bản là:
Bảng dưới đây là tất cả các font chữ thuộc nhóm Serif:
Bảng dưới đây là tất cả các font chữ thuộc nhóm Sans-Serif:
Bảng dưới đây là tất cả các font chữ thuộc nhóm Monospace:
Cách thiết lập kiểu chữ cho văn bảnĐể thiết lập kiểu chữ cho văn bản, ta sử dụng thuộc tính font-family với giá trị là tên font chữ. Không phải mọi trình duyệt đều hỗ trợ hết tất cả các font chữ phía trên. Để phòng trường hợp khi ta thiết lập font chữ mà trình duyệt không hỗ trợ dẫn đến việc hiển thị không như ý, ta sẽ thiết lập thêm vài font chữ khác để se cua (nếu font một không được hỗ trợ thì sẽ đến font hai, nếu font hai không được hỗ trợ thì đến font ba,....)
Xem ví dụ Lưu ý:
|