- Trang chủ
- Tham khảo
- CSS
- Thuộc tính font
Định nghĩa và sử dụngThuộc tính font thiết lập font cho thành phần, bao gồm font chữ, độ rộng, ... Cấu
trúcVới giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|
| font-family
| giá trị font
| font-family: Arial, Helvetica, sans-serif;
| Xác định giá trị font family cho chữ.
| | font-size
| Kích cỡ
| font-size: 120%;
| Xác định kích cỡ của chữ, đơn vị có thể là px, em, %, ...
| | font-size-adjust
| Chỉ Firefox hỗ trợ thuộc tính này, nên ít được dùng tới.
| | font-stretch
| Hiện tại các trình duyệt không hỗ trợ thuộc tính này.
| | font-style
| normal
italic
oblique
| font-style: italic;
| Xác định loại chữ.
| | font-variant
| normal
small-caps
inherit
| font-variant: small-caps;
| Chuyển đổi kiểu chữ (thường thành hoa).
| | font-weight
| bold
normal
Giá trị
| font-weight: bold;
| Hiển thị chữ đậm hay thường.
|
HTML viết:<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html> Hiển thị trình duyệt khi chưa có CSS:CSS viết:Hiển thị trình duyệt khi có CSS:Trình duyệt hỗ trợThuộc tính font được hỗ trợ trong đa số các trình duyệt. Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype - Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS
- Các thuộc tính định dạng cho text
Các thuộc tính định dạng cho text- Các thuộc tính định dạng cho text
thường được sử dụng định dạng trực tiếp cho các thẻ thuộc nhóm inline, (những thuộc tính này cũng có thể định dạng được cho các thẻ khác).
- Thuộc tính định dạng màu sắc: color
- Thuộc tính định dạng kích
thước chữ: font-size
- Thuộc tính xác định dạng font chữ: font-family
- Thuộc tính định dạng kích thước chữ: font-weight
- Thuộc tính định dạng kiểu chữ:
font-style
- Thuộc tính định dạng khoảng cách các ký tự: letter-spacing
- Thuộc tính định dạng khoảng cách các dòng: line-height
- Thuộc tính xác
định chữ có gạch dưới hay không: text-decoration
- Thuộc tính định dạng khoảng cách các từ: word-spacing
Chuẩn bịTạo file HTML và CSS có cấu trúc thư mục và nội dung như sau: Cấu trúc thư mụcClick vào dấu [+] để xem cấu trúc. HTML viết<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" media="screen,print" />
</head> <body>
<div>
<p>Thành
phần không có CSS.</p>
<p class="cssStyle">Thành phần có CSS.<br /> Thành phần có CSS.<br /> Thành phần có CSS.<br /> Thành phần có CSS.</p>
</div>
</body>
</html> CSS viếtHiển thị trình duyệt khi chưa sử dụng CSSThành phần không có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS. Download phần chuẩn bị Thuộc tính color- Thuộc tính color được dùng để định dạng màu sắc cho thành phần.
- Tham khảo thêm về thuộc tính color.
Cấu trúcGiá trị của thuộc tính color: (Tham
khảo) - Giá trị theo hệ thập lục phân: gồm dấu "#" kết hợp với dãy ký tự latin (chỉ bao gồm số hoặc chữ).
VD: color: #ff0000; - Giá trị theo kết hợp màu RGB: Đây là dạng kết hợp của 3 loại màu, màu đỏ (Red), màu xanh lá (Green), màu xanh dương (Blue).
VD: color: rgb(255,0,0); // chuỗi giá trị từ 0 tới 255 - Giá trị theo tên tiếng anh: tên màu sắc viết bằng tiếng anh.
VD: color: red;
CSS
viếtp.cssStyle {
color: #ff0000;
}Hiển thị trình duyệt:Thành phần không có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS. Thuộc tính font-size- Thuộc tính font-size được dùng để định dạng cỡ chữ cho thành phần.
- Tham khảo thêm về thuộc tính font.
Cấu trúctag {
font-size: giá trị;
}
Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %, em). CSS viếtp.cssStyle {
font-size: 200%;
}Hiển thị trình duyệt:Thành phần không có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS. Thuộc tính font-family- Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
- Tham khảo thêm về thuộc tính font.
Cấu trúctag {
font-family: kiểu chữ;
}Font có nhiều kiểu chữ khác nhau,
tham khảo thêm CSS viếtp.cssStyle {
font-family: "Courier New", Courier, monospace;
}Hiển thị trình duyệt:Thành phần không có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS. Thuộc tính font-weight- Thuộc tính font-weight được dùng để định dạng độ dày của chữ cho thành phần.
- Tham khảo thêm về thuộc tính
font.
Cấu trúctag {
font-weight: giá trị;
}Giá trị chính của font-weight gồm: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900 CSS viếtp.cssStyle {
font-weight: bold;
}Hiển thị trình duyệt:Thành phần không có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS. Thuộc tính font-style- Thuộc tính font-style được dùng để định dạng kiểu chữ cho thành phần.
- Tham khảo thêm về thuộc tính font.
Cấu trúctag {
font-style: giá trị;
}Các giá trị chính cho thuộc tính font-style gồm: italic, oblique, normal. CSS viếtp.cssStyle {
font-style: italic;
}Hiển thị trình duyệt:Thành phần không có CSS. Thành phần
có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS. Thuộc tính letter-spacing- Thuộc tính letter-spacing được dùng để định dạng khoảng cách các ký tự cho thành phần.
- Tham khảo thêm về thuộc tính letter-spacing.
Cấu trúctag {
letter-spacing: giá trị;
}Giá trị có thể được tính theo các loại đơn vị khác
nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %, em). CSS viếtp.cssStyle {
letter-spacing: 5px;
}Hiển thị trình duyệt:Thành phần không có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành
phần có CSS.
Thành phần có CSS. Thuộc tính line-height- Thuộc tính line-height được dùng để định dạng khoảng cách các dòng cho thành phần.
- Tham khảo thêm về thuộc tính line-height.
Cấu trúctag {
line-height: giá trị;
}Giá trị có thể là số không đơn vị hoặc có đơn vị,
tham khảo các loại đơn vị khác nhau. CSS viếtp.cssStyle {
line-height: 5;
}Hiển thị trình duyệt:Thành phần không có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS. Thuộc tính text-decoration- Thuộc tính text-decoration được dùng xác định thành phần có gạch dưới hay không.
- Tham khảo thêm về thuộc tính text-decoration.
Cấu trúctag {
text-decoration: giá trị;
}Các giá trị chính cho thuộc tính text-decoration gồm: blink, line-through, overline, underline, none CSS viếtp.cssStyle {
text-decoration: underline;
}Hiển thị trình duyệt:Thành phần không có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thuộc tính word-spacing- Thuộc tính word-spacing được dùng để định dạng khoảng cách giữa các từ cho thành phần.
- Tham khảo thêm về thuộc tính word-spacing.
Cấu trúctag {
word-spacing: giá trị;
}Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng
điểm ảnh - px, phần trăm - %, em). CSS viếtp.cssStyle {
word-spacing: 10px;
}Hiển thị trình duyệt:Thành phần không có CSS. Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có
CSS. | 
