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

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

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

1. Định kiểu cho bảng

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

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

 - Nêu các thuộc tính CSS chính để định kiểu cho các phần tử trong bảng như <table>, <tr>, <th> và <td>.

- Có thể sử dụng thuộc tính CSS nào để điều chỉnh kích thước, màu nền, căn lề và khoảng cách cho các ô trong bảng không?

- Làm thế nào để tạo đường viền cho bảng và các ô trong bảng?

2. Đị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.

 - Nêu các thuộc tính CSS chính để định kiểu cho các phần tử HTML phổ biến như div

- Có thể sử dụng thuộc tính CSS nào để điều chỉnh vị trí, kích thước, màu nền, đường viền và khoảng cách cho các phần tử?

3. Vận dụng

Câu 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.

Câu 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.

Câu 3: Ưu điểm của việc tạo bố cục trang web bằng các thẻ <div> là gì?

Câu 4: 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.

Câu 5: 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.