Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó
Câu hỏi mở đầu trang 76
Đề bài: 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?
Lời giải:
Trong Hình 14.1 có nhiều định dạng phông chữ khác nhau:
- Tiêu đề “Lịch sử CSS”: cỡ chữ lớn, in đậm, màu đỏ.
- Các tên riêng “Hakon Wium Lie” và “Tim Berners-Lee”: dùng phông chữ đặc biệt (khác với văn bản chính) và in nghiêng.
- Phần nội dung còn lại: phông chữ có chân (serif), cỡ chữ vừa, màu đen.
→ Trên cùng một đoạn văn có nhiều định dạng khác nhau về phông chữ, kiểu chữ (nghiêng), độ đậm và màu chữ. Các định dạng này đều có thể thiết lập được bằng CSS.
1. Định dạng văn bản bằng CSS
Hoạt động 1 trang 76
Đề bài: Các đị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.
Lời giải:
CSS hỗ trợ ba nhóm thuộc tính chính để định dạng văn bản:
a) Nhóm định dạng phông chữ (text font):
font-family– chọn phông chữ (serif, sans-serif, monospace, cursive, fantasy).font-size– cỡ chữ.font-style– kiểu chữ (normal, italics).font-weight– độ dày nét chữ (normal, bold, 100–900).
b) Nhóm định dạng màu chữ (text color):
color– màu chữ (black, white, red, blue, green,…).
c) Nhóm định dạng dòng văn bản (text line):
line-height– chiều cao dòng.text-align– căn lề (left, center, right, justify).text-decoration– trang trí dòng chữ (underline, overline, line-through, none).text-indent– thụt lề dòng đầu.
Câu hỏi củng cố mục 1 trang 79
Đề bài:
1. Giải thích các mẫu định dạng CSS sau:
<style>
h1 {color: red; text-align: center;}
p {text-align: justify;}
</style>
Lời giải:
h1 {color: red; text-align: center;}→ tất cả các phần tử<h1>sẽ có màu chữ đỏ và được căn giữa.p {text-align: justify;}→ tất cả các phần tử<p>sẽ được căn đều hai bên.
2. Giả sử mẫu định dạng CSS có dạng sau:
<style>
body {color: blue;}
</style>
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.
Lời giải:
- Mẫu định dạng đặt màu chữ xanh dương cho phần tử
<body>. - Do CSS có tính kế thừa, tất cả các phần tử con, cháu của
<body>(nhưh1,h2,p,span,…) đều sẽ kế thừa màu xanh dương này, trừ các phần tử có định dạng riêng ghi đè.
→ Nhận xét: toàn bộ văn bản trên trang web sẽ hiển thị màu xanh dương (trừ những phần đã được thiết lập màu khác).
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
Đề bài:
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 định dạng ở một phần tử HTML thì định dạng đó có áp dụng cho tất cả các phần tử là con, cháu của phần tử này không?
Lời giải:
Có. CSS có tính kế thừa trong mô hình cây HTML:
- Nếu một mẫu CSS áp dụng cho một phần tử HTML, nó sẽ được tự động áp dụng cho tất cả các phần tử con, cháu của phần tử đó.
- Ví dụ:
body {color: blue;}→ tất cả các phần tử con, cháu của body (h1, h2, p,…) đều có màu chữ xanh. - Ngoại lệ: nếu phần tử con có mẫu định dạng riêng thì mẫu đó sẽ thay thế mẫu kế thừa.
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 như thế nào?
Lời giải:
Khi có nhiều mẫu cùng áp dụng cho một phần tử, trình duyệt sẽ chọn mẫu theo quy tắc:
- Mẫu viết cuối cùng sẽ được áp dụng (tính chất “cascading” của CSS).
- Nếu mẫu có kí hiệu
!important→ ưu tiên cao nhất, không phụ thuộc vào vị trí. - Nếu bộ chọn là
*(phần tử bất kì) → ưu tiên thấp nhất.
Câu hỏi củng cố mục 2 trang 81
Đề bài:
1. Giả sử có mẫu định dạng sau:
<style>
body {font-family: sans-serif;}
</style>
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?
Lời giải:
Sai. Vì:
sans-serifnghĩa là phông chữ không chân (không có chân).- Nếu là phông chữ có chân thì phải viết là
serif.
→ Với mẫu trên, toàn bộ văn bản của trang web sẽ hiển thị bằng phông chữ không chân.
2. Giả sử có mẫu định dạng như sau:
<style>
body {font-family: sans-serif;}
h1 {text-align: center !important;}
h1 {text-align: left;}
* {font-family: serif;}
</style>
Mẫu nào sẽ được áp dụng cho h1, mẫu nào sẽ được áp dụng cho thẻ p?
Lời giải:
Đối với h1:
text-align: có hai mẫu, nhưng mẫu{text-align: center !important;}có!importantnên được ưu tiên cao nhất → h1 được căn giữa.font-family: h1 không có mẫu riêng. Mẫu*có ưu tiên thấp nhất nên không áp dụng khi h1 đã có mẫu khác. h1 sẽ kế thừa từ body →sans-serif(không chân).
Đối với p:
- p không có mẫu định dạng nào riêng.
- Mẫu
* {font-family: serif;}sẽ áp dụng cho p → phông chữ có chân (serif).
Luyện tập
Luyện tập trang 82
Đề bài:
1. Mỗi phông chữ sau đây thuộc loại nào?
a) Times New Roman. b) Courier New. c) Abadi. d) Bradley Hand ITC. e) Berlin Sans FB. f) ALGERIAN. g) Consolas. h) Cascadia.
Lời giải:
| Phông chữ | Loại |
|---|---|
| a) Times New Roman | serif (chữ có chân) |
| b) Courier New | monospace (chữ chiều rộng đều) |
| c) Abadi | sans-serif (chữ không chân) |
| d) Bradley Hand ITC | cursive (chữ viết tay) |
| e) Berlin Sans FB | sans-serif (chữ không chân) |
| f) ALGERIAN | fantasy (chữ trừu tượng) |
| g) Consolas | monospace (chữ chiều rộng đều) |
| h) Cascadia | monospace (chữ chiều rộng đều) |
2. 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:
(Đoạn văn “Trời Hà Nội xanh” – Sáng tác: Văn Ký)
Lời giải:
Quan sát đoạn văn bản, các thuộc tính CSS đã sử dụng gồm:
font-family– phông chữ khác nhau cho tiêu đề và phần lời bài hát.font-size– tiêu đề “Trời Hà Nội xanh” có cỡ chữ lớn hơn phần còn lại.font-weight– tiêu đề và tên “Văn Ký” được in đậm (bold).font-style– các câu thơ được in nghiêng (italics).color– tiêu đề màu xanh dương, “Văn Ký” màu đỏ, phần còn lại màu đen.text-align– tiêu đề căn giữa, “Sáng tác: Văn Ký” căn phải, các câu thơ căn giữa.
Vận dụng
Vận dụng trang 82
Đề bài:
1. 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 giữa các từ) và text-shadow (chữ bóng).
Lời giải:
font-variant: thiết lập biến thể phông chữ, thường dùng giá trịsmall-capsđể chuyển chữ thường thành chữ hoa nhỏ. Ví dụ:p {font-variant: small-caps;}letter-spacing: đặt khoảng cách giữa các kí tự trong văn bản. Giá trị là độ dài (px, em,…). Ví dụ:p {letter-spacing: 2px;}– các kí tự cách nhau thêm 2 pixel.word-spacing: đặt khoảng cách giữa các từ trong văn bản. Ví dụ:p {word-spacing: 5px;}– các từ cách nhau thêm 5 pixel.text-shadow: tạo bóng đổ cho chữ. Cú pháp:text-shadow: x-offset y-offset blur-radius color;Ví dụ:h1 {text-shadow: 2px 2px 4px gray;}– tạo bóng lệch phải, xuống dưới, làm mờ nhẹ và có màu xám.
2. 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ữ.
Lời giải:
Tệp CSS thứ nhất – style1.css (phông có chân, tông đỏ):
/* Kiểu định dạng 1 */
h1 {font-family: Times, serif; font-size: 24px; color: red; text-align: center;}
h2 {font-family: Times, serif; font-size: 18px; color: red;}
p {font-family: Times, serif; font-size: 14px; color: black; text-indent: 15px;}
Tệp CSS thứ hai – style2.css (phông không chân, tông xanh):
/* Kiểu định dạng 2 */
h1 {font-family: Arial, sans-serif; font-size: 28px; color: blue; text-align: center;}
h2 {font-family: Arial, sans-serif; font-size: 20px; color: green;}
p {font-family: Arial, sans-serif; font-size: 16px; color: black; text-indent: 20px;}
Cách liên kết tệp CSS với trang HTML:
Đặt thẻ <link> trong <head> của tệp HTML:
<head>
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
Muốn đổi kiểu định dạng, chỉ cần đổi tên tệp style1.css thành style2.css là toàn bộ trang web thay đổi ngay.
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