Giải Tin học 12 - Định hướng khoa học máy tính trang 102

Q: Câu 1

⚠️ Lưu ý thi: Câu b) là "bẫy" rất hay gặp. Dấu phẩy KHÔNG gộp các bộ chọn lại thành một — phải tính riêng từng cái. Nhiều bạn cộng nhầm thành 1+1+1+1+100 = 104, đó là sai.

Q: Câu 2

💡 Mẹo nhớ: Cascading = "cùng sức thì sinh sau thắng". Chỉ dùng đến nó khi đã hòa về trọng số.

Q: Câu 1

⚠️ Lưu ý thi: Câu b) là "bẫy" rất hay gặp. Dấu phẩy KHÔNG gộp các bộ chọn lại thành một — phải tính riêng từng cái. Nhiều bạn cộng nhầm thành 1+1+1+1+100 = 104, đó là sai.

Q: Câu 2

💡 Mẹo nhớ: Cascading = "cùng sức thì sinh sau thắng". Chỉ dùng đến nó khi đã hòa về trọng số.

Q: Câu 1

⚠️ Lưu ý thi: Câu b) là "bẫy" rất hay gặp. Dấu phẩy KHÔNG gộp các bộ chọn lại thành một — phải tính riêng từng cái. Nhiều bạn cộng nhầm thành 1+1+1+1+100 = 104, đó là sai.

Q: Câu 2

💡 Mẹo nhớ: Cascading = "cùng sức thì sinh sau thắng". Chỉ dùng đến nó khi đã hòa về trọng số.

Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 102–103

Nguon: Tin Hoc 12 KHMT (trang 102 – 103)

⚠️ Lưu ý: Ảnh em gửi thực chất là trang 100 và 101 (không phải 102 – 103). Thầy sẽ giải đúng theo nội dung có trong ảnh.

🔍 Kiến thức cần nhớ

Quy tắc tính trọng số (độ ưu tiên/specificity) của bộ chọn CSS:

Thành phần bộ chọn	Trọng số
Bộ chọn định danh (ID, dạng `#ten`)	100
Bộ chọn lớp `.ten`, pseudo-class `:hover`, thuộc tính `[...]`	10
Bộ chọn phần tử (element) `p`, `h1`, pseudo-element	1
Các toán tử kết hợp `>`, `+`, `~`, dấu cách	0 (không tính)

Nguyên tắc áp dụng:

Mẫu CSS nào có trọng số cao nhất sẽ được áp dụng.
Nếu cùng trọng số thì áp dụng nguyên tắc cascading (mẫu nào viết sau cùng sẽ thắng).

💡 Mẹo nhớ: "100 – 10 – 1": ID mạnh nhất → class/pseudo-class → element yếu nhất. Toán tử kết hợp luôn = 0.

⚙️ Bài tập (mục Câu hỏi – trang 100)

Câu 1

Đề bài: Tính trọng số của các mẫu định dạng sau:
a) #n12 > .test
b) h1, h2, h3, h4 > #new

c) p + em.test

Cách 1 — Tách từng thành phần rồi cộng trọng số

a) #n12 > .test

#n12 là ID → 100
> là toán tử con trực tiếp → 0
.test là class → 10

→ Trọng số = 100 + 10 = 110

b) h1, h2, h3, h4 > #new

Dấu phẩy , ngăn cách thành các bộ chọn độc lập, nên phải tính trọng số riêng cho từng nhóm:

h1 → 1
h2 → 1
h3 → 1
h4 > #new → 1 (h4) + 0 (>) + 100 (#new) = 101

→ Có 4 trọng số riêng: 1, 1, 1, 101

c) p + em.test

p là element → 1
+ là toán tử kề → 0
em là element → 1
.test là class → 10

→ Trọng số = 1 + 1 + 10 = 12

⚠️ Lưu ý thi: Câu b) là "bẫy" rất hay gặp. Dấu phẩy KHÔNG gộp các bộ chọn lại thành một — phải tính riêng từng cái. Nhiều bạn cộng nhầm thành 1+1+1+1+100 = 104, đó là sai.

Câu 2

