Học HTML, CSS từ Zero Tới Hero
- Thuộc tính line-height
- Thuộc tính font-style
- Thuộc tính font-variant
- Thuộc tính font-weight
- Thuộc tính font - shorthand
Tài nguyên sử dụng trong bài học:
Thuộc tính line-height
Line-height là chiều cao dòng. Trong CSS, thuộc tính line-height được sử dụng để điều chỉnh khoảng cách giữa các dòng chữ.
Cú pháp:
.number-value {
font-size: 36px;
line-height: 1.4;
}
Giá trị của line-height có thể là số như 1, 1.2, 1.4 hay 15px, 20px, v.v. Tuy nhiên, sử dụng đơn vị tuyệt đối (15px, 20px, v.v.) cho line-height sẽ cho ra kết quả ngoài mong muốn khi thay đổi kích cỡ phông chữ.
Hiểu rõ hơn thông qua ví dụ sau:
<style>
.number-value {
/*font-size: 36px;*/
line-height: 1.4;
}
.absolute-unit {
/*font-size: 36px;*/
line-height: 20px;
}
</style>
<p class="number-value">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium ut iure eos debitis sit nam, amet adipisci dolore sapiente. Cupiditate?</p>
<p class="absolute-unit">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium ut iure eos debitis sit nam, amet adipisci dolore sapiente. </p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium ut iure eos debitis sit nam, amet adipisci dolore sapiente. Cupiditate?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium ut iure eos debitis sit nam, amet adipisci dolore sapiente.
Bỏ comment ở dòng
3và dòng8, quan sát trình duyệt để xem sự thay đổi.
Set font-size: 36px, line-height: 1.4. Khoảng cách giữa các dòng lúc này tương ứng với 36px * 1.4 = 50.4px. Nếu thay đổi giá trị font-size, khoảng cách giữa các dòng sẽ tự động được cập nhật theo.
Vì vậy, nên sử dụng giá trị số thay vì sử dụng giá trị tuyệt đối. Vì thuộc tính line-height phụ thuộc vào thuộc tính font-size. Khi thay đổi giá trị của font-size, giá trị số cũng sẽ có tỉ lệ tương ứng.
Đối với tiếng Anh, nên để line-height tối thiểu là 1.4. Tiếng Việt sẽ có thêm dấu ở trên và dưới, nên để tối thiểu từ 1.5 - 1.6.
Thuộc tính font-style
Thuộc tính font-style trong CSS được sử dụng để thay đổi kiểu chữ của văn bản. Thuộc tính này cho phép bạn chỉ định văn bản sẽ được hiển thị bằng chữ in nghiêng, chữ bình thường, v.v.
Thuộc tính có 3 giá trị:
normallà giá trị mặc định và hiển thị văn bản bằng chữ bình thường.italicđể hiển thị văn bản bằng chữ in nghiêng.obliquetương tựitalic, nhưng có thể chỉ định góc nghiêng của chữ bằng cách cung cấp một giá trị góc.
Riêng đối với giá trị oblique, bạn có thể tùy chỉnh góc nghiêng cụ thể.
Ví dụ:
<style>
.italic-text {
font-style: italic;
}
.oblique-text {
font-style: oblique 10deg;
}
</style>
<p class="italic-text">Đây là văn bản in nghiêng sử dụng Italic.</p>
<p class="oblique-text">Đây là văn bản nghiêng sử dụng Oblique.</p>
Đây là văn bản in nghiêng sử dụng Italic.
Đây là văn bản nghiêng sử dụng Oblique.
Thuộc tính font-variant
Thuộc tính font-variant trong CSS được sử dụng để xác định cách hiển thị chữ in hoa và chữ thường trong văn bản.
Giá trị mặc định là normal, chữ được hiển thị bình thường. Giá trị small-caps sẽ biến đổi các ký tự thành in hoa, và ký tự đầu tiên trông sẽ lớn hơn các ký tự còn lại.
Sự khác nhau giữa normal và small-caps:
<style>
p {
font-size: 24px;
}
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">This is the normal value</p>
<p class="small">This is the small-caps value</p>
This is the normal value
This is the small-caps value
Thuộc tính font-weight
Trong CSS, thuộc tính font-weight được sử dụng để điều chỉnh độ dày/mỏng của văn bản.
Dưới đây là các giá trị thông dụng cho font-weight:
| Giá trị | Mô tả |
|---|---|
normal |
Là giá trị mặc định và chỉ định văn bản bình thường. |
bold |
Làm văn bản dày hơn, văn bản trông được in đậm |
bolder |
Làm văn dày và có màu đậm hơn so với giá trị thừa kế từ phần tử cha |
lighter |
Làm văn bản mảnh hơn so với giá trị thừa kế từ phần tử cha. |
| Giá trị số | Giá trị có thể từ 100, 200,…900. Bước nhảy tăng dần là 100. Mảnh nhất là 100 và 900 là dày nhất. |
Giá trị mặc định của font-weight là 400.
Lưu ý, để dùng được giá trị số, cần được font-family hỗ trợ.
Giả sử, khi chọn font chữ tại Google Fonts, bạn chỉ chọn font 400, 700 thì khi sử dụng bạn chỉ có thể sử dụng được giá trị là 400 hoặc 700.
Nếu bạn chỉ chọn 2 font là 400 và 700 nhưng lại sử dụng font-weight: 900 thì trang web cũng chỉ hiển thị tối đa là 700.
Thuộc tính font - shorthand
Thuộc tính font trong CSS là cú pháp shorthand của các thuộc tính được sử dụng để làm việc với font chữ.
Cú pháp:
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
Ví dụ:
.example {
font: italic small-caps bold 16px/1.5 "Helvetica", sans-serif;
}
Lưu ý:
- Thứ tự của các giá trị không nhất thiết phải theo đúng cú pháp, nhưng cần tuân theo thứ tự từ trái sang phải.
- Hai thuộc tính
font-sizevàfont-familybắt buộc phải có khi sử dụng shorthand, nếu thiếu trình duyệt sẽ sử dụng giá trị mặc định. Các thuộc tính khác không bắt buộc. - Giữa giá trị của thuộc tính
font-sizevàline-heightcần có dấu/.
Tóm tắt
- Trong CSS, thuộc tính
line-heightđược sử dụng để điều chỉnh khoảng cách giữa các dòng chữ. - Thuộc tính
font-styledùng để xác định kiểu chữ của văn bản. Cho phép bạn chỉ định văn bản sẽ được hiển thị bằng chữ in nghiêng, chữ bình thường, v.v. - Thuộc tính
font-variantdùng để xác định cách hiển thị chữ hoa và chữ thường trong văn bản. - Thuộc tính
font-weightđược sử dụng để điều chỉnh độ dày/mỏng của văn bản. - Thuộc tính
fonttrong CSS là cú pháp shorthand của:font-style,font-variant,font-weightfont-size/line-height,font-family.
Nhận xét