I. Lý thuyết trọng tâm

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

Các định dạng văn bản trong CSS đều liên quan đến định dạng ký tự, bao gồm phông chữ, màu chữ và kiểu chữ. Các thuộc tính CSS tương ứng được chia thành ba nhóm chính: định dạng phông chữ (text font), màu chữ (text color) và dòng văn bản (text line).

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

CSS hỗ trợ thiết lập các thuộc tính liên quan đến việc 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.

a) Thuộc tính font-family (chọn phông chữ)

CSS cho phép thiết lập mẫu định dạng chọn phông sử dụng thuộc tính font-family. Trên máy tính có thể cài đặt nhiều phông chữ khác nhau, mỗi phông chữ có một tên riêng. Tuy nhiên, các phông chữ có thể được chia làm năm loại sau:

Cú pháp:

selector {font-family: tên_phông_1, "tên_phông_2", loại_phông;}

Ví dụ:

h1 {font-family: Times, "Times New Roman", Tahoma, serif;}

Giải thích ví dụ trên:

• Mẫu CSS thiết lập phông chữ cho các thẻ h1
• Lựa chọn các phông ưu tiên theo thứ tự: Times → Times New Roman → Tahoma → một phông loại có chân bất kỳ
• 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ỳ

Lưu ý quan trọng:

• 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ữ thường cùng loại và tên của loại phông đó ở vị trí cuối cùng

b) Thuộc tính font-size (cỡ chữ)

Thuộc tính này thiết lập kích thước chữ cho văn bản.

Cú pháp:

selector {font-size: cỡ_chữ;}

Các dạng giá trị cỡ chữ:

Ví dụ:

c) Thuộc tính font-style (kiểu chữ)

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.

Các giá trị:

d) Thuộc tính font-weight (độ đậm nét chữ)

Thuộc tính này thiết lập kiểu chữ đậm cho văn bản.

Các giá trị:

Ví dụ:

em {font-style: italics; font-weight: bold;}
strong {font-style: italics; font-weight: 900;}

Mẫu trên thiết lập các thẻ strong và em với kiểu chữ nghiêng và độ đậm khác nhau.

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

Thuộc tính color được sử dụng để thiết lập màu chữ cho văn bản.

Cú pháp:

selector {color: giá_trị_màu;}

Một số giá trị màu cơ bản:

Ví dụ:

h1 {color: red;}
em {color: green;}
* {color: black;}

Giải thích:

• Các phần tử h1 có chữ màu đỏ
• Các phần tử em có chữ màu xanh lá cây
• Toàn bộ các phần tử còn lại có chữ màu đen

Lưu ý: Bộ chọn với ký tự * nghĩa là tất cả các phần tử HTML của trang web.

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

Các mẫu định dạng loại này thiết lập các thuộc tính liên quan đến các dòng văn bản khi thể hiện trên trình duyệt.

a) Khái niệm cơ bản

Để hiểu cách định dạng dòng văn bản, cần nắm được hai khái niệm:

• Đườ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 mặc định coi chiều cao dòng = 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.

b) Thuộc tính line-height (chiều cao dòng)

Thuộc tính này dùng để thiết lập chiều cao dòng cho bộ chọn của mẫu định dạng.

Ví dụ:

p {line-height: 3;}      /* chiều cao bằng 3 lần cỡ chữ hiện thời */
p {line-height: 2em;}    /* chiều cao bằng 2 lần chiều cao dòng hiện thời */
p {line-height: 200%;}   /* chiều cao bằng 200% chiều cao dòng của phần tử cha */

c) Thuộc tính text-align (căn lề)

Thuộc tính này thiết lập căn lề cho các phần tử được chọn.

Các giá trị:

Ví dụ:

p {text-align: right;}   /* thiết lập căn phải */

d) Thuộc tính text-decoration (trang trí dòng văn bản)

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.

Các giá trị:

