Thầy cô kiến thức thâm sâu
Học sinh chăm chỉ bước đầu thành công.

BÀI 10 - BỘ CHỌN LỚP, BỘ CHỌN ĐỊNH DANH (CÁNH DIỀU - CS & ICT)

Bài 10- Bộ chọn lớp, bộ chọn định danh (Cánh diều - cs & ict)
 Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Cánh diều). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.
Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động Hoạt động
Vận dụng Câu hỏi tự kiểm tra
Trong một trang web có 5 đoạn văn bản, em có biết khai báo CSS như thế nào để trình bày đoạn văn bản đầu tiên và cuối cùng chữ màu đỏ, còn các đoạn văn bản còn lại chữ màu xanh không?
Gợi ý trả lời:
 p:first-of-type, p:last-of-type {
  color: red; /* Đoạn đầu tiên và cuối cùng màu đỏ */
 }
 p:not(:first-of-type):not(:last-of-type) {
  color: blue; /* Các đoạn còn lại màu xanh */
 }
Giải thích:
 - p:first-of-type → Chọn đoạn đầu tiên trong trang.
 - p:last-of-type → Chọn đoạn cuối cùng trong trang.
 - p:not(:first-of-type):not(:last-of-type) → Chọn tất cả các đoạn không phải đoạn đầu và đoạn cuối (tức là các đoạn giữa).
Em có biết cách khai báo định dạng CSS để chỉ áp dụng cho một phần tử cụ thể trên trang web không?
Gợi ý trả lời:
Em biết. Để áp dụng CSS cho một phần tử cụ thể trên trang web, ta có thể sử dụng bộ chọn định danh (ID). Tạo website cá nhân:
Câu 1. Khai báo bộ chọn lớp, bộ chọn định danh, giá trị thuộc tính class cho phần tử body, id để hoàn thiện website cá nhân đã có ở các bài học trước.
Gợi ý thực hiện:
 - Mở tệp “style.css”: Khai báo bộ chọn lớp có tên bg để thiết lập màu nền (ví dụ: lightgney). Khai báo bộ chọn định danh có tên submit để trình bày màu của nút lệnh (ví dụ: blue).
 - Bổ sung khai báo giá trị thuộc tính class cho phần tử body của các tệp “hobbies.html” và “album.html" là bg.
 - Bổ sung khai báo giá trị thuộc tính id cho nút lệnh submit trong tệp "index.html" là submit.
Câu 2. Em hãy mở tệp “index.html" để xem website cá nhân và tự đánh giá có hài lòng với thành quả của bản thân không.
Gợi ý cách thực hiện:
Câu 1.
1. Mở và chỉnh sửa tệp style.css
 Thêm đoạn CSS sau vào tệp styles/style.css:
Thêm đoạn mã vào tệp style.css
2. Cập nhật các tệp HTML
Tệp Hobbies.html & Album.html
 Thêm class="bg" vào thẻ <body> trong các tệp hobbies.htmlalbum.html:
Thêm đoạn mã vào tệp hobbies.html và album.html
Tệp Index.html
 Thêm id="submit" cho nút lệnh submit trong tệp index.html:
Thêm đoạn mã vào tệp index.html
3. Kiểm tra kết quả
 - Khi mở hobbies.html và album.html, bạn sẽ thấy nền trang có màu xám nhạt.
 - Khi mở index.html, nút submit sẽ có màu xanh dương, khi rê chuột vào sẽ đổi sang xanh đậm.
Câu 2. Mở tệp index.html để xem website và tự đánh giá nhé.
Câu 1. Cho khai báo định dạng CSS sau: a.xanh (color: blue; font-size:15px;}. Trong các khai báo HTML sau, khai báo nào sẽ áp dụng định dạng CSS trên?
 A. <p class="xanh">Hoc CSS </p>
 B. <p id= "xanh">Học CSS</p>
 C. <a href="https://www.w3schools.com" id="xanh">Hoc CSS</a>
 D. <a href="https://www.w3schools.com" class="xanh">Học CSS </a>
