Thuộc Tính Font-weight Trong CSS - Quách Quỳnh

Trang chủ » Bôi đậm Chữ Trong Css » Thuộc Tính Font-weight Trong CSS - Quách Quỳnh

Có thể bạn quan tâm

Skip to content Close Menu
  • Học WordPress cơ bản cho người mới bắt đầu
  • Sample Page
Home Học CSS Thuộc tính font-weight trong CSS

Font-weight trong CSS là gì?

Thuộc tính font-weight dùng để thiết lập giá trị đậm, mỏng hoặc bình thường của chữ trong CSS. Mặc định của văn bản sẽ là normal.

Cách sử dụng Font-weight

Cú pháp:

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

Các giá trị:

  • normal: Giá trị mặc định. Đây là kiểu văn bản thường
  • bold: giá trị chữ đậm hơn
  • bolder: giá trị chữ in đậm nhất
  • lighter: giá trị nhẹ hơn normal
  • number: giá trị các ký tự từ mỏng đến dày. 400 giống như bình thường và 700 giống như in đậm
  • initial: đặt thuộc tính này thành giá trị mặc định
  • inherit: thường hưởng từ phần tử cha

Hãy thử ví dụ sau:

<!DOCTYPE html> <html> <head> <style> p.normal { font-weight: normal; } p.light { font-weight: lighter; } p.thick { font-weight: bold; } p.thicker { font-weight: 900; } </style> </head> <body> <h1>Ví dụ về font weight</h1> <p class="normal">Đoạn văn bản bình thường</p> <p class="light">Đoạn văn bản mỏng hơn</p> <p class="thick">Đoạn văn bản đậm</p> <p class="thicker">Đoạn văn bản đậm nhất</p> </body> </html>

font-weight

Khi làm việc với văn bản trong CSS có nhiều thuộc tính liên quan. Nhưng font weight sẽ giúp cho việc tự động thiết lập giá trị cho một phần tử được chọn. Chẳng hạn khi thiết kế trang web bạn sẽ có hai đoạn văn bản nhưng mỗi cái lại đặt class khác nhau. Vì thế khi áp CSS vào thì giá trị cũng không giống nhau.

Quachquynh

Related Posts

Hover-CSS-1 Học CSS

Hiệu ứng rê chuột trong CSS

Quachquynh · Tháng ba 24, 2022 · Comments off

CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay…

Học CSS

Mẫu Form đăng nhập HTML và CSS đẹp mắt

Quachquynh · Tháng ba 16, 2022 · Comments off

Trong một số bài viết trên blog này mình đã chia sẻ về cách tạo một Form đăng nhập đơn giản. Nhưng để có một Form đẹp…

form-lien-he-4 Học CSS

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Quachquynh · Tháng ba 11, 2022 · Comments off

Form liên hệ là một chức năng không thể thiếu cho blog, website. Thông qua Form độc giả, khách hàng có thể yêu cầu admin trợ giúp…

css-code-1 Học CSS

8 Cách viết CSS chuẩn, dễ đọc và tối ưu

Quachquynh · Tháng hai 23, 2022 · Comments off

Nói tới xây dựng giao diện phía Front-end không thể thiếu CSS. Ngôn ngữ được sử dụng phổ biến để sắp xếp bố cục các phần tử…

Học CSS

Thuộc tính text-shadow trong CSS

Quachquynh · Tháng hai 23, 2022 · Comments off

Trong những lúc rảnh rỗi mình thường hay nghịch ngợm một vài thứ hay ho tìm thấy trên internet. Đối với CSS thì text-shadow cũng là thuộc…

Học CSS

Thuộc tính Overflow trong CSS

Quachquynh · Tháng hai 23, 2022 · Comments off

Khi thiết kế web với HTML và CSS đôi khi chúng ta sẽ gặp phải tình trạng văn bản (text) bị tràn ra khỏi phần tử HTML…

Danh mục chính

  • Flatsome
  • Frame Work
  • Học CSS
  • Học HTML
  • Javascript
  • Lập Trình Theme Wordpress
  • PHP
  • Hướng dẫn SEO
  • Thủ Thuật
  • Thủ Thuật Facebook
  • Thủ Thuật Máy Tính
  • Web Development
  • Wordpress

Từ khóa » Bôi đậm Chữ Trong Css