Bài 12: Định dạng văn bản với CSS
Nội dung
- Tạo màu cho văn bản (color):
- Căn chỉnh văn bản (text-align):
- Trang trí văn bản (text-decoration):
- Chuyển đổi văn bản (text-transform):
- Thụt lề văn bản: (text-indent)
- Khoảng cách chữ (letter-spacing):
- Chiều cao giữa các dòng (line-height)
- Hướng văn bản (direction):
- Khoảng cách từ (word-spacing)
- Đổ bóng văn bản (text-shadow):
Tạo màu cho văn bản (color):
Thuộc tính “color” được dùng để thiết lập màu cho văn bản. Màu được xác định bởi:
- Tên màu – ví dụ: “red”
- Giá trị HEX – ví dụ: “# ff0000”
- Giá trị RGB – ví dụ: “rgb (255,0,0)”
Màu mặc định của văn bản được xác định trong thẻ body.
Ví dụ:
body {
color: blue;
}
h1 {
color: green;
}
Lưu ý: Tuân theo chuẩn W3C thì nếu bạn xác định thuộc tính color, bạn cũng phải xác định thuộc tính background-color.
Căn chỉnh văn bản (text-align):
Thuộc tínhtext-alignđược dùng để căn chỉnh văn bản theo chiều ngang.
1 văn bản có thể được căn chỉnh sang trái (left) hoặc phải (right), giữa (center) hoặc căn đều 2 bên (justify).
Ví dụ sau đây cho thấy các văn bản được căn lề giữa, căn lề trái và phải. (căn lề trái mặc định hướng văn bản từ trái sang phải và căn lề phải mặc định hướng văn bản từ phải sang trái):
Ví dụ:
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Khi thuộc tínhtext-align được thiết lập là “justify”, mỗi dòng được kéo dài sao cho chiều rộng bằng nhau và lề trái và phải thẳng (như trên tạp chí và báo):
ví dụ:
div {
text-align: justify;
}
Trang trí văn bản (text-decoration):
Thuộc tính text-decoration được sử dụng để thiết lập hoặc loại bỏ trang trí khỏi văn bả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:
Ví dụ:
a {
text-decoration: none;
}
1 vài giá trịtext-decoration khác được dùng để trang trí văn bản:
Ví dụ:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Chú ý: Không nên gạch chân văn bản không phải là một liên kết, vì điều này thường gây nhầm lẫn cho người đọc.
Chuyển đổi văn bản (text-transform):
Thuộc tính text-transform property được sử dụng để xác định chữ hoa và chữ thường trong một 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ừ:
Ví dụ:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Thụt lề văn bản: (text-indent)
Thuộc tính text-indent được dùng để xác định thụt đầu dòng của dòng đầu tiên của một văn bản:
Ví dụ:
p {
text-indent: 50px;
}
Khoảng cách chữ (letter-spacing):
Thuộc tính letter-spacing được sử dụng để xác định khoảng cách giữa các ký tự trong một 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ự:
Ví dụ:
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
Chiều cao giữa các dòng (line-height)
Thuộc tính line-height được dùng để xác định khoảng cách giữa các dòng:
Ví dụ:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
Hướng văn bản (direction):
Thuộc tính direction được sử dụng để thay đổi hướng văn bản của 1 phần tử:
Ví dụ:
p {
direction: rtl;
}
Khoảng cách từ (word-spacing)
Thuộc tính word-spacing được sử dụng để xác định khoảng cách giữa các từ trong một 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 từ:
Ví dụ:
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
Đổ bóng văn bản (text-shadow):
Thuộc tính text-shadow thêm bóng cho văn bản
Ví dụ sau xác đị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 (đỏ):
Ví dụ:
h1 {
text-shadow: 3px 2px red;
}
