Câu hỏi tự luận 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ử div

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Ử <DIV>

(15 CÂU)

1. NHẬN BIẾT (4 CÂU)

Câu 1: Khái niệm CSS là gì và vai trò của nó trong việc định kiểu cho bảng và phần tử <div>?

Trả lời: 

Khái niệm CSS: CSS (Cascading Style Sheets) là ngôn ngữ dùng để định kiểu cho các thành phần HTML, giúp điều chỉnh cách hiển thị của trang web.

Vai trò:

Đối với bảng: CSS giúp định dạng bảng, như thay đổi màu sắc, viền, khoảng cách giữa các ô, làm cho bảng dễ đọc và hấp dẫn hơn.

Đối với phần tử <div>: CSS cho phép bạn điều chỉnh kích thước, màu sắc, vị trí và bố cục của phần tử <div>, giúp tổ chức nội dung một cách hợp lý.

Câu 2: Liệt kê các thuộc tính CSS cơ bản có thể áp dụng cho bảng?

Trả lời: 

border: Định dạng viền của bảng.

border-collapse: Xác định cách viền của các ô bảng được kết hợp.

width: Đặt chiều rộng cho bảng.

height: Đặt chiều cao cho bảng.

padding: Điều chỉnh khoảng cách giữa nội dung và viền ô.

text-align: Căn chỉnh văn bản trong ô bảng.

Câu 3: Thẻ HTML nào được sử dụng để tạo bảng và thẻ nào được sử dụng để tạo phần tử <div>?

Trả lời: 

...........................................

Câu 4: Nêu định nghĩa về thuộc tính border trong CSS và cách nó ảnh hưởng đến bảng?

Trả lời: 

...........................................

2. THÔNG HIỂU (3 CÂU)

Câu 1: Giải thích cách thức hoạt động của thuộc tính padding trong CSS và ảnh hưởng của nó đến bảng và phần tử <div>?

Trả lời: 

- Cách thức hoạt động: padding tạo khoảng cách giữa nội dung bên trong một phần tử và viền của nó. Giá trị của padding có thể được thiết lập cho từng phía (trên, dưới, trái, phải) hoặc đồng nhất cho tất cả các phía.

- Ảnh hưởng đến bảng và phần tử <div>:

+ Bảng: padding trong các ô bảng giúp văn bản không bị dính vào viền, làm cho nội dung dễ đọc hơn.

+ Phần tử <div>: padding giúp tạo không gian bên trong <div>, làm cho nội dung bên trong không bị chèn sát vào viền.

Câu 2: So sánh sự khác biệt giữa thuộc tính margin và padding trong CSS?

Trả lời: 

=> Khác biệt: margin ảnh hưởng đến khoảng cách giữa các phần tử, trong khi padding ảnh hưởng đến khoảng cách giữa nội dung và viền của một phần tử.

Câu 3: Mô tả cách mà thuộc tính display có thể được sử dụng để thay đổi cách hiển thị của phần tử <div>?

Trả lời: 

...........................................

3. VẬN DỤNG (5 CÂU)

Câu 1: Mô tả cách sử dụng các lớp (class) trong CSS để áp dụng kiểu cho nhiều bảng khác nhau trên cùng một trang?

Trả lời: 

- Các lớp (class) trong CSS cho phép bạn áp dụng cùng một kiểu cho nhiều phần tử khác nhau trên trang mà không cần lặp lại mã. Bạn có thể định nghĩa các lớp riêng biệt cho từng kiểu bảng và áp dụng chúng.

*Ví dụ: 

.table-blue {

    border: 1px solid blue;

    background-color: #e7f3ff;

}

.table-green {

    border: 1px solid green;

    background-color: #e7ffe7;

}

Câu 2: Phân tích ưu và nhược điểm của việc sử dụng CSS để định kiểu cho bảng so với việc sử dụng thuộc tính trực tiếp trong HTML?

Trả lời: 

...........................................

Câu 5: Thảo luận về cách mà CSS Flexbox có thể được áp dụng để tạo bố cục cho phần tử <div> và bảng?

Trả lời: 

...........................................

4. VẬN DỤNG CAO (3 CÂU)

Câu 1: Mô tả các tiêu chuẩn và quy tắc tốt nhất khi sử dụng CSS để đảm bảo rằng bảng và phần tử <div> dễ bảo trì và mở rộng?

Trả lời: 

- Tổ chức mã: Sử dụng cấu trúc thư mục hợp lý và đặt tên file rõ ràng.

- Sử dụng lớp (class): Tạo các lớp cho kiểu dáng và tránh sử dụng trực tiếp các thuộc tính trong HTML.

- Sử dụng biến CSS: Giúp dễ dàng thay đổi màu sắc, kích thước, và các thuộc tính khác trong toàn bộ trang.

- Tối ưu hóa: Giảm thiểu mã CSS bằng cách loại bỏ các thuộc tính không cần thiết hoặc trùng lặp.

Câu 2: Phân tích cách mà các thuộc tính CSS có thể ảnh hưởng đến hiệu suất tải trang khi sử dụng nhiều bảng và phần tử <div>?

Trả lời: 

...........................................

Câu 3: Trình bày cách mà các framework CSS như Bootstrap có thể hỗ trợ việc định kiểu cho bảng và phần tử <div> trong phát triển web?

Trả lời: 

...........................................

--------------- Còn tiếp ---------------