Câu 2.
Cô giáo yêu cầu khai báo và áp dụng CSS để định dạng văn bản HTML có nội dung như ở Hình 6a để có kết quả hiển thị trên trình duyệt web như ở Hình 6b. Sau khi tìm hiểu, các bạn học sinh đã đưa ra các giải pháp sau đây. Em hãy cho biết mỗi phát biểu sau là đúng hay sai:
Hình 6a và 6b
a) Khai báo CSS sử dụng bộ chọn phần tử cho phần tử h1 vì nội dung văn bản HTML chỉ gồm các phần tử tiêu đề mục h1.
b) Thực hiện các bước sau:
Bước 1. Khai báo CSS sử dụng bộ chọn lớp để định dạng màu chữ khác với màu mặc định.
Bước 2. Khai báo thuộc tính class="tieude1" cho các tiêu đề mục chữ có màu đỏ, khai báo thuộc tính class="tieude2" cho các tiêu đề mục chữ có màu xanh.
c) Thực hiện các bước sau:
Bước 1. Khai báo CSS sử dụng bộ chọn định danh để định dạng tiêu đề mục chữ có màu xanh, các tiêu đề khác sử dụng bộ chọn phần tử h1.
Bước 2. Khai báo thuộc tính class = "tieude1" cho tiêu đề mục chữ có màu xanh.
d) Thực hiện các bước sau:
Bước 1. Kết hợp khai báo CSS sử dụng bộ chọn lớp, bộ chọn định danh
Bước 2. Khai báo thuộc tính class="tieude1" cho các tiêu đề mục chữ màu đỏ, khai báo thuộc tính id= "tieude2" cho các tiêu đề mục chữ có màu xanh.
Gợi ý trả lời:
Câu 1.
 A. <p class="xanh">Học CSS</p>
 → Sai. Phần tử <p> không phải là <a>, trong khi CSS chỉ áp dụng cho a.xanh.
 B. <p id="xanh">Học CSS</p>
 → Sai. ID (id="xanh") không liên quan đến class="xanh". CSS chỉ áp dụng cho class="xanh" trên thẻ <a>.
 C. <a href="https://www.w3schools.com" id="xanh">Học CSS</a>
 → Sai. CSS chọn a.xanh (class), nhưng ở đây lại dùng id="xanh" thay vì class="xanh".
 D. <a href="https://www.w3schools.com" class="xanh">Học CSS</a>
 → Đúng.
  - Thẻ <a> có class="xanh" đúng với bộ chọn a.xanh.
  - CSS sẽ được áp dụng: màu chữ xanh và cỡ chữ 15px.
Câu 2.
 a) "Khai báo CSS sử dụng bộ chọn phần tử cho phần tử h1 vì nội dung văn bản HTML chỉ gồm các phần tử tiêu đề mục h1."
 → Đúng. Nếu toàn bộ nội dung chỉ gồm các tiêu đề <h1>, có thể sử dụng bộ chọn phần tử h1 { color: ...; } để định dạng chung mà không cần dùng class hoặc id.
 b) "Khai báo CSS sử dụng bộ chọn lớp để định dạng màu chữ khác với màu mặc định."
 → Đúng:
  - Sử dụng class (.tieude1 { color: red; }, .tieude2 { color: blue; }) giúp dễ quản lý và áp dụng cho nhiều phần tử có cùng kiểu định dạng.
  - Khi khai báo <h1 class="tieude1">...</h1>, tiêu đề sẽ có màu đỏ, còn <h1 class="tieude2">...</h1> có màu xanh.
 c) "Khai báo CSS sử dụng bộ chọn định danh để định dạng tiêu đề mục chữ có màu xanh, các tiêu đề khác sử dụng bộ chọn phần tử h1."
 → Sai:
  - Bộ chọn id (#tieude1 { color: blue; }) chỉ nên được dùng cho một phần tử duy nhất trên trang, không phù hợp nếu có nhiều tiêu đề cần màu xanh.
  - Ngoài ra, bước 2 lại sử dụng class="tieude1", nhưng tieude1 đã được khai báo dưới dạng ID → Không hợp lệ.
 d) "Kết hợp khai báo CSS sử dụng bộ chọn lớp, bộ chọn định danh."
 → Đúng. Kết hợp class (.tieude1 { color: red; }) và id (#tieude2 { color: blue; }) giúp phân biệt rõ ràng:
  - Các tiêu đề cần dùng nhiều lần sẽ dùng class="tieude1".
  - Tiêu đề chỉ có một trên trang sẽ dùng id="tieude2".

---The end!---

CÙNG CHUYÊN MỤC:
Chủ đề A
Chủ đề B
Chủ đề D
Chủ đề F
Chủ đề G
Chủ đề A (ICT)
Chủ đề E (ICT)
Chủ đề B (CS)
Chủ đề F (CS)
Chủ đề F (CS1)
Chủ đề F (CS1)

CÁC CHUYÊN MỤC LIÊN QUAN:
☎ TIN HỌC 10-KẾT NỐI TRI THỨC
☎ TIN HỌC 11-KẾT NỐI TRI THỨC
☎ TIN HỌC 12-KẾT NỐI TRI THỨC

Tổng số lượt xem

Chăm chỉ chiến thắng tài năng
khi tài năng không chịu chăm chỉ.

- Tim Notke -

Bản quyền
Liên hệ
Chat Zalo
Chat Facebook