Câu hỏi tự luận mức độ vận dụng cao Khoa học máy tính 12 ctst bài F7: Giới thiệu CSS

Câu 1: 

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

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

Flexbox là một mô hình bố cục trong CSS giúp dễ dàng sắp xếp và căn chỉnh các phần tử trong một container. Để sử dụng Flexbox:

+ Thiết lập thuộc tính display: flex; cho container.

+ Sử dụng các thuộc tính như justify-content, align-items, và flex-direction để điều chỉnh cách sắp xếp các phần tử con.

+ Các phần tử con có thể sử dụng thuộc tính flex để xác định cách chúng co giãn và chiếm không gian trong container.

Câu 4: 

CSS có thể được kết hợp với JavaScript để tạo ra các hiệu ứng động bằng cách:

+ Thay đổi thuộc tính CSS: Sử dụng JavaScript để thay đổi các thuộc tính CSS của phần tử khi người dùng thực hiện hành động (ví dụ: click, hover).

+ Thêm hoặc xóa lớp CSS: Sử dụng JavaScript để thêm hoặc xóa các lớp CSS, từ đó áp dụng các kiểu dáng khác nhau.

+ Sử dụng transitions và animations: Kết hợp với JavaScript để kích hoạt các hiệu ứng chuyển động mượt mà khi thay đổi thuộc tính CSS.