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
3
và 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ị:
normal
là 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.oblique
tươ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-size
vàfont-family
bắ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-size
vàline-height
cầ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-style
dù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-variant
dù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
font
trong CSS là cú pháp shorthand của:font-style
,font-variant
,font-weight
font-size
/line-height
,font-family
.
Nhận xét