Đâ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?
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?
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.
1. Mở và chỉnh sửa tệp style.css
Thêm đoạn CSS sau vào tệp styles/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.html và album.html:
Tệp Index.html
Thêm id="submit" cho nút lệnh submit trong 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:
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.
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".
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:
Tệp Hobbies.html & Album.html
Thêm class="bg" vào thẻ <body> trong các tệp hobbies.html và album.html:
Thêm id="submit" cho nút lệnh submit trong tệp index.html:
- 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:
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.
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.
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
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:
Bài 1. Cơ sở mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng
Bài 1. Làm quen với ngôn ngữ đánh dấu siêu văn bản
Bài 2. Định dạng văn bản và siêu tạo liên kết
Bài 3. Thực hành định dạng văn bản và tạo siêu liên kết
Bài 4. Trình bày nội dung theo dạng danh sách, bảng biểu
Bài 5. Chèn hình ảnh, âm thanh, video và sử dụng khung
Bài 6. Tạo biểu mẫu
Bài 7. Thực hành tạo biểu mẫu
Bài 8. Làm quen với CSS
Bài 9. Thực hành định dạng một số thuộc tính CSS
Bài 10. Bộ chọn lớp, bộ chọn định danh
Bài 11. Mô hình hộp, bố cục trang web
Bài 12. Dự án nhỏ: Tạo trang web báo tường
Bài 2. Định dạng văn bản và siêu tạo liên kết
Bài 3. Thực hành định dạng văn bản và tạo siêu liên kết
Bài 4. Trình bày nội dung theo dạng danh sách, bảng biểu
Bài 5. Chèn hình ảnh, âm thanh, video và sử dụng khung
Bài 6. Tạo biểu mẫu
Bài 7. Thực hành tạo biểu mẫu
Bài 8. Làm quen với CSS
Bài 9. Thực hành định dạng một số thuộc tính CSS
Bài 10. Bộ chọn lớp, bộ chọn định danh
Bài 11. Mô hình hộp, bố cục trang web
Bài 12. Dự án nhỏ: Tạo trang web báo tường
Bài 1. Giới thiệu nhóm nghề Dịch vụ và Quản trị trong ngành Công nghệ thông tin
Bài 2. Một số nghề khác trong ngành Công nghệ thông tin và một số nghề ứng dụng Công nghệ thông tin
Bài 3. Dự án nhỏ: Tìm hiểu thông tin tuyển sinh và hướng nghiệp về lĩnh vực đào tạo “Máy tính và Công nghệ thông tin” ở Việt Nam.
Bài 2. Một số nghề khác trong ngành Công nghệ thông tin và một số nghề ứng dụng Công nghệ thông tin
Bài 3. Dự án nhỏ: Tìm hiểu thông tin tuyển sinh và hướng nghiệp về lĩnh vực đào tạo “Máy tính và Công nghệ thông tin” ở Việt Nam.
Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng
Bài 1. Giới thiệu phần mềm tạo website
Bài 2. Tạo website bằng phần mềm
Bài 3. Tạo thanh điều hướng cho trang web
Bài 4. Tạo nội dung văn bản cho trang web
Bài 5. Tạo nội dung hình ảnh cho trang web
Bài 6. Tạo biểu mẫu cho trang web và xuất bản website
Bài 7. Tạo sản phẩm theo nhóm (Bài tập nhóm)
Bài 2. Tạo website bằng phần mềm
Bài 3. Tạo thanh điều hướng cho trang web
Bài 4. Tạo nội dung văn bản cho trang web
Bài 5. Tạo nội dung hình ảnh cho trang web
Bài 6. Tạo biểu mẫu cho trang web và xuất bản website
Bài 7. Tạo sản phẩm theo nhóm (Bài tập nhóm)
Bài 1. Môi trường truyền dẫn
Bài 2. Thiết bị mạng
Bài 3. Thiết kế mạng LAN
Bài 4. Thực hành về nhận diện thiết bị mạng và thiết kế mạng LAN (Bài tập nhóm)
Bài 2. Thiết bị mạng
Bài 3. Thiết kế mạng LAN
Bài 4. Thực hành về nhận diện thiết bị mạng và thiết kế mạng LAN (Bài tập nhóm)
Bài 1. Giới thiệu về học máy
Bài 2. Giới thiệu về khoa học dữ liệu
Bài 3. Giới thiệu về khoa học dữ liệu (tiếp theo)
Bài 4. Thực hành phân tích dữ liệu
Bài 2. Giới thiệu về khoa học dữ liệu
Bài 3. Giới thiệu về khoa học dữ liệu (tiếp theo)
Bài 4. Thực hành phân tích dữ liệu
CÁC CHUYÊN MỤC LIÊN QUAN:
