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

Câu 1:

- Hiệu ứng hover trong CSS là một kỹ thuật cho phép thay đổi kiểu dáng hoặc hành vi của một phần tử khi người dùng di chuột qua nó. Hiệu ứng này thường được sử dụng để tạo ra trải nghiệm người dùng tương tác và hấp dẫn hơn trên trang web.

- Cách hoạt động:

+ Khi người dùng di chuột lên một phần tử, CSS có thể áp dụng các thuộc tính khác nhau như màu sắc, kích thước, bóng đổ, hoặc các hiệu ứng chuyển tiếp.

+ Hiệu ứng hover thường được định nghĩa bằng cách sử dụng pseudo-class :hover.

Câu 2: 

- Kích thước tệp CSS: Tệp CSS lớn có thể làm chậm tốc độ tải trang. Việc tối ưu hóa CSS (giảm kích thước, loại bỏ mã không sử dụng) có thể cải thiện hiệu suất.

- Số lượng yêu cầu HTTP: Nếu sử dụng nhiều tệp CSS, mỗi tệp sẽ tạo ra một yêu cầu HTTP riêng. Việc gộp các tệp CSS thành một tệp duy nhất có thể giảm số lượng yêu cầu và tăng tốc độ tải.

- Thứ tự tải CSS: CSS được tải trước khi trang được hiển thị. Nếu tệp CSS lớn hoặc tải chậm, người dùng có thể thấy trang web không được định dạng đúng cho đến khi CSS được tải xong (hiện tượng FOUC - Flash of Unstyled Content).

- CSS Blocking: Trình duyệt sẽ không hiển thị nội dung cho đến khi tất cả CSS đã được tải. Điều này có thể gây ra độ trễ trong việc hiển thị nội dung.

- Sử dụng CSS hiệu quả: Việc sử dụng các thuộc tính CSS phức tạp (như box-shadow, gradients, animations) có thể làm tăng thời gian xử lý và ảnh hưởng đến hiệu suất, đặc biệt trên thiết bị di động.

Câu 3: 

- Media Queries: 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 hoặc loại thiết bị

- Flexbox và Grid: Sử dụng Flexbox và CSS Grid giúp tạo ra các bố cục linh hoạt, tự động điều chỉnh theo kích thước màn hình. 

- Đơn vị tương đối: Sử dụng các đơn vị tương đối như %, em, và rem thay vì các đơn vị cố định như px giúp các phần tử có thể thay đổi kích thước linh hoạt theo kích thước màn hình.

- Hình ảnh và video đáp ứng: Sử dụng thuộc tính CSS như max-width: 100%; để đảm bảo hình ảnh và video không vượt quá kích thước của phần tử chứa.

- Thiết kế linh hoạt: Tạo các phần tử có thể thay đổi kích thước dựa trên không gian có sẵn, giúp cải thiện trải nghiệm người dùng trên nhiều thiết bị khác nhau.