Bài 14: Định dạng văn bản bằng CSS

1. Kiến thức trọng tâm

CSS cung cấp nhiều thuộc tính để định dạng văn bản: color đặt màu chữ, font-family chọn phông chữ, font-size đặt cỡ chữ, font-weight đặt độ đậm (ví dụ bold), font-style đặt chữ nghiêng (italic), text-align căn lề (left, center, right, justify), line-height đặt chiều cao dòng, text-decoration tạo gạch chân hoặc gạch ngang. Cỡ chữ có thể dùng đơn vị px (điểm ảnh, cố định) hoặc em, % (tương đối so với cỡ chữ cha). Khi chọn phông chữ, người ta thường liệt kê nhiều phông dự phòng, ví dụ font-family: Arial, sans-serif;, để nếu máy người xem thiếu phông đầu tiên thì trình duyệt dùng phông tiếp theo. Định dạng văn bản bằng CSS giúp trang web dễ đọc, thể hiện đúng thứ bậc thông tin: tiêu đề nổi bật, nội dung chính rõ ràng, chú thích nhỏ hơn.

2. Ví dụ minh họa

Yêu cầu: định dạng đoạn văn có màu xám đậm, phông Arial, cỡ chữ 16px, chiều cao dòng 1,5 lần và căn đều hai bên.

Lời giải:

p {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
}

Giải thích: color: #333333 cho chữ xám đậm, dễ đọc hơn màu đen tuyệt đối; font-family ưu tiên phông Arial, nếu không có thì dùng phông không chân chung; line-height: 1.5 tạo khoảng cách thoáng giữa các dòng; text-align: justify căn đều hai bên lề, đoạn văn trông gọn gàng.

3. Ghi nhớ

• color, font-family, font-size, font-weight, font-style định dạng chữ.
• text-align căn lề, line-height đặt chiều cao dòng, text-decoration tạo gạch chân, gạch ngang.
• Cỡ chữ dùng px (cố định) hoặc em, % (tương đối).
• Liệt kê nhiều phông dự phòng trong font-family để trang hiển thị ổn định trên mọi máy.