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

1. Bạn muốn làm cho tất cả các phần tử có thuộc tính href bắt đầu bằng https:// có màu đỏ. Bộ chọn CSS nào sẽ thực hiện điều này?

A. a[href=https://]

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

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

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

2. Trong CSS, bộ chọn `[attribute*=value]` có chức năng gì?

A. Chọn các phần tử có thuộc tính có giá trị bắt đầu bằng value.

B. Chọn các phần tử có thuộc tính có giá trị kết thúc bằng value.

C. Chọn các phần tử có thuộc tính có giá trị chứa chuỗi con value bất kỳ đâu.

D. Chọn các phần tử có thuộc tính có giá trị là value chính xác.

3. Bộ chọn nào trong CSS sẽ áp dụng kiểu cho tất cả các phần tử a nằm bên trong một phần tử có class là navigation?

A. .navigation a

B. .navigation > a

C. .navigation + a

D. a.navigation

4. Để định kiểu cho tất cả các thẻ p trên trang web, bộ chọn CSS nào là phù hợp nhất?

A. #p

B. .p

C. p

D. *p

5. Bộ chọn :first-child trong CSS dùng để làm gì?

A. Chọn phần tử con đầu tiên của một phần tử cha.

B. Chọn phần tử đầu tiên trong danh sách.

C. Chọn phần tử con cuối cùng của một phần tử cha.

D. Chọn phần tử đầu tiên có thuộc tính cụ thể.

6. Để định kiểu cho các phần tử li là anh chị em liền kề ngay sau một phần tử h2, bạn sẽ sử dụng bộ chọn CSS nào?

A. h2 li

B. h2 > li

C. h2 + li

D. h2 ~ li

7. Cách tốt nhất để định kiểu cho nhiều phần tử có cùng một hành vi hoặc giao diện chung là gì?

A. Sử dụng ID duy nhất cho mỗi phần tử và định kiểu cho từng ID.

B. Sử dụng các lớp CSS (class) và áp dụng lớp đó cho các phần tử cần định kiểu.

C. Viết CSS inline trực tiếp trong từng thẻ HTML.

D. Sử dụng bộ chọn phần tử chung cho tất cả các phần tử.

8. Để định kiểu cho các phần tử tr (hàng trong bảng) có chỉ số lẻ (ví dụ: hàng 1, 3, 5), bạn sẽ sử dụng bộ chọn CSS nào?

A. tr:nth-child(even)

B. tr:nth-child(odd)

C. tr:nth-child(2n+1)

D. tr:nth-child(odd-index)

9. 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-color

D. font-color

10. Trong CSS, selector có vai trò gì?

A. Xác định thuộc tính cần thay đổi.

B. Xác định giá trị của thuộc tính.

C. Xác định phần tử HTML nào sẽ được áp dụng kiểu.

D. Xác định vị trí của phần tử trên trang.

11. Bộ chọn thuộc tính trong CSS cho phép bạn nhắm mục tiêu các phần tử dựa trên sự tồn tại hoặc giá trị của thuộc tính HTML của chúng. Ví dụ: `[type=text]` sẽ chọn gì?

A. Tất cả các thẻ có thuộc tính type.

B. Tất cả các thẻ có thuộc tính type với giá trị là text.

C. Chỉ các thẻ input có thuộc tính type với giá trị là text.

D. Tất cả các thẻ có thuộc tính text.

12. Nếu bạn muốn định kiểu cho tất cả các phần tử div trừ những phần tử có class là container, bạn sẽ dùng bộ chọn CSS nào?

A. div:not(.container)

B. div.container

C. div:not(container)

D. div:except(.container)

13. Bộ chọn :nth-child(n) trong CSS cho phép bạn làm gì?

A. Chọn tất cả các phần tử con.

B. Chọn phần tử con thứ n của một phần tử cha.

C. Chọn phần tử con đầu tiên và cuối cùng.

D. Chọn các phần tử con có giá trị thuộc tính cụ thể.

14. Bộ chọn :not(selector) trong CSS được dùng để làm gì?

A. Chọn tất cả các phần tử có cùng bộ chọn.

B. Chọn các phần tử KHÔNG khớp với bộ chọn được cung cấp bên trong dấu ngoặc.

C. Chọn các phần tử có thuộc tính not.

D. Chọn các phần tử có nội dung not.

15. Cú pháp CSS cho một quy tắc kiểu bao gồm hai phần chính: bộ chọn và khối khai báo. Khối khai báo chứa gì?

A. Chỉ các bộ chọn khác.

B. Các cặp thuộc tính-giá trị, được kết thúc bằng dấu chấm phẩy.

C. Chỉ các giá trị của thuộc tính.

D. Tên của các phần tử HTML.

16. Khoảng cách bên trong giữa nội dung của phần tử và đường viền của nó được xác định bởi thuộc tính CSS nào?

A. margin

B. border

C. padding

D. spacing

17. Để chọn tất cả các phần tử có thuộc tính data-status có giá trị kết thúc bằng pending, bạn sẽ dùng bộ chọn CSS nào?

A. [data-status$=pending]

B. [data-status^=pending]

C. [data-status*=pending]

D. [data-status=pending]

18. Trong CSS, làm thế nào để nhắm mục tiêu đến một phần tử chỉ khi nó đang được người dùng rê chuột qua (hover)?

A. element:hover

B. element:focus

C. element:active

D. element::hover

19. Thuộc tính CSS nào được sử dụng để đặt khoảng cách bên ngoài của một phần tử?

A. padding

B. margin

C. border

D. outline

20. Để thêm một đường viền xung quanh một phần tử, bạn sẽ sử dụng thuộc tính CSS nào?

A. padding

B. margin

C. border

D. outline

21. Nếu bạn muốn áp dụng kiểu cho phần tử li là con cuối cùng của một danh sách ul, bạn sẽ sử dụng bộ chọn nào?

A. ul li:first-child

B. ul li:last-child

C. ul > li:last-child

D. ul li:nth-child(last)

22. Bộ chọn `[attribute~=value]` trong CSS dùng để làm gì?

A. Chọn các phần tử có thuộc tính có giá trị bắt đầu bằng value.

B. Chọn các phần tử có thuộc tính có giá trị kết thúc bằng value.

C. Chọn các phần tử có thuộc tính chứa value như một từ riêng biệt trong một danh sách các từ được phân tách bằng khoảng trắng.

D. Chọn các phần tử có thuộc tính chứa chuỗi con value bất kỳ đâu.

23. Trong CSS, thuộc tính display có giá trị none sẽ làm gì?

A. Làm cho phần tử trở nên trong suốt.

B. Ẩn phần tử và nó sẽ không chiếm không gian trên trang.

C. Làm cho phần tử hiển thị như một khối (block).

D. Làm cho phần tử hiển thị nội tuyến (inline).

24. Để áp dụng một kiểu CSS cho tất cả các phần tử có class là highlight, bạn sẽ sử dụng bộ chọn CSS nào?

A. #highlight

B. class:highlight

C. highlight

D. .highlight

25. Nếu bạn muốn định kiểu cho một phần tử HTML có id là header, bạn sẽ sử dụng bộ chọn CSS nào?

A. header

B. .header

C. #header

D. id:header