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

1. Các thuộc tính CSS định dạng văn bản

a) Định dạng phông chữ (Typography)

• font-family (Họ phông chữ): Chỉ định kiểu phông chữ hiển thị. Do mỗi máy tính người dùng cài đặt các bộ phông khác nhau, CSS cho phép liệt kê một danh sách các phông ưu tiên từ trái sang phải, kết thúc bằng một họ phông chung:

  h1 {
    font-family: Arial, "Helvetica Neue", Tahoma, sans-serif;
  }
  

  Python Script

  [!NOTE] Nếu tên phông chữ có chứa khoảng trắng, bắt buộc phải đặt trong dấu ngoặc kép (ví dụ: "Times New Roman", "Courier New").

  5 nhóm phông chữ tiêu chuẩn trong thiết kế Web:

  1. sans-serif (Không chân): Nét chữ thẳng, dứt khoát, hiện đại (Arial, Roboto, Open Sans). Dễ đọc nhất trên màn hình máy tính và điện thoại.
  2. serif (Có chân): Chân chữ có các gạch nhỏ đỡ bên dưới (Times New Roman, Georgia). Thường dùng cho sách báo in, tài liệu trang trọng.
  3. monospace (Đơn cách): Tất cả các ký tự có bề ngang bằng hệt nhau (Consolas, Courier New). Chuyên dùng hiển thị mã nguồn lập trình.
  4. cursive (Chữ viết tay): Nét uốn lượn, mềm mại (Comic Sans MS, Dancing Script). Phù hợp thiệp mời, đề từ.
  5. fantasy (Nghệ thuật/Trừu tượng): Nét chữ cách điệu trang trí (Impact, Algerian). Dùng cho bìa poster.

• font-size (Cỡ chữ):

  • Đơn vị tuyệt đối: px (pixel màn hình), pt (point - 1/72 inch). Ví dụ: font-size: 16px;.
  • Đơn vị tương đối: em (gấp n lần cỡ chữ của phần tử cha), rem (gấp n lần cỡ chữ phần tử gốc html), %. Ví dụ: font-size: 1.2em;.

• font-style (Kiểu dáng chữ): normal (chữ đứng thẳng bình thường) hoặc italic (chữ in nghiêng).

• font-weight (Độ đậm của chữ): normal (nét thường 400), bold (in đậm 700), hoặc các giá trị số từ 100 đến 900.

b) Định dạng màu chữ (color)

Thuộc tính color xác định màu sắc của ký tự văn bản. Ta có thể khai báo bằng tên tiếng Anh cơ bản (red, blue, green, purple, black, white,...) hoặc mã màu Hex/RGB.

c) Định dạng dòng văn bản (Text Formatting)

• line-height (Khoảng cách dòng): Khoảng cách giữa các đường cơ sở (baseline) của hai dòng văn bản liền kề. Giúp văn bản thoáng đãng, không bị dí sát nhau gây mỏi mắt:
  p {
    line-height: 1.6; /* Chiều cao dòng gấp 1.6 lần cỡ chữ */
  }
  

  Python Script
• text-align (Căn lề khối chữ): Nhận 4 giá trị: left (căn trái), center (căn giữa), right (căn phải), justify (căn đều hai biên mép).
• text-decoration (Đường kẻ trang trí):
  • underline: Đường gạch chân dưới chữ.
  • overline: Đường gạch ngang trên đỉnh đầu chữ.
  • line-through: Đường gạch xuyên qua giữa chữ (dùng cho giá cũ gạch đi khi giảm giá).
  • none: Bỏ đường gạch mặc định (rất hay dùng để xóa gạch chân của thẻ <a>).
• text-indent (Thụt lề dòng đầu): Thụt lề ký tự đầu tiên của đoạn văn. Ví dụ: text-indent: 2em; hoặc text-indent: 20px;.

2. Tính kế thừa và Quy tắc ưu tiên trong CSS

a) Tính kế thừa (Inheritance)

Trong mô hình phân cấp cây DOM của HTML, các phần tử con nằm bên trong sẽ tự động kế thừa các định dạng chữ từ phần tử cha bao bọc nó:

body {
  color: #334155;
  font-family: Arial, sans-serif;
}

Toàn bộ tiêu đề <h1>, đoạn văn <p>, thẻ <li> nằm trong <body> sẽ tự động hiển thị với phông Arial và màu xám đậm mà không cần phải viết CSS lặp lại cho từng thẻ!

b) Thứ tự ưu tiên theo vị trí xuất hiện (Cascading)

Nếu một phần tử HTML nhận hai quy tắc CSS cùng áp dụng lên một thuộc tính từ cùng cấp độ chọn, quy tắc nào được viết sau cùng (ở vị trí dưới) sẽ ghi đè lên quy tắc viết phía trước:

h1 {
  text-align: center;
  color: red;
}
h1 {
  text-align: left; /* Quy tắc này nằm dưới -> h1 sẽ căn trái */
}

c) Bộ chọn toàn cục * và Từ khóa !important

• Bộ chọn * (Universal Selector): Tác động lên mọi phần tử HTML trong trang web nhưng có mức độ ưu tiên thấp nhất. Bất kỳ quy tắc cụ thể nào khác cũng sẽ ghi đè lên nó.
• Từ khóa !important: Đặt ngay sau giá trị thuộc tính. Khi được gắn !important, thuộc tính đó sẽ được trao quyền ưu tiên tuyệt đối cao nhất, bất chấp vị trí xuất hiện hay cấp độ ưu tiên của các quy tắc khác:
  h1 {
    color: red !important; /* Luôn luôn có màu đỏ */
  }
  h1 {
    color: blue; /* Bị vô hiệu hóa bởi !important phía trên */
  }
  

  Python Script