Trắc nghiệm Khoa học máy tính 12 chân trời sáng tạo bài F11: Định kiểu CSS cho bảng và phần tử
1. Thuộc tính CSS nào cho phép bạn đặt kiểu đường viền cho toàn bộ bảng, bao gồm cả phần khung bên ngoài?
A. border
B. border-collapse
C. border-spacing
D. table-layout
2. Đâu là cách viết đúng cú pháp CSS để thiết lập chiều rộng của bảng có id là myTable thành 300 pixel?
A. #myTable { width: 300px; }
B. table#myTable { width: 300px; }
C. myTable { width: 300px; }
D. #myTable { width = 300px; }
3. Thuộc tính CSS nào được sử dụng để đặt chiều rộng cố định cho các cột của bảng, giúp đảm bảo bố cục không bị thay đổi bởi nội dung?
A. table-layout
B. width
C. column-width
D. grid-template-columns
4. Khi sử dụng border-collapse: collapse;, làm thế nào để tạo khoảng trống giữa nội dung và đường viền của ô?
A. Sử dụng thuộc tính padding trên thẻ td hoặc th.
B. Sử dụng thuộc tính margin trên thẻ td hoặc th.
C. Sử dụng thuộc tính border-spacing.
D. Không thể tạo khoảng trống khi sử dụng border-collapse: collapse;.
5. Đâu là cách viết đúng để áp dụng kiểu chữ Arial và cỡ chữ 14px cho tất cả các phần tử p bên trong một bảng có ID reportTable?
A. #reportTable p { font-family: Arial, sans-serif; font-size: 14px; }
B. table#reportTable p { font: 14px Arial, sans-serif; }
C. #reportTable > p { font-family: Arial; font-size: 14px; }
D. p in #reportTable { font-family: Arial; font-size: 14px; }
6. Nếu bạn muốn chỉ định màu nền cho tất cả các phần tử td trong bảng có class report là màu trắng, bạn sẽ viết CSS như thế nào?
A. .report td { background-color: white; }
B. td.report { background-color: white; }
C. .report { background-color: white; }
D. table.report td { background-color: white; }
7. Trong CSS, thuộc tính vertical-align có tác dụng gì đối với các phần tử bảng?
A. Căn chỉnh nội dung theo chiều dọc trong ô.
B. Căn chỉnh nội dung theo chiều ngang trong ô.
C. Thiết lập khoảng cách giữa các dòng.
D. Thiết lập căn lề cho toàn bộ bảng.
8. Để tạo hiệu ứng sọc ngang cho các dòng trong bảng HTML bằng CSS, bạn nên sử dụng kỹ thuật nào?
A. Sử dụng bộ chọn :nth-child(even) hoặc :nth-child(odd) trên thẻ tr.
B. Sử dụng thuộc tính background-color trực tiếp trên từng thẻ tr một cách thủ công.
C. Sử dụng bộ chọn lớp (class) cho từng dòng chẵn và lẻ.
D. Sử dụng JavaScript để thêm lớp CSS cho các dòng xen kẽ.
9. Thuộc tính CSS nào dùng để kiểm soát cách các đường viền của các ô trong bảng được nối với nhau?
A. border-collapse
B. border-spacing
C. table-layout
D. border-separate
10. Thuộc tính CSS nào được dùng để căn chỉnh nội dung văn bản trong các ô bảng theo chiều ngang?
A. text-align
B. vertical-align
C. align
D. content-align
11. Thuộc tính CSS nào được dùng để tạo khoảng cách giữa nội dung của một ô bảng và đường viền của nó?
A. padding
B. margin
C. spacing
D. border-spacing
12. Thuộc tính CSS nào cho phép bạn định dạng chỉ riêng phần đầu trang của bảng (thead) với màu nền khác biệt?
A. thead
B. table-header
C. header
D. thead-background
13. Khi sử dụng border-collapse: separate;, khoảng cách giữa các đường viền ô bảng được kiểm soát bởi thuộc tính nào?
A. border-spacing
B. border-collapse
C. margin
D. padding
14. Nếu bạn muốn một ô bảng chiếm dụng hai cột, bạn sẽ sử dụng thuộc tính HTML nào trong thẻ td hoặc th?
A. colspan
B. rowspan
C. cell-span
D. column-span
15. Trong CSS, thuộc tính border-spacing chỉ có tác dụng khi thuộc tính nào của bảng được đặt là separate?
A. border-collapse
B. table-layout
C. border-style
D. border-width
16. Đâu là cách viết đúng để tạo một đường viền mỏng, liền nét, màu đen cho toàn bộ các ô trong một bảng có ID inventoryTable?
A. #inventoryTable td { border: 1px solid black; }
B. #inventoryTable th, #inventoryTable td { border: 1px solid black; }
C. #inventoryTable { border: 1px solid black; }
D. #inventoryTable td { border-width: 1px; border-style: solid; border-color: black; }
17. Trong CSS, thuộc tính nào được sử dụng để xác định kiểu đường viền cho các ô trong bảng?
A. border-collapse
B. border-spacing
C. border
D. border-style
18. Để định dạng màu nền của dòng thứ ba trong bảng có ID productTable thành màu xanh nhạt (#e0f7fa), bạn sẽ sử dụng bộ chọn CSS nào?
A. #productTable tr:nth-child(3) { background-color: #e0f7fa; }
B. #productTable tr:nth-child(2) { background-color: #e0f7fa; }
C. #productTable tr:nth-child(3n) { background-color: #e0f7fa; }
D. #productTable tr:first-child + tr + tr { background-color: #e0f7fa; }
19. Khi áp dụng CSS cho một phần tử, thuộc tính display có thể được đặt thành giá trị nào để nó hoạt động giống như một ô bảng?
A. table-cell
B. block
C. inline
D. flex
20. Thuộc tính border-collapse: collapse; có ảnh hưởng gì đến việc hiển thị các đường viền của các ô trong bảng?
A. Các đường viền của các ô liền kề sẽ hợp nhất thành một đường viền duy nhất.
B. Các đường viền của các ô sẽ có khoảng cách bằng nhau.
C. Các đường viền sẽ bị ẩn đi.
D. Mỗi ô sẽ có đường viền riêng biệt và rõ ràng.
21. Để đặt màu nền cho tất cả các ô trong bảng có class data-table thành màu xám nhạt (#f2f2f2), cú pháp CSS nào là chính xác nhất?
A. .data-table td { background-color: #f2f2f2; }
B. table.data-table { background-color: #f2f2f2; }
C. .data-table { background-color: #f2f2f2; }
D. td.data-table { background-color: #f2f2f2; }
22. Đâu là bộ chọn CSS hiệu quả nhất để áp dụng kiểu dáng chỉ cho dòng đầu tiên (header) của một bảng?
A. thead tr
B. table tr:first-child
C. table tr:nth-child(1)
D. header-row
23. Đâu là cách viết đúng để định nghĩa một lớp CSS có tên là highlight áp dụng cho các ô bảng?
A. .highlight
B. #highlight
C. class: highlight
D. highlight:
24. Khi thuộc tính border-collapse được đặt là collapse, khoảng cách giữa các đường viền của ô bảng sẽ như thế nào?
A. Khoảng cách sẽ bằng không, các đường viền sẽ nối liền nhau.
B. Khoảng cách sẽ được xác định bởi thuộc tính border-spacing.
C. Khoảng cách sẽ tự động điều chỉnh dựa trên nội dung ô.
D. Khoảng cách sẽ là mặc định 2px.
25. Đâu là cách viết đúng để định dạng đường viền cho tất cả các phần tử th (tiêu đề bảng) có màu đỏ và dày 2 pixel?
A. th { border: 2px solid red; }
B. th { border-width: 2px; border-color: red; }
C. th { border-style: solid; border-width: 2px; border-color: red; }
D. th { border: solid red 2px; }
