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

Bài 14 - Định dạng văn bản bằng CSS (kntt)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Câu hỏi(t.79)	Hoạt động 2
Câu hỏi(t.81)	Luyện tập	Vận dụng

Khởi động (trang 76): Quan sát đoạn văn bản được thể hiện trên một trang web trong hình 14.1. Em có nhận xét gì về các định dạng liên quan đến phông chữ của văn bản.

Gợi ý trả lời:

Đoạn văn bản trên sử dụng các phông chữ khác nhau.

1. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Hoạt động 1 (trang 76): Các mẫu định dạng văn bản trong Hình 14.1 đều liên quan đến định dạng kí tự gồm phông chữ, màu chữ và kiểu chữ. Các thuộc tính của CSS liên quan bao gồm định dạng phông chữ (text font), màu chữ (text color) và dòng văn bản (text line). Quan sát và thảo luận để hiểu rõ hơn các mẫu định dạng CSS này.

Gợi ý trả lời:

- Định dạng phông chữ (text font):
+ font-family: Xác định loại phông chữ được sử dụng cho văn bản.
+ font-size: Đặt kích thước của phông chữ.
+ font-style: Xác định kiểu chữ (như font-style: italic).
+ font-weight: Xác định độ đậm của phông chữ (như font-weight: bold).
- Màu chữ (text color):
+ color: Đặt màu cho văn bản.
- Định dạng dòng văn bản (text line):
+ line-height: Xác định khoảng cách giữa các dòng văn bản.
+ text-align: Căn chỉnh văn bản theo chiều ngang (trái, phải, giữa, hoặc canh đều).
+ text-decoration: Xác định trang trí dòng văn bản như gạch chân, gạch ngang, hay gạch trên.
+ text-indent: Thụt lề đầu dòng.

CÂU HỎI

Câu hỏi 1 (trang 79): Giải thích các mẫu định dạng CSS sau:

Gợi ý trả lời:

- Tất cả các tiêu đề <h1> đều có chữ màu đỏ, các dòng căn giữa.
- Tất cả các đoạn văn bản <p> căn đều 2 bên.
Câu hỏi 2 (trang 79): Giả sử mẫu định dạng CSS có định dạng sau:

Hãy kiểm tra tác dụng của CSS này trên một tệp HTML bất kì và đưa ra nhận xét.

Gợi ý trả lời:

Tất cả văn bản phần thân (body) của các trang web đều có màu xanh dương (blue).
Ví dụ:

2. TÍNH KẾ THỪA VÀ CÁCH LỰA CHỌN THEO THỨ TỰ CỦA CSS

Hoạt động 2 (trang 79): Quan sát, tìm hiểu, trao đổi và trả lời các câu hỏi sau:
1. Các mẫu định dạng có tính kế thừa trong mô hình cây HTML không? Nếu một mẫu định dạng thiết lập ở một phần tử HTML thì định dạng đó có áp dụng cho tất cả các phần tử con, cháu của phần tử này không?
2. Nếu có nhiều mẫu CSS cùng được thiết lập cho một phần tử HTML thì trình duyệt sẽ áp dụng các mẫu định dạng CSS này theo thứ tự ưu tiên nào.

Gợi ý trả lời:

1. Các mẫu định dạng trong CSS có tính kế thừa trong mô hình cây HTML. Nếu định dạng CSS áp dụng cho một phần tử HTML nào đó, thì mặc định việc này được kế thừa cho tất cả các phần tử con, cháu.
2. Nếu trong định dạng CSS có nhiều định dạng khác nhau cùng áp dụng cho 1 phần tử thì trình duyệt sẽ chọn định dạng cuối cùng trong danh sách.

CÂU HỎI

Câu hỏi 1 (trang 81): Giả sử có mẫu định dạng sau.

Khi đó toàn bộ văn bản của trang web sẽ mặc định thể hiện với phông có chân, đúng hay sai?

Gợi ý trả lời:

Sai. Toàn bộ văn bản của trang web mặc định sẽ kế thừa từ <body>, và do đó sẽ có phông mặc định sans-serif là phông không chân.
Câu hỏi 2 (trang 81): Giả sử có mẫu định dạng như sau.

Mẫu nào sẽ được áp dụng cho h1, mẫu nào sẽ được áp dụng cho thẻ p.

Gợi ý trả lời:

- Mẫu định dạng:
h1 {text-align: center !important;} sẽ được áp dụng cho các phần tử <h1>.
- Với thẻ p, các mẫu định dạng:
body {font-family: sans-serif;} sẽ được áp dụng.

LUYỆN TẬP

Luyện tập 1 (trang 82): Mỗi phông chữ sau đây thuộc loại nào?

Gợi ý trả lời:

a) Phông có chân. Serif.
b) Phông khoảng cách đều nhau. Monospace.
c) Phông không chân. Sans-serif.
d) Phông kiểu chữ viết tay. Cursive.
e) Phông không chân. Sans-serif.
f) Phông trừu tượng. Fantasy.
g) Phông khoảng cách đều nhau. Monospace.
h) Phông khoảng cách đều nhau. Monospace.
Luyện tập 2 (trang 82): Hãy liệt kê các thuộc tính CSS liên quan đến định dạng đoạn văn bản sau:

Gợi ý trả lời:

Các thuộc tính CSS liên quan đến định dạng đoạn văn bản trên là:
- Dòng đầu tiên sử dụng các định dạng: font-size, color.
- Dòng thứ hai sử dụng các định dạng: text-align, color.
- Hai dòng cuối sử dụng các định dạng: font-family, font-style.

VẬN DỤNG

Vận dụng 1 (trang 82): Tìm hiểu thêm các thuộc tính phông chữ như font-variant và thuộc tính dòng văn bản như letter-space (khoảng cách giữa các kí tự), word-space (khoảng cách các từ) và text-shadow (chữ bóng).

Gợi ý trả lời:

- font-variant: Thuộc tính này được sử dụng để xác định kiểu chữ viết hoa của văn bản. Giá trị phổ biến của thuộc tính này bao gồm:
+ normal: Chữ in thường (mặc định).
+ small caps: Chữ viết hoa nhỏ.
- letter-spacing: Thuộc tính này xác định khoảng cách giữa các kí tự trong một đoạn văn bản. Giá trị của thuộc tính này có thể là số âm (kích thước kí tự thu nhỏ lại) hoặc số dương (kích thước kí tự mở rộng ra). Ví dụ: letter-spacing: 2px.
- word-spacing: Thuộc tính này xác định khoảng cách giữa các từ trong một đoạn văn bản. Giá trị của thuộc tính này cũng có thể là số âm hoặc số dương. Ví dụ: word-spacing: 5px.
- text-shadow: Thuộc tính này cho phép bạn thêm hiệu ứng bóng cho văn bản. Bạn có thể xác định màu sắc của bóng, độ mờ, và vị trí của bóng. Ví dụ: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5).
Vận dụng 2 (trang 82): Với bài đọc thêm Lịch sử CSS (Bài 13), em hãy thiết lập hai tệp CSS khác nhau để định dạng cho trang web mô tả bài đọc thêm này. Hai kiểu định dạng được thiết lập cần khác nhau về phông chữ, cỡ chữ và màu chữ.

Gợi ý trả lời:

- Kiểu 1: