TRANG CHỦ

Tin học 12 - Bài 14: Định dạng văn bản bằng CSS

Tóm tắt mục tiêu và kiến thức cốt lõi về phông chữ, màu chữ, dòng văn bản, cùng nguyên tắc kế thừa, thứ tự ưu tiên và các yêu cầu thực hành định dạng văn bản bằng CSS.

Mục tiêu bài học

  • Biết dùng CSS để định dạng văn bản: phông chữ, màu chữ, dòng văn bản.
  • Hiểu tính kế thừa, thứ tự ưu tiên (cascading) và !important.
  • Thực hành tạo mẫu CSS trình bày đoạn văn theo yêu cầu.

1. Định dạng văn bản bằng CSS

1.1. Phông chữ (font)

  • font-family: chọn phông; có 5 nhóm chính: serif, sans-serif, monospace, cursive, fantasy.
  • font-size: cỡ chữ với đơn vị tuyệt đối (px, pt, cm...), tương đối (em, rem, %), hoặc mức (small...xx-large).
  • font-style: kiểu thường/nghiêng → normal | italic.
  • font-weight: độ đậm → normal | bold | 100...900.
Ví dụ:

h1 { font-family: Times, "Times New Roman", Tahoma, serif; }
p { font-size: 1.2em; }

1.2. Màu chữ (color)

  • color: đặt màu ký tự bằng tên màu cơ bản hoặc mã màu.
Ví dụ màu chữ:

h1 { color: red; }

1.3. Dòng văn bản (text/line)

  • Khái niệm: baseline và line-height (xem minh họa Hình 14.3).
  • line-height: chiều cao dòng (số, em, %).
  • text-align: căn lề left | center | right | justify.
  • text-decoration: gạch dưới/trên/giữa (underline | overline | line-through | none).
  • text-indent: thụt lề dòng đầu (dương = thụt vào, âm = thụt treo).
Mẫu định dạng đoạn:

p { line-height: 1.6; text-align: justify; text-indent: 2em; }

2. Tính kế thừa & thứ tự ưu tiên

  • Kế thừa: thuộc tính áp cho phần tử cha (ví dụ body { color: blue; }) sẽ lan xuống con, trừ khi có quy tắc ghi đè riêng (Hình 14.5).
  • Cascading (ưu tiên): khi nhiều quy tắc cùng áp cho một phần tử, quy tắc viết sau thắng (Hình 14.6).
  • Ký hiệu đặc biệt: * (universal selector) chọn mọi phần tử, ưu tiên thấp.
  • !important: gắn sau thuộc tính để nâng ưu tiên cao nhất cho thuộc tính đó (Hình 14.7).
Ví dụ ưu tiên:

p { color: #0f172a; }
p { color: #0ea5e9; }

Lưu ý: Dùng !important đúng lúc, tránh lạm dụng để dễ bảo trì.

3. Thực hành – Luyện tập – Vận dụng (tóm tắt yêu cầu)

NV1: Tạo CSS trình bày đoạn “Kĩ thuật chia để trị”

  • Tiêu đề: căn trái, 16px, đỏ, sans-serif.
  • Đoạn: thụt dòng đầu 2 ký tự, căn trái.
  • Toàn văn (trừ tiêu đề): serif.

NV2: Biến thể

  • Tiêu đề căn giữa, 16px, xanh.
  • Đoạn thụt 2 ký tự, căn đều (justify).
  • strong, em dùng kích thước mặc định.

Luyện tập

  • Phân loại phông: ví dụ Times New Roman → serif; Courier New → monospace; ...
  • Liệt kê thuộc tính cần để trình bày một hộp thơ.

Vận dụng

  • Tìm hiểu thêm letter-spacing, word-spacing, text-shadow.
  • Tạo 2 tệp CSS khác nhau cho bài “Lịch sử CSS”.
font-family line-height inheritance cascading !important