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

1. Đị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 = \(\dfrac{1}{96}\) inch), \(pt\) (point = \(\dfrac{1}{72}\) 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).

2. Tính kế thừa và cách lựa chọn theo thứ tự của CSS

a. Tính kế thừa của CSS

Một tính chất rất quan trọng của CSS là tính kế thừa. Nếu một mẫu CSS áp dụng cho một phần tử HTML bất kì thì nó sẽ được tự động áp dụng cho tất cả các phần tử là con, cháu của phần tử đó trong mô hình cây HTML (trừ các trường hợp ngoại lệ, ví dụ các phần tử với mẫu định dạng riêng). 

Phần tử là con của body sẽ thừa hưởng định dạng.

b. Thứ tự ưu tiên khi áp dụng mẫu CSS

Do được phép có nhiều mẫu định dạng CSS nên có thể xảy ra trường hợp nhiều mẫu cùng áp dụng cho một phần tử HTML. Khi đó trình duyệt sẽ thực hiện mẫu định dạng được viết cuối cùng (tính chất “cascading” của CSS). Trong ví dụ mẫu CSS sau có hai định dạng cùng được viết áp dụng cho h1, mẫu đầu quy định căn giữa, mẫu sau quy định căn trái.

c. Sử dụng kí hiệu * và !important

Ý nghĩa của hai kí hiệu được mô tả như sau:

• Nếu có một mẫu định dạng chứa kí hiệu * thì định dạng này sẽ áp dụng cho mọi phần tử mà chưa có trong bất cứ mẫu định dạng nào khác của CSS. Mức độ ưu tiên của * là thấp nhất.
• Kí hiệu !important được sử dụng trong một mẫu định dạng thì mẫu này với thuộc tính tương ứng sẽ được ưu tiên cao nhất mà không phụ thuộc vào vị trí của mẫu trong CSS.