Câu hỏi tự luận Khoa học máy tính 12 chân trời Bài F7: Giới thiệu CSS

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

BÀI F7: GIỚI THIỆU CSS

(14 CÂU)

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

Câu 1: CSS là gì? Nêu chức năng chính của CSS trong thiết kế web?

Trả lời: 

CSS (Cascading Style Sheets) là ngôn ngữ dùng để định kiểu cho các phần tử trong một trang web. Chức năng chính của CSS là kiểm soát bố cục, màu sắc, phông chữ, và các thuộc tính khác của các phần tử HTML, giúp tạo ra giao diện người dùng hấp dẫn và dễ sử dụng.

Câu 2: Liệt kê các cách để áp dụng CSS vào một trang HTML?

Trả lời: 

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

Câu 3: Thẻ nào được sử dụng để nhúng CSS trực tiếp vào trang HTML? 

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

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

Câu 1: Giải thích sự khác nhau giữa các loại chọn lọc trong CSS như chọn lọc theo thẻ, lớp và ID?

Trả lời: 

- Chọn lọc theo thẻ (Type Selector): Áp dụng kiểu cho tất cả các phần tử của một loại nhất định (ví dụ: p cho tất cả các thẻ <p>).

- Chọn lọc theo lớp (Class Selector): Áp dụng kiểu cho tất cả các phần tử có cùng lớp, sử dụng dấu chấm (.) trước tên lớp (ví dụ: .classname).

- Chọn lọc theo ID (ID Selector): Áp dụng kiểu cho một phần tử cụ thể có ID duy nhất, sử dụng dấu # trước tên ID (ví dụ: #idname). Chọn lọc theo ID có độ ưu tiên cao hơn so với lớp và thẻ.

Câu 2: Mô tả cách thức hoạt động của thuộc tính margin và padding trong CSS?

Trả lời: 

- Margin: Là khoảng cách bên ngoài của một phần tử, tạo khoảng cách giữa phần tử đó và các phần tử khác. Margin có thể được đặt cho tất cả các hướng (trên, dưới, trái, phải) và có thể có giá trị âm.

- Padding: Là khoảng cách bên trong của một phần tử, tạo khoảng cách giữa nội dung của phần tử và biên của nó. Padding cũng có thể được đặt cho tất cả các hướng và không thể có giá trị âm.

Câu 3: Khi nào nên sử dụng CSS bên ngoài thay vì CSS nội tuyến? Giải thích lý do?

Trả lời: 

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

Câu 4: Giải thích khái niệm "box model" trong CSS và nêu các thành phần của nó?

Trả lời: 

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

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

Câu 1: Viết một đoạn mã CSS để thay đổi màu nền và màu chữ của một thẻ <h1>?

Trả lời: 

h1 {

    background-color: lightblue; /* Màu nền */

    color: darkblue; /* Màu chữ */

}

Câu 2: Giải thích cách sử dụng thuộc tính display trong CSS và nêu sự khác biệt giữa các giá trị block, inline, và inline-block?

Trả lời: 

- display: Thuộc tính này xác định cách một phần tử được hiển thị trên trang.

- block: Phần tử sẽ chiếm toàn bộ chiều rộng của dòng và bắt đầu trên một dòng mới (ví dụ: <div>, <h1>).

- inline: Phần tử chỉ chiếm chiều rộng cần thiết và không bắt đầu trên một dòng mới (ví dụ: <span>, <a>).

- inline-block: Kết hợp giữa block và inline, cho phép phần tử có thể đặt cạnh nhau nhưng vẫn giữ được các thuộc tính của block (có thể đặt chiều rộng và chiều cao).

Câu 3: Viết mã CSS để tạo hiệu ứng hover cho một nút (button) trên trang web?

Trả lời: 

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

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

Câu 1: Nêu các tiêu chuẩn và quy tắc tốt nhất khi viết CSS để đảm bảo mã nguồn dễ bảo trì và mở rộng?

Trả lời: 

- Sử dụng quy tắc đặt tên rõ ràng: Sử dụng quy tắc BEM (Block Element Modifier) để đặt tên cho lớp CSS.

- Tách biệt CSS: Sử dụng tệp CSS bên ngoài thay vì nhúng trực tiếp trong HTML.

- Sắp xếp mã CSS: Sắp xếp theo thứ tự từ tổng quát đến cụ thể, hoặc theo từng phần tử.

- Sử dụng comment: Thêm chú thích để giải thích các đoạn mã phức tạp.

- Tránh lặp mã: Sử dụng lớp chung để tái sử dụng mã CSS.

Câu 2: Giải thích khái niệm “Responsive Web Design” và nêu cách CSS có thể hỗ trợ thiết kế web đáp ứng?

Trả lời:

- Responsive Web Design là phương pháp thiết kế web cho phép trang web tự động điều chỉnh bố cục và nội dung để phù hợp với kích thước màn hình của thiết bị người dùng. CSS hỗ trợ điều này thông qua:

+ Media Queries: Cho phép áp dụng các kiểu CSS khác nhau dựa trên kích thước màn hình.

+ Flexbox và Grid: Cung cấp các phương pháp bố cục linh hoạt để sắp xếp các phần tử trong không gian có sẵn.

+ Đơn vị linh hoạt: Sử dụng đơn vị % hoặc vw, vh thay vì pixel để đảm bảo các phần tử có thể co giãn.

Câu 3: Mô tả cách sử dụng Flexbox trong CSS để tạo bố cục linh hoạt cho một trang web?

Trả lời: 

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

Câu 4: Trình bày cách CSS có thể được kết hợp với JavaScript để tạo ra các hiệu ứng động trên trang web?

Trả lời: 

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

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