Bài này chúng ta sẽ tìm hiểu những thuộc tính để định dạng văn bản như sau:
| Thuộc tính | Mô tả | |
|---|---|---|
| color | Đặt màu cho văn bản | |
| direction | Chỉ định hướng văn bản / hướng viết | |
| letter-spacing | Tăng hoặc giảm khoảng trắng giữa các ký tự trong văn bản | |
| line-height | Đặt chiều cao dòng | |
| text-align | Căn lề văn bản | |
| text-decoration | Trang trí: gạch đầu, gạch ngang, gạch chân | |
| text-indent | Thụt đầu dòng văn bản | |
| text-shadow | Đổ bóng văn bản | |
| text-transform | Chuyển đổi kiểu chữ (chữ hoa chữ thường) | |
| text-overflow | Chỉ định cách làm dấu hiệu tràn nội dung | |
| vertical-align | Căn chỉnh vị trí dọc (tịnh tiến lên xuống) của một phần tử | |
| white-space | Xử lý khoảng trắng bên trong một phần tử | |
| word-spacing | Tăng hoặc giảm khoảng trắng giữa các từ trong văn bản |
Mầu chữ
Thuộc tính color được sử dụng để đặt màu của văn bản.
color: màu sắc;
Trong đó, “màu sắc” có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX (Tham khảo hơn 140+ tên màu và mã màu).
body {
color: blue;
}
h1 {
color: green;
}
Căn chỉnh văn bản
Thuộc tính text-align được sử dụng để căn chỉnh văn bản (theo hướng ngang).
Một văn bản có thể được căn trái hoặc phải, căn giữa hoặc căn đều hai bên, tương ứng left, right, center, justify.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Trang trí văn bản
Thuộc tính text-decoration được sử dụng để đặt hoặc xóa trang trí văn bản (gạch đầu, gạch giữa, gạch chân)
Giá trị text-decoration: none; thường được sử dụng để xóa gạch chân khỏi các liên kết:
a {
text-decoration: none;
}
Các giá trị được sử dụng trong text-decoration :
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
See the Pen text trang tri by nguyen tien (@nguyentien365) on CodePen.
Chuyển đổi văn bản
Thuộc tính text-transform được sử dụng để xác định chữ hoa và chữ thường trong văn bản.
Nó có thể được sử dụng để biến mọi thứ thành chữ in hoa hoặc chữ thường hoặc viết hoa chữ cái đầu tiên của mỗi từ:
p.uppercase {
text-transform: uppercase; //Viết hoa hết
}
p.lowercase {
text-transform: lowercase; //Viết thường hết
}
p.capitalize {
text-transform: capitalize; //Viết hoa chữ đầu tiên
}
See the Pen text viet hoa viet thường by nguyen tien (@nguyentien365) on CodePen.
Văn bản thụt lề
Thuộc tính text-indent được sử dụng để chỉ định thụt dòng của dòng đầu tiên của văn bản:
p {
text-indent: 50px;
}
Khoảng cách chữ
Thuộc tính letter-spacing được sử dụng để chỉ định khoảng trắng giữa các ký tự trong văn bản.
Ví dụ sau minh họa cách tăng hoặc giảm khoảng trắng giữa các ký tự:
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
See the Pen text spacing by nguyen tien (@nguyentien365) on CodePen.
Chiều cao giữa các dòng
Thuộc tính line-height được sử dụng để chỉ định khoảng trắng giữa các dòng:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
See the Pen line-height by nguyen tien (@nguyentien365) on CodePen.
Chỉ định hướng văn bản / hướng viết
Thuộc tính direction được sử dụng để thay đổi hướng văn bản của một phần tử:
p {
direction: rtl;
}
See the Pen bdo dir by nguyen tien (@nguyentien365) on CodePen.
Khoảng cách từ
Thuộc tính word-spacing được sử dụng để chỉ định khoảng trắng giữa các từ trong văn bản.
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
Đổ bóng văn bản
Thuộc tính text-shadow để thêm bóng cho văn bản.
Ví dụ sau chỉ định vị trí của bóng ngang (3px), vị trí của bóng dọc (2px) và màu của bóng (đỏ):
h1 {
text-shadow: 3px 2px red;
}
See the Pen text-shadow by nguyen tien (@nguyentien365) on CodePen.