Lưu ý: Thuộc tính text-decoration không có tính kế thừa.

e) Thuộc tính text-indent (thụt lề dòng đầu tiên)

Thuộc tính này định dạng thụt lề cho dòng đầu tiên của đoạn văn bản.

Quy tắc:

• Nếu giá trị lớn hơn 0: dòng đầu tiên thụt vào
• Nếu giá trị nhỏ hơn 0: dòng đầu tiên lùi ra ngoài (còn gọi là thụt lề treo – hanging indent)

Ví dụ:

p {text-indent: 10px;}   /* Dòng đầu tiên thụt vào đúng 10 pixel */
p {text-indent: 2em;}    /* Dòng đầu tiên thụt vào bằng 2 ký tự */
p {text-indent: 5%;}     /* Dòng đầu tiên thụt vào 5% chiều rộng dòng của phần tử cha */

Ghi nhớ: Các mẫu định dạng văn bản cơ bản bao gồm các thuộc tính liên quan đến phông chữ, màu chữ và định dạng dòng văn bản.

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

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

Ngoại lệ: Các phần tử có mẫu định dạng riêng sẽ không kế thừa.

Ví dụ:

<style>
    body {color: blue;}
    h1 {color: red; text-align: center;}
</style>

<body>
    <h1>Tính kế thừa của CSS</h1>
    <h2>1. Mô hình cây html</h2>
    <p>Đây là đoạn đầu tiên...</p>
</body>

Giải thích:

• Thẻ h1 có chữ màu đỏ do được định dạng theo mẫu CSS riêng
• Các phần tử h2 và p đều kế thừa từ phần tử cha body nên có chữ màu xanh dương

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

Đây chính là tính chất “cascading” (xếp tầng) của CSS.

Ví dụ:

<style>
    body {color: blue;}
    h1 {color: red; text-align: center;}
    h1 {text-align: left;}
</style>

Giải thích:

• Có hai mẫu CSS cùng áp dụng cho h1
• Mẫu đầu quy định căn giữa (text-align: center)
• Mẫu sau quy định căn trái (text-align: left)
• Kết quả: phần tử h1 được căn trái theo mẫu cuối cùng

2.3. Sử dụng ký hiệu * và !important

CSS còn cho phép sử dụng hai ký hiệu đặc biệt là * và !important với ý nghĩa như sau:

Cú pháp !important:

selector {thuộc_tính: giá_trị !important;}

Lưu ý: 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ụ:

<style>
    h1 {
        text-indent: 0em;
        color: blue;
        text-align: center !important;
    }
    h1 {text-align: left; color: red;}
    * {text-indent: 1em; color: blue;}
</style>

Phân tích ví dụ trên:

• Mẫu đầu tiên của h1 có ký hiệu !important với thuộc tính text-align: center → thuộc tính này được ưu tiên cao nhất
• Mẫu thứ hai của h1 có text-align: left; color: red; → thuộc tính màu sắc (red) sẽ được ưu tiên áp dụng (vì viết sau)
• Mẫu cuối cùng có ký hiệu * → có mức ưu tiên thấp nhất mặc dù được viết ở vị trí cuối cùng

Kết quả: Phần tử h1 sẽ có chữ màu đỏ, căn giữa.

Ghi nhớ: Các mẫu định dạng CSS được áp dụng theo nguyên tắc kế thừa trong mô hình cây HTML. Nếu mẫu định dạng được viết cho một phần tử thì sẽ được áp dụng mặc định cho tất cả các phần tử con, cháu. Nếu có nhiều mẫu định dạng được viết cho cùng một bộ chọn thì mẫu viết sau cùng sẽ được áp dụng. Nếu bộ chọn có ký tự * thì được áp dụng cho mọi phần tử nhưng với độ ưu tiên thấp nhất. Ngược lại, mẫu định dạng với ký hiệu !important có mức ưu tiên cao nhất.

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa