Nội dung chính Khoa học máy tính 12 kết nối bài 14: Định dạng văn bản bằng CSS

BÀI 14: ĐỊNH DẠNG VĂN BẢN BẰNG CSS

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: 

+ Chọn phông. 

+ Các phông chữ 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 đưa ra một danh sách các phông chữ, trình duyệt sẽ lần lượt tìm các phông trong danh sách từ trái sang phải để chọn thể hiện văn bản. 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: 

+ Thiết lập cỡ chữ.

+ Cú pháp mẫu định dạng:

+ Cỡ chữ có thể là một trong những dạng sau:

• Cỡ chữ theo đơn vị đo chính xác tuyệt đối: cm (centimét), mm (milimét), in (1 inch = 2,54 cm), px (1 pixel = inch), pt (1 point = inch).

• Cỡ chữ theo các đơ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).

• Cỡ chữ theo tỉ lệ phần trăm (%) cỡ chữ của phần tử cha.
• Cỡ chữ theo các mức xx-small,  x-small, small, medium, large, x-large, xx-large. Cỡ chữ mặc định là medium.

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

- CSS hỗ trợ thiết lập màu chữ bằng thuộc tính color. 

- Một số giá trị màu cơ bản của thuộc tính color: 

+ black: đen.

+ white: trắng.

+ purple: tím. 

+ blue: xanh dương.

+ orange: cam.

+ red: đỏ.

+ green: xanh lá cây. 

+ yellow: vàng.

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

- Đườ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 (line-height) 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. CSS sẽ mặc định coi chiều cao = 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. 

- Các thuộc tính liên quan đến định dạng dòng 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 như sau:

+ text-align: 

• Thiết lập căn lề cho các phần tử được chọn. 

• Các kiểu căn lề bao gồm: left, center, right, justify. 

+ text-decoration: 

• 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. “

• Thay thế và mở rộng cho thẻ u của HTML. 

• 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: 

• Đị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

- 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).

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

- Khi có nhiều mẫu CSS cùng áp dụng cho một phần tử HTML, trình duyệt sẽ thực hiện mẫu định dạng được viết cuối cùng.

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

- Kí hiệu *:

+ Dùng trong bộ chọn sẽ có ý nghĩa là phần tử bất kì. 

+ 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: 

+ Nếu đượ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. 

+ Kí hiệu !important cần được viết ngay sau thuộc tính cần đánh dấu ưu tiên. 

+ Chỉ thuộc tính này của bộ chọn có thứ tự ưu tiên cao nhất.

Ví dụ: Mẫu CSS có hai mẫu định dạng với cùng bộ chọn là h1: 

+ Mẫu đầu tiên có kí hiệu !important với thuộc tính "text-align: center;" nên thuộc tính này sẽ được ưu tiên cao nhất. 

+ Mẫu thứ hai của h1 có dạng "text-align: left; color: red;" thì thuộc tính màu sắc sẽ được ưu tiên áp dụng. Mẫu cuối cùng có kí hiệu * sẽ có mức ưu tiên thấp nhất mặc dù nó được viết ở vị trí cuối cùng.