[Chân trời] Trắc nghiệm Khoa học máy tính 12 bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS

1. Đâu là cách viết đúng để chọn tất cả các phần tử có lớp (class) là highlight trong CSS?

A. #highlight

B. highlight

C. .highlight

D. *highlight

2. Bạn muốn định kiểu cho tất cả các đoạn văn (p) chỉ khi chúng là con đầu tiên của một thẻ div. Cách viết CSS nào là đúng?

A. div p:first-child

B. div > p:first-child

C. p:first-child

D. div p:last-child

3. Trong CSS, bạn có thể kết hợp nhiều bộ chọn để nhắm mục tiêu chính xác hơn. Ví dụ: `div.content p`. Điều này có nghĩa là gì?

A. Chọn tất cả các thẻ p có lớp content.

B. Chọn tất cả các thẻ div có lớp content và tất cả các thẻ p.

C. Chọn tất cả các thẻ p nằm bên trong các thẻ div có lớp content.

D. Chọn tất cả các thẻ div là con trực tiếp của thẻ p có lớp content.

4. Để chọn tất cả các phần tử img có thuộc tính alt chứa từ logo, bạn sẽ dùng bộ chọn nào?

A. img[alt*=logo]

B. img[alt~=logo]

C. img[alt|=logo]

D. img[alt^=logo]

5. Bạn thấy một hộp thoại thông báo lỗi trên trang web có viền màu đỏ. Đây có thể là kết quả của việc áp dụng kiểu cho một phần tử có lớp error-message với thuộc tính `border-color`. Bộ chọn nào sẽ được sử dụng?

A. div.error-message

B. #error-message

C. .error-message

D. *error-message

6. CSS: `h2 ~ p { margin-top: 10px; }`. Ý nghĩa của ~ ở đây là gì?

A. Chọn phần tử p là con trực tiếp của h2.

B. Chọn phần tử p đứng ngay sau h2.

C. Chọn tất cả các phần tử p có cùng cha với h2.

D. Chọn tất cả các phần tử p có cùng cha với h2 và đứng sau h2.

7. CSS cung cấp các bộ chọn để nhắm mục tiêu các phần tử dựa trên các thuộc tính của chúng. Ví dụ, `[disabled]` sẽ chọn các phần tử có thuộc tính `disabled`.

A. Đúng, đây là bộ chọn thuộc tính.

B. Sai, bộ chọn thuộc tính luôn cần một giá trị.

C. Sai, chỉ có thể chọn thuộc tính bằng ID.

D. Đúng, đây là bộ chọn lớp.

8. Trong CSS, thuộc tính nào được sử dụng để thay đổi màu sắc của văn bản?

A. background-color

B. color

C. text-align

D. font-size

9. Bạn muốn áp dụng kiểu cho một phần tử span chỉ khi nó nằm ngay sau một phần tử h2 không có phần tử nào xen vào giữa. Bạn sẽ dùng bộ chọn nào?

A. h2 span

B. h2 > span

C. h2 + span

D. h2 ~ span

10. Trong CSS, bộ chọn nào cho phép bạn chọn tất cả các phần tử con trực tiếp của một phần tử cha nhất định?

A. Bộ chọn hậu duệ (descendant selector)

B. Bộ chọn con trực tiếp (child combinator)

C. Bộ chọn anh em kế cận (adjacent sibling combinator)

D. Bộ chọn anh em (general sibling combinator)

11. Bạn muốn định kiểu cho tất cả các phần tử input có thuộc tính type là submit. Cách viết CSS nào là phù hợp?

A. input[type=submit]

B. input.submit

C. input#submit

D. input[type~=submit]

12. Trong CSS, giả lớp (pseudo-class) nào được sử dụng để định kiểu cho một phần tử khi nó đang được người dùng tập trung vào (ví dụ: sau khi nhấn Tab)?

A. :hover

B. :active

C. :focus

D. :visited

13. Để áp dụng kiểu cho một nhóm các phần tử cụ thể nhưng không phải tất cả, bạn sẽ sử dụng bộ chọn nào trong CSS?

