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 F11 - ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ <DIV>
(CTST - CS & ICT)

BÀI F11 - ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ <DIV> (CTST - CS & ICT)
 Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). 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.

Khởi động (trang 162 sách ict, trang 129 sách cs)
 Theo em nên dùng thẻ gì để trình bày một bảng danh sách tên học sinh trên trang web?
Gợi ý trả lời
 Theo em, nên dùng thẻ <table< để trình bày bảng danh sách tên học sinh trên trang web, vì đây là thẻ HTML chuyên dùng để tạo và hiển thị bảng.
Làm (trang 163 sách ict, trang 130 sách cs)
 Viết mã lệnh CSS để định kiểu nền màu vàng nhạt cho các hàng lẻ trong bảng.
Gợi ý trả lời
  tr:nth-child(odd): hàng lẻ trong bảng.
  background-color: thuộc tính màu nền.
  #ffffcc: màu vàng nhạt.
Làm (trang 165 sách ict, trang 132 sách cs)
 Viết mã lệnh CSS để tạo ra 3 vùng A, B, C lần lượt nằm kể nhau theo phương ngang.
Gợi ý trả lời
Code HTML:
Code CSS:
Luyện tập (trang 165 sách ict, trang 132 sách cs)
1. Em hãy trình bày những khai báo vùng chọn và thuộc tính dùng để định kiểu đường viền và màu nền cho bảng.
2. Em hãy trình bày những thuộc tính và giá trị dùng để định kiểu cho thẻ <div> giúp tạo bố cục trang web.
3. Ưu điểm của việc tạo bố cục trang web bằng các thẻ <div> là gì?
Gợi ý trả lời
1. Khai báo vùng chọn và thuộc tính dùng để định kiểu đường viền và màu nền cho bảng.
 - Vùng chọn: Sử dụng các selector như table, th, td, hoặc tr.
 - Thuộc tính định kiểu đường viền và màu nền:
  + border: xác định kiểu và độ dày đường viền.
  + border-collapse: gộp hoặc tách đường viền.
  + background-color: đặt màu nền.
 - Code CSS tham khảo:
2. Những thuộc tính và giá trị dùng để định kiểu cho thẻ <div> giúp tạo bố cục trang web.
 Một số thuộc tính thường dùng:
  - width, height: xác định kích thước vùng.
  - background-color: màu nền.
  - margin, padding: khoảng cách.
  - float hoặc display: sắp xếp vị trí.
  - border: viền.
  - box-sizing: kiểm soát cách tính kích thước.
 Code CSS tham khảo:
3. Ưu điểm của việc tạo bố cục trang web bằng các thẻ <div> là:
  - Dễ dàng tùy biến và định kiểu với CSS.
  - Tạo cấu trúc linh hoạt cho trang web.
  - Giúp tách biệt nội dung và kiểu trình bày.
  - Hỗ trợ thiết kế giao diện phản hồi (responsive).
Vận dụng (trang 169 sách ict, trang 136 sách cs)
 Em hãy thực hiện các yêu cầu dưới đây.
1. Chỉnh sửa trang chủ của kỉ yếu (tệp index.html và tệp layout.css) sao cho bố cục gồm 3 vùng:
  Vùng 1: Dùng để chứa thanh điều hướng nằm ngang (đã tạo ở bài học trước).
  Vùng 2: Dùng để hiển thị nội dung, cụ thể trang chủ có nội dung giới thiệu về lớp.
  Vùng 3: Dùng để làm vùng chân trang.
  Hình 11 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.
2. Chỉnh sửa trang web thanhvienlop.html (đã thực hiện ở những bài học trước) sao cho bố cục cũng gồm 3 phần như trang chủ của trang web index.html. Trong đó, đặt bảng thành viên lớp vào vùng 2 và sử dụng CSS để định kiểu cho bảng này.
  Hình 12 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.
Gợi ý trả lời
1. Chỉnh sửa trang chủ của kỉ yếu (tệp index.html và tệp layout.css):
Code HTML tham khảo:
Code CSS tham khảo:
2. Chỉnh sửa trang web thanhvienlop.html tương tự như index.html:
Code HTML tham khảo:
html1
html2
Code CSS tham khảo:
css1
css2

---The end!---

CÙNG CHUYÊN MỤC:
CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC
CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET
CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ
CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC
CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH
CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

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