Câu hỏi tự luận mức độ vận dụng Tin học ứng dụng 12 cd bài 8: Làm quen với CSS

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

Câu 1: So sánh và phân tích ưu, nhược điểm của việc sử dụng CSS inline, internal và external?

Câu 2: Giải thích cách sử dụng Flexbox trong CSS để tạo bố cục linh hoạt cho trang web?


Câu 1: 

 

Ưu điểm

Nhược điểm

CSS Inline

 

Dễ dàng áp dụng cho từng phần tử mà không cần phải tìm kiếm trong tệp CSS.

Thích hợp cho các thay đổi nhanh chóng và tạm thời.

Mã HTML trở nên lộn xộn và khó đọc.

Không thể tái sử dụng, mỗi phần tử cần có kiểu riêng.

Khó khăn trong việc bảo trì và cập nhật.

 

CSS Internal (Embedded)

 

Tập trung vào một tệp HTML, dễ dàng quản lý cho các dự án nhỏ.

Có thể áp dụng cho nhiều phần tử trong cùng một trang.

Không thể tái sử dụng trên các trang khác.

Khi trang web lớn hơn, mã CSS có thể trở nên phức tạp và khó quản lý.

Tăng kích thước tệp HTML.

. CSS External (Liên kết bên ngoài

Giúp tách biệt hoàn toàn nội dung và kiểu dáng, dễ dàng bảo trì và cập nhật.

Có thể tái sử dụng cho nhiều trang khác nhau, giảm thiểu mã lặp lại.

Giúp giảm kích thước tệp HTML, tăng tốc độ tải trang.

 

Cần thêm một yêu cầu HTTP để tải tệp CSS, có thể làm chậm tốc độ tải trang ban đầu.

Nếu tệp CSS không được tải, trang sẽ không có kiểu dáng.

 

Câu 2: 

Flexbox (Flexible Box Layout) là một mô hình bố cục trong CSS giúp tạo ra các bố cục linh hoạt và dễ dàng điều chỉnh. Dưới đây là cách sử dụng Flexbox:

1. Thiết lập Flex Container: Để sử dụng Flexbox, bạn cần thiết lập một phần tử cha (flex container) bằng cách sử dụng thuộc tính display: flex;.

2. Các thuộc tính chính của Flexbox:

+ flex-direction: Xác định hướng của các phần tử con (row, column, row-reverse, column-reverse).

+ justify-content: Căn chỉnh các phần tử con theo chiều chính (trái, giữa, phải, đều).

+ align-items: Căn chỉnh các phần tử con theo chiều phụ (trên, giữa, dưới).

flex-wrap: Cho phép các phần tử con bọc lại khi không đủ không gian.

3. Flex Item:

+ Mỗi phần tử con bên trong flex container có thể được điều chỉnh bằng cách sử dụng các thuộc tính như flex-grow, flex-shrink, và flex-basis.


Bình luận

Giải bài tập những môn khác