Đề bài: Khi nào nguyên tắc cascading (thứ tự cuối cùng) được áp dụng cho một dãy các định dạng CSS?

Cách 1 — Trả lời theo lý thuyết

Nguyên tắc cascading (lấy mẫu định dạng viết sau cùng) chỉ được áp dụng khi:

Có nhiều mẫu định dạng CSS cùng tác động lên cùng một phần tử HTML, cùng một thuộc tính, và
Các mẫu đó có trọng số bằng nhau (cùng mức ưu tiên).

Khi đó trình duyệt không thể phân định bằng trọng số, nên sẽ chọn mẫu xuất hiện cuối cùng trong tệp CSS để áp dụng.

💡 Mẹo nhớ: Cascading = "cùng sức thì sinh sau thắng". Chỉ dùng đến nó khi đã hòa về trọng số.

⚙️ Phần THỰC HÀNH (trang 100 – 101)

Nhiệm vụ 1 — Nhập tệp HTML

Đề bài: Nhập tệp HTML với nội dung "Giới thiệu HTML và CSS".

Tệp HTML mẫu (tổng hợp đầy đủ các yêu cầu trong sách):




  
  Giới thiệu HTML và CSS


  Giới thiệu HTML và CSS

  
    
      Giới thiệu HTML
      Giới thiệu CSS
    
  

  HTML là gì
  HTML – tên viết tắt của HyperText Markup Language, ngôn ngữ đánh dấu
     siêu văn bản, là ngôn ngữ đặc biệt dùng để thiết kế nội dung các trang
     web và được thể hiện bằng trình duyệt.
  Cấu trúc mỗi tệp HTML là một cấu trúc dạng cây của các phần tử HTML.
  Xem logo của HTML.
  

  CSS là gì
  CSS (Cascading Style Sheets) là ngôn ngữ định dạng đặc biệt được dùng
     để mô tả cách thể hiện của văn bản HTML trong trang web.
  Mỗi định dạng CSS đều có dạng chuẩn là bộ chọn {thuộc tính : giá trị ;}.
  Xem logo của CSS.

Nhiệm vụ 2 — Thiết lập định dạng bằng CSS

Đề bài: Định dạng tệp HTML ở Nhiệm vụ 1 theo các yêu cầu đã cho.

Cách 1 — Theo hướng dẫn (Hình 17.1)

Đặt khối

Giải thích bám sát từng yêu cầu của đề:

Tiêu đề chính màu đỏ, căn giữa: h1 {color: red; text-align: center;}
Tiêu đề nhỏ màu xanh, đậm: h2 {color: blue;} (thẻ h2 mặc định đã in đậm).
Phần liên kết trên một hàng ngang, căn phải, nền xanh lá cây, di chuột chữ đỏ: dùng nav {text-align: right;}, li {display: inline; background-color: lime; ...} và a:hover {color: red;}.
Đoạn đầu tiên dưới mỗi tiêu đề màu đỏ, các đoạn khác giữ màu mặc định: dùng bộ chọn kề h2 + p {color: red;} (chỉ chọn đoạn p đứng ngay sau h2).
Ẩn logo, nháy chuột mới hiện: img {display: none;} để ẩn, rồi .img:active + img {display: block;} để khi kích hoạt dòng "Xem logo của..." (lớp .img) thì ảnh kề sau hiện ra.

⚠️ Lưu ý thi: Phân biệt rõ h2 + p (chọn một đoạn p kề ngay sau h2) với h2 p (chọn mọi p nằm bên trong h2) và h2, p (chọn cả h2 và mọi p). Sai một dấu là khác hẳn kết quả.

⚙️ LUYỆN TẬP (trang 101)

Câu 1

Đề bài: Giải thích sự khác nhau giữa hai định dạng sau:

#p123 + p {color: red;}
h2#p123 + p {color: red;}

Cách 1 — So sánh đối tượng được chọn

#p123 + p

Chọn phần tử p đứng ngay sau một phần tử bất kỳ có id="p123".
Phần tử mang id đó có thể là div, h2, span... đều được.

h2#p123 + p

