Câu hỏi tự luận Tin học ứng dụng 12 chân trời Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

BÀI F9: MỘT SỐ KĨ THUẬT ĐỊNH KIỂU BẰNG VÙNG CHỌN TRONG CSS

(13 CÂU)

1. NHẬN BIẾT (4 CÂU)

 Câu 1: Hãy định nghĩa và nêu vai trò của CSS trong thiết kế web?

Trả lời:

- Định nghĩa: CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để mô tả cách trình bày của một tài liệu HTML. CSS cho phép người dùng xác định kiểu dáng, màu sắc, bố cục và các thuộc tính khác của các phần tử trên trang web.

- Vai trò của CSS trong thiết kế web:

+ Tách biệt nội dung và hình thức: CSS giúp tách biệt nội dung (HTML) và hình thức (CSS), giúp dễ dàng quản lý và bảo trì mã nguồn.

+ Tăng cường trải nghiệm người dùng: CSS cho phép tạo ra các giao diện hấp dẫn và dễ sử dụng, nâng cao trải nghiệm người dùng.

+ Đáp ứng và linh hoạt: CSS hỗ trợ thiết kế đáp ứng, cho phép trang web hiển thị tốt trên nhiều thiết bị và kích thước màn hình khác nhau.

+ Tối ưu hóa hiệu suất: Sử dụng CSS giúp giảm kích thước tệp HTML, từ đó cải thiện tốc độ tải trang.

Câu 2: Vùng chọn (selector) trong CSS là gì? Nêu các loại vùng chọn cơ bản trong CSS?

Trả lời:

- Vùng chọn (selector): Vùng chọn trong CSS là phần mã xác định các phần tử HTML mà bạn muốn áp dụng các quy tắc kiểu dáng. Vùng chọn có thể là một thẻ, lớp, ID hoặc bất kỳ đặc điểm nào khác của phần tử HTML.

- Các loại vùng chọn cơ bản trong CSS:

+ Vùng chọn theo thẻ (Type Selector): Chọn tất cả các phần tử của một loại nhất định.

+ Vùng chọn theo lớp (Class Selector): Chọn các phần tử có thuộc tính class cụ thể.

+ Vùng chọn theo ID (ID Selector): Chọn phần tử có thuộc tính ID cụ thể.

Câu 3: So sánh vùng chọn theo thẻ, lớp và ID trong CSS. Nêu điểm giống và khác nhau giữa chúng?

Trả lời:

Câu 4: Giải thích cách sử dụng vùng chọn tổ hợp trong CSS. Cho ví dụ minh họa.

Trả lời:

1. THÔNG HIỂU (2 CÂU)

Câu 1: Hãy nêu các thành phần cơ bản của một quy tắc CSS?

Trả lời:

Một quy tắc CSS (CSS rule) bao gồm hai phần chính: bộ chọn (selector) và khối khai báo (declaration block). Khối khai báo lại chứa một hoặc nhiều khai báo (declaration). Mỗi khai báo bao gồm thuộc tính (property) và giá trị (value).

Câu 2: Vùng chọn nhóm (group selector) trong CSS là gì? Hãy cho ví dụ minh họa?

Trả lời:

1. VẬN DỤNG (4 CÂU)

Câu 1: Hãy thảo luận về tầm quan trọng của việc sử dụng vùng chọn cụ thể trong CSS để giảm thiểu xung đột kiểu?

Trả lời:

- Việc sử dụng vùng chọn cụ thể (specific selectors) trong CSS là vô cùng quan trọng để tránh xung đột kiểu (style conflicts). Xung đột kiểu xảy ra khi nhiều quy tắc CSS áp dụng cho cùng một phần tử HTML, và trình duyệt phải quyết định quy tắc nào sẽ được ưu tiên. Điều này có thể dẫn đến giao diện không mong muốn và khó khăn trong việc gỡ lỗi.

- Tầm quan trọng:

+ Kiểm soát kiểu dáng chính xác: Vùng chọn cụ thể cho phép bạn áp dụng kiểu dáng chính xác đến phần tử bạn muốn, tránh ảnh hưởng đến các phần tử khác một cách không mong muốn.

+ Dễ dàng bảo trì và mở rộng: Khi dự án lớn hơn, việc sử dụng vùng chọn cụ thể giúp bạn dễ dàng quản lý và thay đổi kiểu dáng mà không lo ảnh hưởng đến các phần khác của trang web.

+ Giảm thiểu xung đột và gỡ lỗi dễ dàng: Khi có xung đột, việc xác định nguồn gốc vấn đề sẽ dễ dàng hơn nếu bạn sử dụng vùng chọn cụ thể.

+ Cải thiện hiệu suất: Mặc dù ảnh hưởng không đáng kể trong hầu hết các trường hợp, nhưng việc sử dụng vùng chọn cụ thể có thể giúp trình duyệt xử lý CSS nhanh hơn một chút.

- Độ ưu tiên của các vùng chọn (CSS Specificity):

+ Trình duyệt sử dụng một hệ thống tính điểm để xác định độ ưu tiên của các vùng chọn. Thứ tự ưu tiên từ cao đến thấp như sau:

+ Kiểu dáng inline (Inline styles): Được áp dụng trực tiếp vào thẻ HTML bằng thuộc tính style.

+ ID selectors: Vùng chọn ID (#id).

+ Class selectors, attribute selectors, pseudo-classes: Vùng chọn lớp (.class), vùng chọn thuộc tính ([attribute]), và giả lớp (:hover, :focus,...).

+ Element selectors and pseudo-elements: Vùng chọn phần tử (p, div, h1), và giả phần tử (::before, ::after).

Câu 2: Trình bày các kỹ thuật tối ưu hóa vùng chọn trong CSS để cải thiện hiệu suất tải trang?

Trả lời:

Mặc dù ảnh hưởng không đáng kể trong hầu hết các trường hợp, nhưng việc tối ưu vùng chọn CSS vẫn là một thực hành tốt để cải thiện hiệu suất tải trang, đặc biệt là với các trang web lớn và phức tạp. Dưới đây là một số kỹ thuật:

+ Tránh sử dụng vùng chọn Universal (*) quá mức: Vùng chọn này áp dụng cho tất cả các phần tử, làm tăng thời gian xử lý của trình duyệt. Chỉ sử dụng nó khi thực sự cần thiết.

+ Hạn chế sử dụng vùng chọn con cháu (descendant selectors) sâu: Ví dụ: div ul li a sẽ tốn thời gian hơn so với việc gán class cho thẻ <a> và sử dụng vùng chọn lớp.

+ Ưu tiên sử dụng class selectors: Vùng chọn lớp thường nhanh hơn so với ID selectors (mặc dù sự khác biệt là rất nhỏ).

+ Tránh sử dụng !important trừ khi thực sự cần thiết: !important làm phá vỡ tính kế thừa và độ ưu tiên của CSS, gây khó khăn trong việc bảo trì.

+ Sử dụng CSS Specificity Calculator: Có nhiều công cụ trực tuyến giúp bạn tính toán độ ưu tiên của các vùng chọn CSS.

+ Gộp nhóm các quy tắc CSS: Sử dụng group selector để giảm thiểu mã lặp lại.

+ Sắp xếp CSS theo thứ tự logic: Giúp dễ đọc và dễ bảo trì hơn.

Câu 3: Nêu tên các thuộc tính CSS thường được sử dụng để định kiểu cho văn bản?

Trả lời:

Câu 4: Hãy định nghĩa vùng chọn con (descendant selector) trong CSS và cho ví dụ?

Trả lời:

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?

Trả lời:

- 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òn tiếp ----------------------