- Cỡ chữ - font-size
- Kiểu chữ - font-style
- Dày mỏng của chữ font-weight
- Biến đổi chữ với font-variant
font-size trong css - cỡ chữ trong css - cỡ chữ
Thuộc tính font-size trong CSS để thiết lập cỡ chữ.font-size trong CSS để thiết lập cỡ chữ.
font-size: size;
Trong đó size là cỡ font chữ, giá trị này có thể là:
- Cỡ chữ tuyệt đối so với cỡ chữ mặc định [medium], gồm các giá trị: xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large.
- Chỉ ra kích thước theo đơn vị mong muốn như 14px, 12pt, 1em ... [xem các đơn vị CSS]
- Số phần trăm, ví dụ 80% - là cỡ font chữ so với phần tử cha
font-size sử dụng các giá trị tuyệt đối như small, medium, large ...
Các dòng chữ, văn bản thông thường [text trong các phần tử trừ heading h2 - h6] nếu không có thiết lập về cỡ chữ thì cỡ chữ mặc định là 16px và giá trị có tên medium. Tương tự có các cỡ: xx-small [9px], x-small [10px], small [13px], medium, large [18px], x-large [24px], xx-large [32px], xxx-large [48px].16px và giá trị có tên medium. Tương tự có các cỡ: xx-small [9px], x-small [10px], small [13px], medium, large [18px], x-large [24px], xx-large [32px], xxx-large [48px].
Ví dụ có HTML và CSS như sau:
Kết quả: [biên tập code trên để xem thay đổi]
font-size với cỡ chữ chỉ rõ theo đơn vị px, em, rem ...
Bạn có thể chỉ ra cụ thể cỡ chữ cụ thể kèm đơn vị [đơn vị tuyệt đối như mm, cm, px, in, px và đơn vị tương đối như em, rem ...]. Các loại đơn vị này được nói rõ trong Đơn vị chiều dài trong CSS.
h2 {
font-size: 20px;
}
font-style kiểu chữ thẳng,chữ nghiêng trong CSS HTML kiểu chữ thẳng,chữ nghiêng trong CSS HTML
Thuộc tính font-style trong css dùng để thiết lập kiểu chữ. Với các giá trị:font-style trong css dùng để thiết lập kiểu chữ. Với các giá trị:
normalkiểu chữ bình thường [chuyển từ nghiêng sang bình thường]italicchữ nghiêng - in nghiêng css [font phải có hỗ trợ phiên bản in nghiêng]obliquenghiêng [có thể thiết lập độ nghiêng tuy nhiên tùy thuộc vảo font chữ có thiết lập được không]
Kết quả: [biên tập code trên để xem thay đổi]
font-size với cỡ chữ chỉ rõ theo đơn vị px, em, rem ... thiết lập độ dày, mỏng của chữ trong HTML CSS
Bạn có thể chỉ ra cụ thể cỡ chữ cụ thể kèm đơn vị [đơn vị tuyệt đối như mm, cm, px, in, px và đơn vị tương đối như em, rem ...]. Các loại đơn vị này được nói rõ trong Đơn vị chiều dài trong CSS.font-weight trong CSS thiết lập độ dày mỏng [đậm, nhạt] của chữ, nó có thể nhận các giá trị như normal, bold, bolder, lighter hoặc nhận giá trị số từ 1 đến 1000.
[400 tương tương normal, 700 tương đương bold - in đậm css]. Cũng tuỳ thuộc loại font chữ nạp vào, mà những thiết lập này có tác dụng hay không.
Kết quả: [biên tập code trên để xem thay đổi]
font-size với cỡ chữ chỉ rõ theo đơn vị px, em, rem ... phát sinh small-cap
Bạn có thể chỉ ra cụ thể cỡ chữ cụ thể kèm đơn vị [đơn vị tuyệt đối như mm, cm, px, in, px và đơn vị tương đối như em, rem ...]. Các loại đơn vị này được nói rõ trong Đơn vị chiều dài trong CSS.font-variant để biến đổi font chữ về dạng small-cap. Đó là chữ IN HOA của một font chữ, nhưng là phiên bản chiều cao chữ thu về nhỏ hơn sao cho bằng chiêu cao chữ in thường.
Kết quả: [biên tập code trên để xem thay đổi]
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é.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ì?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.
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 đậ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:
Đ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 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. Đâ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.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. Đâ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.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. 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. 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. in đậm trong CSS sẽ giúp bạn thiết kế website một cách tốt nhất.