A. Bộ chọn phần tử

B. Bộ chọn ID

C. Bộ chọn lớp

D. Bộ chọn hậu duệ

14. Cách viết CSS nào sau đây sẽ chọn tất cả các phần tử a có thuộc tính href bắt đầu bằng https://?

A. a[href^=https://]

B. a[href$=https://]

C. a[href*=https://]

D. a[href=https://]

15. Ví dụ CSS: `div p { color: blue; }`. Điều này có nghĩa là gì?

A. Tất cả các phần tử p sẽ có màu xanh.

B. Tất cả các phần tử div sẽ có màu xanh.

C. Tất cả các phần tử p nằm bên trong một phần tử div sẽ có màu xanh.

D. Chỉ các phần tử p là con trực tiếp của div mới có màu xanh.

16. Đâu là bộ chọn (selector) CSS cơ bản nhất, áp dụng kiểu cho tất cả các phần tử của một loại nhất định (ví dụ: tất cả các thẻ p)?

A. Bộ chọn lớp (class selector)

B. Bộ chọn ID (ID selector)

C. Bộ chọn phần tử (element selector)

D. Bộ chọn thuộc tính (attribute selector)

17. Nếu bạn muốn định kiểu cho **chỉ một** phần tử duy nhất trên trang web, bạn nên sử dụng bộ chọn nào trong CSS?

A. Bộ chọn lớp

B. Bộ chọn phần tử

C. Bộ chọn ID

D. Bộ chọn tổng quát (universal selector)

18. CSS: `h1 > strong { font-weight: bold; }`. Lựa chọn nào diễn tả chính xác nhất ý nghĩa của đoạn mã này?

A. Tất cả các thẻ strong trong trang sẽ đậm.

B. Tất cả các thẻ h1 sẽ đậm.

C. Các thẻ strong là con trực tiếp của thẻ h1 sẽ có font đậm.

D. Các thẻ strong nằm bất kỳ đâu bên trong thẻ h1 sẽ đậm.

19. Trong CSS, ký tự nào được sử dụng để bắt đầu một bộ chọn ID?

A. .

B. #

C. *

D. >

20. Bạn muốn định kiểu cho một phần tử có thuộc tính id là main-title. Cách viết CSS nào sau đây là đúng?

A. .main-title { ... }

B. #main-title { ... }

C. main-title { ... }

D. *main-title { ... }

21. Đâu là bộ chọn CSS cho phép bạn chọn tất cả các phần tử trên trang web, bất kể loại nào?

A. Bộ chọn phần tử

B. Bộ chọn ID

C. Bộ chọn lớp

D. Bộ chọn tổng quát (universal selector)

22. Trong CSS, bộ chọn :hover được gọi là gì và nó dùng để làm gì?

A. Bộ chọn trạng thái, áp dụng khi phần tử được chọn.

B. Bộ chọn giả lớp (pseudo-class), áp dụng khi người dùng di chuột qua phần tử.

C. Bộ chọn giả phần tử (pseudo-element), áp dụng cho ký tự đầu tiên của phần tử.

D. Bộ chọn thuộc tính, áp dụng khi thuộc tính có giá trị nhất định.

23. Trong CSS, bộ chọn :first-child dùng để làm gì?

A. Chọn phần tử con cuối cùng trong một phần tử cha.

B. Chọn phần tử con đầu tiên trong một phần tử cha.

C. Chọn phần tử con thứ ba trong một phần tử cha.

D. Chọn tất cả các phần tử con trong một phần tử cha.

24. Trong CSS, bạn có thể áp dụng kiểu cho các phần tử có thuộc tính cụ thể và giá trị cụ thể bằng bộ chọn nào?

A. Bộ chọn thuộc tính

B. Bộ chọn lớp

C. Bộ chọn ID

D. Bộ chọn phần tử

25. Giả sử bạn có một liên kết. Để thay đổi màu của liên kết đó khi người dùng di chuột vào, bạn sẽ sử dụng bộ chọn nào kết hợp với thuộc tính `color`?

A. a:focus

B. a:active

C. a:hover

D. a:visited