Câu hỏi tự luận mức độ vận dụng cao Tin học ứng dụng 12 ctst bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS
4. VẬN DỤNG CAO (3 CÂU)
Câu 1: Nêu cách mà các vùng chọn CSS có thể ảnh hưởng đến khả năng truy cập của trang web?
Câu 2: Hãy phân tích sự khác biệt giữa vùng chọn CSS và các phương pháp định kiểu khác như inline styles?
Câu 3: Sự khác biệt giữa vùng chọn kiểu (pseudo-class) và vùng chọn giả (pseudo-element) trong CSS là gì?
Câu 1:
- Mặc dù bản thân các vùng chọn CSS không trực tiếp ảnh hưởng đến khả năng truy cập (accessibility) theo nghĩa đen, cách chúng ta sử dụng chúng có thể tác động đến trải nghiệm của người dùng, đặc biệt là những người sử dụng công nghệ hỗ trợ như trình đọc màn hình. Dưới đây là một số điểm cần lưu ý:
- Sử dụng vùng chọn quá phụ thuộc vào cấu trúc DOM: Nếu CSS của bạn quá phụ thuộc vào cấu trúc HTML cụ thể (ví dụ: sử dụng quá nhiều vùng chọn con cháu sâu), việc thay đổi cấu trúc HTML có thể làm hỏng giao diện. Điều này gây khó khăn cho việc bảo trì và có thể ảnh hưởng đến khả năng của trình đọc màn hình trong việc diễn giải nội dung. Nên sử dụng class một cách hợp lý để giảm sự phụ thuộc này.
- Ví dụ không tốt: div.content table tr:nth-child(2) td:last-child { ... } (quá cụ thể và dễ bị hỏng nếu cấu trúc bảng thay đổi).
- Ví dụ tốt hơn: .product-price { ... } (dễ bảo trì và áp dụng hơn).
- Ẩn nội dung chỉ bằng CSS: Việc ẩn nội dung bằng display: none; hoặc visibility: hidden; sẽ khiến nội dung đó hoàn toàn biến mất khỏi cây truy cập (accessibility tree), do đó trình đọc màn hình sẽ bỏ qua nó. Nếu bạn muốn ẩn nội dung về mặt thị giác nhưng vẫn muốn nó được đọc bởi trình đọc màn hình, hãy sử dụng các kỹ thuật như:
+ clip-path: inset(100%);
+ position: absolute; kết hợp với width: 1px; height: 1px; overflow: hidden;
- Đảm bảo độ tương phản màu sắc: CSS được sử dụng để thiết lập màu sắc cho văn bản và nền. Hãy đảm bảo rằng độ tương phản giữa màu chữ và màu nền đủ cao để người dùng có thị lực kém vẫn có thể đọc được nội dung. Sử dụng các công cụ kiểm tra độ tương phản màu sắc (ví dụ: WebAIM Contrast Checker) để đảm bảo tuân thủ các tiêu chuẩn WCAG.
= Sử dụng ARIA kết hợp với CSS: ARIA (Accessible Rich Internet Applications) cung cấp các thuộc tính HTML bổ sung để cải thiện khả năng truy cập. Bạn có thể sử dụng CSS để định kiểu cho các thuộc tính ARIA này
Câu 2:
Tiêu chí | Vùng chọn CSS | Inline Styles |
---|---|---|
Định nghĩa | Sử dụng tệp CSS hoặc thẻ <style> để định dạng nhiều phần tử cùng lúc. | Định dạng trực tiếp trong thuộc tính style của phần tử HTML. |
Cách áp dụng | Áp dụng cho nhiều phần tử bằng cách sử dụng vùng chọn. | Chỉ áp dụng cho một phần tử cụ thể. |
Quản lý mã | Dễ dàng quản lý và bảo trì, tách biệt nội dung và kiểu dáng. | Khó khăn trong việc quản lý, vì mã bị phân tán. |
Tái sử dụng | Có thể tái sử dụng cho nhiều phần tử khác nhau. | Không thể tái sử dụng, mỗi phần tử cần định nghĩa riêng. |
Ưu tiên | Có thể có độ ưu tiên khác nhau giữa các quy tắc. | Có độ ưu tiên cao hơn so với quy tắc CSS bên ngoài. |
Hiệu suất | Tối ưu hơn khi áp dụng cho nhiều phần tử, giảm kích thước tệp HTML. | Có thể làm tăng kích thước tệp HTML, vì mỗi phần tử đều có thuộc tính riêng. |
Khả năng kế thừa | Các quy tắc có thể kế thừa từ phần tử cha. | Không có khả năng kế thừa. |
Tính linh hoạt | Linh hoạt trong việc thay đổi và điều chỉnh kiểu dáng cho nhiều phần tử. | Ít linh hoạt, phải thay đổi từng phần tử một. |
Dễ đọc | Dễ đọc hơn, mã được tổ chức rõ ràng. | Khó đọc hơn khi có nhiều thuộc tính trong cùng một thẻ. |
Câu 3:
Tiêu chí | Vùng chọn kiểu (Pseudo-Class) | Vùng chọn giả (Pseudo-Element) |
---|---|---|
Định nghĩa | Áp dụng kiểu cho một trạng thái cụ thể của phần tử. | Áp dụng kiểu cho một phần cụ thể của phần tử. |
Cách sử dụng | Được định nghĩa bằng cách thêm dấu hai chấm (:) trước tên. | Được định nghĩa bằng cách thêm dấu hai chấm đôi (::) trước tên. |
Ví dụ | :hover, :active, :focus | ::before, ::after, ::first-line |
Mục đích | Thay đổi kiểu dáng của phần tử dựa trên trạng thái người dùng. | Tạo ra nội dung ảo hoặc định dạng một phần cụ thể của phần tử. |
Tác động | Thay đổi kiểu cho toàn bộ phần tử. | Thay đổi kiểu cho một phần nội dung cụ thể của phần tử. |
Khả năng kế thừa | Không kế thừa từ phần tử cha. | Có thể kế thừa các thuộc tính từ phần tử cha. |
Sự phổ biến | Thường được sử dụng để tạo hiệu ứng tương tác. | Thường được sử dụng để thêm nội dung hoặc trang trí. |
Giải những bài tập khác
Giải bài tập những môn khác
Môn học lớp 12 KNTT
5 phút giải toán 12 KNTT
5 phút soạn bài văn 12 KNTT
Văn mẫu 12 KNTT
5 phút giải vật lí 12 KNTT
5 phút giải hoá học 12 KNTT
5 phút giải sinh học 12 KNTT
5 phút giải KTPL 12 KNTT
5 phút giải lịch sử 12 KNTT
5 phút giải địa lí 12 KNTT
5 phút giải CN lâm nghiệp 12 KNTT
5 phút giải CN điện - điện tử 12 KNTT
5 phút giải THUD12 KNTT
5 phút giải KHMT12 KNTT
5 phút giải HĐTN 12 KNTT
5 phút giải ANQP 12 KNTT
Môn học lớp 12 CTST
5 phút giải toán 12 CTST
5 phút soạn bài văn 12 CTST
Văn mẫu 12 CTST
5 phút giải vật lí 12 CTST
5 phút giải hoá học 12 CTST
5 phút giải sinh học 12 CTST
5 phút giải KTPL 12 CTST
5 phút giải lịch sử 12 CTST
5 phút giải địa lí 12 CTST
5 phút giải THUD 12 CTST
5 phút giải KHMT 12 CTST
5 phút giải HĐTN 12 bản 1 CTST
5 phút giải HĐTN 12 bản 2 CTST
Môn học lớp 12 cánh diều
5 phút giải toán 12 CD
5 phút soạn bài văn 12 CD
Văn mẫu 12 CD
5 phút giải vật lí 12 CD
5 phút giải hoá học 12 CD
5 phút giải sinh học 12 CD
5 phút giải KTPL 12 CD
5 phút giải lịch sử 12 CD
5 phút giải địa lí 12 CD
5 phút giải CN lâm nghiệp 12 CD
5 phút giải CN điện - điện tử 12 CD
5 phút giải THUD 12 CD
5 phút giải KHMT 12 CD
5 phút giải HĐTN 12 CD
5 phút giải ANQP 12 CD
Giải chuyên đề học tập lớp 12 kết nối tri thức
Giải chuyên đề Ngữ văn 12 Kết nối tri thức
Giải chuyên đề Toán 12 Kết nối tri thức
Giải chuyên đề Vật lí 12 Kết nối tri thức
Giải chuyên đề Hóa học 12 Kết nối tri thức
Giải chuyên đề Sinh học 12 Kết nối tri thức
Giải chuyên đề Kinh tế pháp luật 12 Kết nối tri thức
Giải chuyên đề Lịch sử 12 Kết nối tri thức
Giải chuyên đề Địa lí 12 Kết nối tri thức
Giải chuyên đề Tin học ứng dụng 12 Kết nối tri thức
Giải chuyên đề Khoa học máy tính 12 Kết nối tri thức
Giải chuyên đề Công nghệ 12 Điện - điện tử Kết nối tri thức
Giải chuyên đề Công nghệ 12 Lâm nghiệp thủy sản Kết nối tri thức
Giải chuyên đề học tập lớp 12 chân trời sáng tạo
Giải chuyên đề Ngữ văn 12 Chân trời sáng tạo
Giải chuyên đề Toán 12 Chân trời sáng tạo
Giải chuyên đề Vật lí 12 Chân trời sáng tạo
Giải chuyên đề Hóa học 12 Chân trời sáng tạo
Giải chuyên đề Sinh học 12 Chân trời sáng tạo
Giải chuyên đề Kinh tế pháp luật 12 Chân trời sáng tạo
Giải chuyên đề Lịch sử 12 Chân trời sáng tạo
Giải chuyên đề Địa lí 12 Chân trời sáng tạo
Giải chuyên đề Tin học ứng dụng 12 Chân trời sáng tạo
Giải chuyên đề Khoa học máy tính 12 Chân trời sáng tạo
Giải chuyên đề Công nghệ 12 Điện - điện tử Chân trời sáng tạo
Giải chuyên đề Công nghệ 12 Lâm nghiệp thủy sản Chân trời sáng tạo
Giải chuyên đề học tập lớp 12 cánh diều
Giải chuyên đề Ngữ văn 12 Cánh diều
Giải chuyên đề Toán 12 Cánh diều
Giải chuyên đề Vật lí 12 Cánh diều
Giải chuyên đề Hóa học 12 Cánh diều
Giải chuyên đề Sinh học 12 Cánh diều
Giải chuyên đề Kinh tế pháp luật 12 Cánh diều
Giải chuyên đề Lịch sử 12 Cánh diều
Giải chuyên đề Địa lí 12 Cánh diều
Giải chuyên đề Tin học ứng dụng 12 Cánh diều
Giải chuyên đề Khoa học máy tính 12 Cánh diều
Giải chuyên đề Công nghệ 12 Điện - điện tử Cánh diều
Giải chuyên đề Công nghệ 12 Lâm nghiệp thủy sản Cánh diều
Bình luận