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

a. CSS định dạng phông chữ

CSS hỗ trợ thiết lập các thuộc tính liên quan đến chọn phông (font-family), chọn cỡ chữ (font-size), chọn kiểu chữ (font-style), độ dày nét chữ (font-weight) và nhiều thuộc tính khác.

• font-family: Thiết lập phông được sử dụng. Mỗi phông chữ có một tên riêng, có thể được chia làm năm loại sau: serif (chữ có chân); sans-serif (chữ không chân); monospace (chữ có chiều rộng đều nhau); cursive (chữ viết tay); fantasy (chữ trừu tượng).
  • Sau thuộc tính font-family là một hay một danh sách các tên phông chữ. Nếu tên phông chữ có chứa dấu cách thì cần đặt trong hai dấu nháy kép (hoặc nháy đơn).
  • Danh sách các phông chữ này thường cùng loại và tên của loại phòng đó ở vị trí cuối cùng.
  • Nếu không tìm thấy phông chữ nào trong danh sách thì sẽ chọn phông cùng loại bất kì.

• font-size: Thuộc tính này sẽ thiết lập cỡ chữ cho nội dung của thẻ.
  • Cỡ chữ có thể là một trong những dạng sau:
    • Đơn vị đo chính xác tuyệt đối, ví dụ: $cm$ (centimét), $mm$ (milimét), $in$ (inch = 2,54 cm), $px$ (pixel = ${\displaystyle \frac{1}{96}}$961​ inch), $pt$ (point = ${\displaystyle \frac{1}{72}}$721​ inch).
    • Đơn vị đo tương đối: $em$ (so với cỡ chữ hiện thời của trình duyệt), $ex$ (so với chiều cao chữ x của cỡ chữ hiện thời), $rem$ (so với cỡ chữ của phần tử gốc html của tệp HTML).
    • Đơn vị theo tỉ lệ phần trăm (%) cỡ chữ của phần tử cha.
    • Đơn vị theo các mức $xx-small$, $x-small$, $small$, $medium$, $larger$, $x-larger$, $xx-larger$. Cỡ chữ mặc định là $medium$.

• font-style: Thuộc tính này thiết lập kiểu chữ thường hay kiểu chữ nghiêng của văn bản. Thuộc tính này có hai giá trị là normal (thường) và italics (nghiêng).
• font-weight: Thuộc tính này thiết lập kiểu chữ đậm. Giá trị của thuộc tính này có thể đặt bằng chữ là normal (bình thường), bold (đậm) hoặc đặt bằng các giá trị từ 100, 200,..., 900, trong đó các mức độ viết đậm từ 500 trở lên.

b. CSS định dạng màu chữ

Thuộc tính color sẽ thiết lập màu chữ, một số giá trị màu cơ bản như sau: black (đen), white (trắng), purple (tím), blue (xanh dương), orange (cam), red (đỏ), green (xanh lá cây), yellow (vàng).

Bộ chọn với kí tự * là tất cả các phần tử HTML của trang web. Khi áp dụng CSS trên thì các phần tử h1 có chữ màu đỏ, các phần tử em có chữ màu xanh lá cây, còn toàn bộ các phần tử còn lại có chữ màu đen.

c. CSS định dạng dòng văn bản

Hai thành phần chính: đường cơ sở (baseline) và chiều cao dòng văn bản (line-height).

• Đường cơ sở (baseline) là đường ngang mà các chữ cái đứng thẳng trên nó.
• Chiều cao dòng văn bản là khoảng cách giữa các đường cơ sở của các dòng trong cùng một đoạn văn bản. Mặc định $=2em$ và thể hiện bằng cách bổ sung khoảng cách phía trên và dưới của văn bản. 

🔶line-height: Thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng. Ngoài các đơn vị đo thông thường, còn có thể thiết lập các số đo tương đối.

🔶text-align: Thuộc tính này thiết lập căn lề cho các phần tử được chọn. Các kiểu căn hàng bao gồm: left, center, right, justify. 

🔶text-decoration: Thuộc tính này thiết lập tính chất “trang trí” dòng văn bản bằng các đường kẻ ngang trên, dưới hay giữa dòng. Thuộc tính này sẽ thay thế và mở rộng cho thẻ u của HTML. Thuộc tính này có bốn giá trị thường sử dụng là none (mặc định, không trang trí), underline (đường kẻ dưới chữ), overline (đường kẻ phía trên chữ) và line-through (kẻ giữa dòng chữ).

🔶text-indent: Thuộc tính định dạng thụt lề dòng đầu tiên. Nếu giá trị lớn hơn 0 thì dòng đầu tiên thụt vào. Nếu giá trị nhỏ hơn 0 thì dòng đầu tiên lùi ra ngoài còn gọi là thụt lề treo (hanging indent).