1. Vì sao cần định dạng văn bản?
Ngoài việc chọn font và cỡ chữ, bạn còn có thể:
- Căn giữa, căn phải hoặc canh đều văn bản
- Gạch chân, in nghiêng hoặc viết hoa toàn bộ
- Điều chỉnh khoảng cách chữ và khoảng cách giữa các dòng
Tất cả đều giúp nội dung dễ đọc và đẹp mắt hơn.
2. Các thuộc tính định dạng văn bản phổ biến
a. text-align – căn lề chữ
p {
text-align: center;
}
| Giá trị | Kết quả |
|---|---|
left | Căn trái (mặc định) |
right | Căn phải |
center | Căn giữa |
justify | Căn đều 2 bên |
Ví dụ:
h1 {
text-align: center;
}
b. text-decoration – gạch chân, gạch ngang, không gạch
a {
text-decoration: none;
}
| Giá trị | Ý nghĩa |
|---|---|
none | Không gạch gì cả |
underline | Gạch chân |
line-through | Gạch ngang |
overline | Gạch phía trên |
Ví dụ:
p.deleted {
text-decoration: line-through;
}
c. text-transform – viết hoa, viết thường
h2 {
text-transform: uppercase;
}
| Giá trị | Tác dụng |
|---|---|
none | Giữ nguyên văn bản |
uppercase | Viết hoa toàn bộ |
lowercase | Viết thường toàn bộ |
capitalize | Viết hoa chữ cái đầu mỗi từ |
d. letter-spacing – khoảng cách giữa các chữ cái
h1 {
letter-spacing: 2px;
}
→ Dùng để tạo cảm giác rộng rãi hoặc sang trọng hơn.
e. word-spacing – khoảng cách giữa các từ
p {
word-spacing: 8px;
}
→ Ít khi dùng, nhưng hữu ích khi cần điều chỉnh bố cục đặc biệt.
f. text-indent – thụt đầu dòng
p {
text-indent: 40px;
}
→ Giống kiểu viết văn bản có đoạn văn bắt đầu bằng thụt dòng.
3. Thực hành
style.css
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
h1 {
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
}
p.note {
text-align: justify;
text-indent: 30px;
}
a {
text-decoration: none;
color: #2c3e50;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 5 – Định dạng văn bản</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Tiêu đề chính</h1>
<p class="note">
Đây là đoạn văn được căn đều hai bên, có thụt đầu dòng để người đọc dễ theo dõi hơn. Bạn có thể áp dụng thuộc tính text-indent để làm điều đó.
</p>
<p>
Xem thêm tại <a href="#">liên kết này</a>.
</p>
</body>
</html>
4. Ghi nhớ
| Thuộc tính | Tác dụng |
|---|---|
text-align | Căn trái, phải, giữa, đều |
text-decoration | Gạch chân, gạch ngang… |
text-transform | Viết hoa, viết thường |
letter-spacing | Khoảng cách giữa các chữ cái |
text-indent | Thụt lề đầu dòng |
Thảo luận