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

BÀI F11. ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ DIV (CTST - CS & ICT)

Đây là bài soạn lý thuyết tin học 12 - sách Chân trời sáng tạo. Bài học 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). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

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

- Để bảng hiển thị đẹp mắt, có thể:
+ Sử dụng border-collapse: collapse để tạo đường viền đơn thay vì viền đôi mặc định.
+ Định kiểu màu nền cho hàng tiêu đề và các hàng chẵn/lẻ bằng lớp giả nth-child(even) hoặc nth-child(odd).
+ Tạo hiệu ứng khi rê chuột bằng tr:hover để đổi màu nền.
- Ví dụ:
+ border: 1px solid #3eafff cho đường viền màu xanh.
+ tr:nth-child(even) để hàng chẵn có nền xám.
+ tr:hover để tạo hiệu ứng màu nền khi di chuyển chuột qua hàng.

2. Định kiểu cho phần tử <div>

- Sử dụng <div> thay vì bảng để bố cục linh hoạt, tương thích nhiều kích cỡ màn hình.
- Mặc định, các <div> xếp theo chiều dọc; dùng float: left hoặc float: right để căn trái hoặc phải.
- Khi các <div> có chiều cao khác nhau và muốn tránh lỗi chồng lấp, dùng thêm một <div class="clear-both"> với clear: both để tạo khoảng ngăn cách.
Ví dụ:
.left { float: left; } và .right { float: right; } để chia bố cục trái/phải.
.clear-both { clear: both; } để tách vùng bên dưới hai khối.

THỰC HÀNH

Nhiệm vụ 1. Định kiểu CSS cho bảng
Định kiểu bảng "Lịch sinh hoạt hằng tuần" trong portfolio.html bằng class .my-table:
- Đường viền màu xanh, rộng 100%.
- Dùng padding để tạo vùng đệm cho ô.
- Hàng tiêu đề: nền xanh, chữ trắng, in đậm.
- Hàng chẵn: nền xám (nth-child(even)).
- Hiệu ứng hover: đổi màu nền khi rê chuột.
Nhiệm vụ 2. Định kiểu CSS cho phần tử <div>
Tạo bố cục minh họa trong bocucminhhoa.html sử dụng <div>:
+ Thẻ <link> liên kết đến layout.css.
+ Tạo thanh ngang bằng class .bar.
+ Vùng trái (.left) chiếm 20% chiều ngang, nền xám đậm.
+ Vùng phải (.right) chiếm phần còn lại, nền xám nhạt.
+ Dùng .clear-both để ngăn cách với footer.
+ Chân trang (.footer) có nền cam, cách vùng trên 10px.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài A1. Giới thiệu Trí tuệ nhân tạo
Bài A2. Trí tuệ nhân tạo và cuộc sống
Bài A3(ict). Thực hành kết nối thiết bị số với máy tính
Bài A4(ict). Thực hành kết nối thiết bị số với máy tính (tiếp theo)

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

Bài B1. Thiết bị và giao thức mạng
Bài B2. Các chức năng mạng của hệ điều hành
Bài B3. Thực hành kết nối và sử dụng mạng trên thiết bị thông minh
Bài B4(cs). Vai trò của các thiết bị mạng
Bài B5(cs). Đường truyền hữu tuyến và vô tuyến
Bài B6(cs). Thiết kế mạng nội bộ
Bài B7(cs). Thực hành thiết kế mạng nội bộ

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

Bài E1(ict). Tạo trang web, thiết lập giao diện và xem trước trang web
Bài E2(ict). Tạo, hiệu chỉnh trang web và thiết kế thanh điều hướng
Bài E3(ict). Tạo văn bản, chèn hình ảnh và tạo chân trang
Bài E4(ict). Sử dụng Content Blocks, Buttun, Divider
Bài E5(ict). Nhúng mã và tạo băng chuyền hình ảnh
Bài E6(ict). Chèn YouTube, Calendar, Drive và Collapsible group
Bài E7(ict). Sử dụng Map, Form và các thiết lập trang web
Bài E8(ict). Hoàn thiện và xuất bản trang web

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