Giáo án điện tử Khoa học máy tính 12 chân trời Bài F11: Định kiểu CSS cho bảng và phần tử

BÀI F11: ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ

KHỞI ĐỘNG

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?

KHÁM PHÁ

1. Định kiểu cho bảng
2. Lớp giả nth – child (even) dùng để làm gì?
3. 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.
4. Để định kiểu đường viền đơn hoặc đôi cho bảng, em dùng thuộc tính nào?
5. Định kiểu cho phân tử <div>

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?

LUYỆN TẬP

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ì?

THỰC HÀNH

Nhiệm vụ 1. Định kiểu CSS cho bảng

Yêu cầu: Trong tập portfolio.html, định kiểu CSS cho bảng Lịch sinh hoạt hằng tuổi thêm đẹp mắt và trực quan (Hình 9).

Nhiệm vụ 2. Định kiểu CSS cho phần tử <div>

Yêu cầu: Tạo bố cục minh hoạ như Hình 10 bằng cách sử dụng các thẻ <div>.

VẬN DỤNG

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.

1. 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.