Chọn phần tử p đứng ngay sau một phần tử vừa là h2 vừa có id="p123".
Điều kiện chặt hơn: phần tử đứng trước bắt buộc là thẻ h2. Nếu id p123 đặt trên thẻ khác (ví dụ div#p123) thì mẫu này không áp dụng.

→ Khác nhau ở điều kiện về phần tử đứng trước: mẫu thứ hai yêu cầu cụ thể là h2, mẫu thứ nhất không quan tâm loại thẻ.

Cách 2 — So sánh bằng trọng số

#p123 + p = 100 (#p123) + 0 (+) + 1 (p) = 101
h2#p123 + p = 1 (h2) + 100 (#p123) + 0 (+) + 1 (p) = 102

Mẫu thứ hai có trọng số cao hơn (102 > 101), nên nếu cả hai cùng tác động lên một phần tử thỏa điều kiện thì mẫu h2#p123 + p sẽ thắng.

💡 Mẹo nhớ: Thêm tên thẻ vào trước ID (h2#p123) vừa thu hẹp phạm vi chọn, vừa tăng trọng số thêm 1 (do có thêm element).

Câu 2

Đề bài: Trong phần Thực hành, các tên riêng (tên người, tên tổ chức) cần được bổ sung định dạng đóng khung và in nghiêng. Em sẽ thực hiện như thế nào?

Cách 1 — Dùng lớp (class) áp cho thẻ bao quanh

Bước 1: Bọc các tên riêng trong HTML bằng thẻ gắn lớp:

HTML do nhà khoa học Tim Berners-Lee
   thiết lập vào những năm 1990...

Bước 2: Định nghĩa lớp đó trong CSS:

.ten {
  border: 1px solid black;   /* đóng khung */
  font-style: italic;        /* in nghiêng */
  padding: 2px;              /* để khung không sát chữ (tùy chọn) */
}

Cách 2 — Dùng sẵn thẻ ngữ nghĩa rồi thêm khung

Tên riêng có thể bọc trong thẻ (vốn in nghiêng), chỉ cần bổ sung khung qua CSS:

Tim Berners-Lee

.ten { border: 1px solid black; } /* font-style: italic do thẻ lo */

⚠️ Lưu ý thi: Nên dùng hoặc thay vì tự đặt thuộc tính style trực tiếp, vì cách này gọn, dễ tái sử dụng và đúng tinh thần tách nội dung khỏi định dạng.

⚙️ VẬN DỤNG (trang 101)

Câu 1

Đề bài: Tìm hiểu thêm các dạng pseudo-class khác, nêu ý nghĩa và ví dụ ứng dụng thực tế.

Cách 1 — Liệt kê các pseudo-class thông dụng

Pseudo-class Ý nghĩa Ví dụ ứng dụng thực tế
:link Liên kết chưa được truy cập Tô màu link mới: a:link {color: blue;}
:visited Liên kết đã truy cập Đổi màu link đã xem: a:visited {color: purple;}
:active Phần tử đang được kích hoạt (đang nhấn) Hiệu ứng lúc bấm nút: button:active {background: gray;}
:focus Phần tử đang được chọn (con trỏ) Làm nổi ô nhập đang gõ: input:focus {border-color: red;}
:first-child Phần tử con đầu tiên Định dạng mục đầu danh sách: li:first-child {font-weight: bold;}
:last-child Phần tử con cuối cùng Bỏ viền mục cuối: li:last-child {border: none;}
:nth-child(n) Phần tử con thứ n Tô màu hàng chẵn của bảng: tr:nth-child(even) {background: #eee;}
:checked Ô chọn/radio đang được tick Hiện nội dung khi tick: dùng cho menu, switch
:disabled Phần tử bị vô hiệu hóa Làm mờ nút khóa: button:disabled {opacity: 0.5;}
:hover Khi di chuột lên Đổi màu nút khi rê chuột (đã dùng trong bài)

Câu 2

Đề bài: Tìm hiểu thêm các dạng pseudo-element khác, nêu ý nghĩa và ví dụ ứng dụng thực tế.

Cách 1 — Liệt kê các pseudo-element thông dụng

Pseudo-element dùng ký hiệu hai dấu hai chấm :: (CSS3) để định dạng một phần của phần tử.

Pseudo-element Ý nghĩa Ví dụ ứng dụng thực tế
::first-line Dòng đầu tiên của đoạn văn In đậm dòng đầu bài báo: p::first-line {font-weight: bold;}
::first-letter Chữ cái đầu tiên Tạo chữ cái lớn đầu đoạn (drop cap): p::first-letter {font-size: 2em;}
::before Chèn nội dung trước phần tử Thêm biểu tượng trước tiêu đề: h2::before {content: "▶ ";}
::after Chèn nội dung sau phần tử Thêm dấu sau link ngoài: a::after {content: " ↗";}
::selection Phần văn bản đang được bôi đen Đổi màu nền khi bôi chọn: ::selection {background: yellow;}
::placeholder Chữ gợi ý trong ô nhập Làm nhạt gợi ý: input::placeholder {color: gray;}

💡 Mẹo nhớ: pseudo-class (:hover, :focus) mô tả trạng thái của phần tử; còn pseudo-element (::before, ::first-letter) mô tả một bộ phận của phần tử. CSS3 quy ước pseudo-element dùng ::, pseudo-class dùng :.

🎯 Ghi nhớ: - Trọng số bộ chọn: ID = 100, class/pseudo-class = 10, element = 1, toán tử = 0. - Mẫu trọng số cao nhất được áp dụng; bằng nhau mới xét cascading (viết sau thắng). - Dấu phẩy , tách thành các bộ chọn độc lập — tính trọng số riêng. - Phân biệt + (kề ngay sau), khoảng trắng (con cháu), và , (liệt kê). - : cho trạng thái (pseudo-class), :: cho bộ phận (pseudo-element).

Pseudo-class	Ý nghĩa	Ví dụ ứng dụng thực tế
`:link`	Liên kết chưa được truy cập	Tô màu link mới: `a:link {color: blue;}`
`:visited`	Liên kết đã truy cập	Đổi màu link đã xem: `a:visited {color: purple;}`
`:active`	Phần tử đang được kích hoạt (đang nhấn)	Hiệu ứng lúc bấm nút: `button:active {background: gray;}`
`:focus`	Phần tử đang được chọn (con trỏ)	Làm nổi ô nhập đang gõ: `input:focus {border-color: red;}`
`:first-child`	Phần tử con đầu tiên	Định dạng mục đầu danh sách: `li:first-child {font-weight: bold;}`
`:last-child`	Phần tử con cuối cùng	Bỏ viền mục cuối: `li:last-child {border: none;}`
`:nth-child(n)`	Phần tử con thứ n	Tô màu hàng chẵn của bảng: `tr:nth-child(even) {background: #eee;}`
`:checked`	Ô chọn/radio đang được tick	Hiện nội dung khi tick: dùng cho menu, switch
`:disabled`	Phần tử bị vô hiệu hóa	Làm mờ nút khóa: `button:disabled {opacity: 0.5;}`
`:hover`	Khi di chuột lên	Đổi màu nút khi rê chuột (đã dùng trong bài)

Pseudo-element	Ý nghĩa	Ví dụ ứng dụng thực tế
`::first-line`	Dòng đầu tiên của đoạn văn	In đậm dòng đầu bài báo: `p::first-line {font-weight: bold;}`
`::first-letter`	Chữ cái đầu tiên	Tạo chữ cái lớn đầu đoạn (drop cap): `p::first-letter {font-size: 2em;}`
`::before`	Chèn nội dung trước phần tử	Thêm biểu tượng trước tiêu đề: `h2::before {content: "▶ ";}`
`::after`	Chèn nội dung sau phần tử	Thêm dấu sau link ngoài: `a::after {content: " ↗";}`
`::selection`	Phần văn bản đang được bôi đen	Đổi màu nền khi bôi chọn: `::selection {background: yellow;}`
`::placeholder`	Chữ gợi ý trong ô nhập	Làm nhạt gợi ý: `input::placeholder {color: gray;}`

Chế độ đọc sách →
← Trang trước Trang sau →