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

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

Câu 1: Làm thế nào để tạo ra một kiểu chữ khác nhau cho tiêu đề và đoạn văn trong cùng một trang HTML?

Câu 2: Hãy giải thích cách CSS Grid và Flexbox hoạt động. So sánh hai công nghệ này và nêu ứng dụng của chúng?

Câu 1:

- Sử dụng CSS Inline (Không khuyến nghị cho các dự án lớn): Đây là cách đơn giản nhất, nhưng không được khuyến nghị cho các dự án lớn vì khó quản lý và bảo trì. Bạn sẽ thêm thuộc tính style trực tiếp vào các thẻ HTML.

- Sử dụng CSS Internal (Nội bộ): Đặt CSS trong thẻ <style> bên trong thẻ <head> của trang HTML. Cách này tốt hơn so với inline, nhưng vẫn không tối ưu cho các trang web lớn.

- Sử dụng CSS External (Bên ngoài - Khuyến nghị): Đây là cách tốt nhất và được khuyến nghị cho tất cả các dự án. Bạn sẽ tạo một tệp CSS riêng (ví dụ: style.css) và liên kết nó với tệp HTML.

Câu 2:

Tiêu chí	CSS Grid	Flexbox
Hướng bố cục	Hai chiều (hàng và cột)	Một chiều (hàng hoặc cột)
Sắp xếp phần tử	Dễ dàng sắp xếp trong lưới	Tốt cho sắp xếp theo hàng hoặc cột
Sử dụng	Phù hợp cho bố cục phức tạp	Phù hợp cho bố cục đơn giản hơn
Kiểm soát kích thước	Kiểm soát tốt hơn với hàng và cột	Kiểm soát tốt hơn với không gian giữa các phần tử
Cách hoạt động	Một hệ thống bố cục hai chiều cho phép bạn tạo ra các lưới (grid) với hàng và cột. Bạn có thể xác định kích thước, vị trí và khoảng cách của các phần tử trong lưới một cách dễ dàng.	Flexbox (Flexible Box Layout) là một hệ thống bố cục một chiều, cho phép bạn sắp xếp các phần tử theo hàng hoặc cột. Nó giúp điều chỉnh kích thước và khoảng cách giữa các phần tử trong một container.
Cấu trúc	Sử dụng thuộc tính display: grid; để tạo lưới. Các phần tử con sẽ được sắp xếp tự động vào các ô trong lưới.	Sử dụng thuộc tính display: flex; để tạo một flex container. Các phần tử con sẽ được sắp xếp theo hướng mà bạn chỉ định (hàng hoặc cột).

Ứng dụng của chúng

CSS Grid: Thích hợp cho các bố cục phức tạp như trang web, bảng điều khiển hoặc các thiết kế nhiều cột. Ví dụ: bố cục của một trang chủ với nhiều phần tử khác nhau.

Flexbox: Thích hợp cho các bố cục đơn giản hơn, chẳng hạn như thanh điều hướng, hộp thông báo, hoặc bất kỳ phần tử nào cần căn chỉnh trong một hàng hoặc cột.

Xem toàn bộ: Câu hỏi tự luận Tin học ứng dụng 12 chân trời bài F7: Giới thiệu CSS