Giải Tin học 12 - Định hướng khoa học máy tính trang 100
Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 100–101
Nguon: Tin Hoc 12 KHMT (trang 100 – 101)
⚠️ Lưu ý: Ảnh gửi kèm là nội dung trang 98 – 99 (bài 17 về CSS, lớp giả và mức độ ưu tiên). Mình giải theo đúng nội dung trong ảnh nhé.
🔍 Kiến thức cần nhớ
Lớp giả (pseudo-class) và phần tử giả (pseudo-element)
- Lớp giả (pseudo-class): mô tả một trạng thái đặc biệt của phần tử (ví dụ khi rê chuột, khi nháy chuột, khi được chọn...). Cú pháp dùng dấu hai chấm đơn, ví dụ
:hover,:active,:focus. - Phần tử giả (pseudo-element): mô tả một thành phần nhỏ hơn bên trong phần tử (ví dụ dòng đầu tiên, chữ cái đầu tiên...). Cú pháp dùng dấu hai chấm kép, ví dụ
::first-line,::first-letter.
Một số lớp giả thường gặp
:hover→ khi con trỏ chuột di chuyển qua phần tử.:active→ khi phần tử đang được nháy (nhấn) chuột.:focus→ khi phần tử đang được chọn (ví dụ ô nhập liệu).
Mức độ ưu tiên khi áp dụng CSS (Bảng 17.3), từ cao xuống thấp:
!important- CSS trực tiếp (inline CSS – thuộc tính
style) - CSS liên quan kích thước thiết bị (Media type)
- Trọng số CSS (specificity)
- Nguyên tắc thứ tự cuối cùng (rule order)
- Kế thừa từ CSS cha
- Mặc định theo trình duyệt
Cách tính trọng số (specificity) – Bảng 17.4:
| Thành phần bộ chọn | Giá trị đóng góp |
|---|---|
| Mã định danh (ID) | 100 |
| Lớp, lớp giả, bộ chọn kiểu thuộc tính (class, pseudo-class, attribute) | 10 |
| Phần tử, phần tử giả (element, pseudo-element) | 1 |
* | 0 |
Trọng số của một mẫu định dạng = tổng giá trị các thành phần trong bộ chọn.
💡 Mẹo nhớ: "100 – 10 – 1 – 0" tương ứng với "ID – Class – Element – Sao (*)". ID mạnh nhất, dấu sao yếu nhất.
⚙️ Bài tập
Câu 1
Đề bài: Muốn áp dụng đổi màu chữ một vùng trên màn hình khi nháy chuột tại vùng đó thì cần phải dùng định dạng CSS nào?
Cách 1 — Dùng lớp giả mô tả trạng thái nháy chuột
"Nháy chuột (nhấn giữ) tại một vùng" chính là trạng thái active của phần tử. Vì vậy ta dùng lớp giả :active để đổi màu chữ.
Ví dụ với đoạn văn bản :
p:active {
color: red;
}Khi người dùng nháy (nhấn) chuột vào đoạn văn bản đó, chữ sẽ đổi sang màu đỏ.
Cách 2 — Liên hệ phân biệt các trạng thái
Tùy ý nghĩa "tác động chuột" mà chọn lớp giả phù hợp:
:active→ đúng lúc đang nháy/nhấn chuột.:focus→ khi vùng đang được chọn (giữ tiêu điểm).
Vì đề yêu cầu "khi nháy chuột tại vùng đó", lựa chọn chính xác là lớp giả :active.
⚠️ Lưu ý thi: Dễ nhầm:activevới:hover.:active= đang nhấn chuột;:hover= chỉ rê chuột qua, chưa nhấn.
Câu 2
Đề bài: Muốn tăng kích thước một đoạn văn bản khi di chuyển chuột qua đoạn văn bản đó thì cần dùng định dạng CSS nào?
Cách 1 — Dùng lớp giả mô tả trạng thái rê chuột
"Di chuyển chuột qua" chính là trạng thái hover. Ta dùng lớp giả :hover kết hợp thuộc tính font-size để tăng kích thước chữ:
p:hover {
font-size: 150%;
}Khi con trỏ chuột di chuyển qua đoạn văn bản , kích thước chữ sẽ tăng lên (ví dụ 150% so với ban đầu).
Cách 2 — Đặt giá trị tuyệt đối thay vì phần trăm
Có thể tăng kích thước bằng đơn vị cụ thể thay cho phần trăm:
p:hover {
font-size: 24px;
}Cốt lõi vẫn là dùng lớp giả :hover để bắt sự kiện rê chuột qua phần tử.
💡 Mẹo nhớ: "hover" = "lơ lửng/rê qua" → con trỏ lướt qua mà không nhấn.
Câu 3 (Hoạt động 2)
Đề bài: Giả sử có định dạng CSS như sau:
CSS trên áp dụng cho phần tử HTML:
Tin học 12
Khi đó cụm từ "Tin học 12" sẽ có màu gì?
Cách 1 — Tính trọng số (specificity) của hai bộ chọn
Phần tử chịu tác động của cả hai mẫu định dạng, nên ta so trọng số:
- Bộ chọn
.testlà một lớp (class) → trọng số = 10. - Bộ chọn
plà một phần tử (element) → trọng số = 1.
Vì 10 > 1, theo nguyên tắc mức ưu tiên "Trọng số CSS" (mục 4 của Bảng 17.3), định dạng .test {color: green;} được áp dụng.
Kết luận: Cụm từ "Tin học 12" sẽ có màu xanh lá (green).
Cách 2 — Suy luận nhanh theo thứ bậc bộ chọn
Quy tắc dễ nhớ: bộ chọn theo lớp luôn mạnh hơn bộ chọn theo tên phần tử. Ở đây .test (class) thắng p (element), nên màu cuối cùng là green.
⚠️ Lưu ý thi: Không phải cứ dòng CSS viết sau là thắng. Thứ tự cuối cùng (rule order) chỉ được xét khi trọng số bằng nhau. Trọng số luôn được ưu tiên xét trước.
🎯 Ghi nhớ: -:active→ đổi định dạng khi nháy/nhấn chuột;:hover→ đổi định dạng khi rê chuột qua. - Trọng số: ID = 100, class/pseudo-class = 10, element/pseudo-element = 1,*= 0. Trọng số lớn hơn được ưu tiên. - Khi nhiều mẫu cùng áp dụng: xét trọng số trước, nếu bằng nhau mới xét thứ tự cuối cùng. Vì vậy.test(10) thắngp(1) → chữ màu green.