Trắc nghiệm Khoa học máy tính 12 Chân trời bài F11: Định kiểu CSS cho bảng và phần tử
1. Thuộc tính nào cho phép bạn thêm khoảng đệm (padding) vào bên trong các ô bảng?
A. padding
B. margin
C. border-spacing
D. cell-padding
2. Thuộc tính "caption-side" trong CSS dùng để làm gì đối với phần chú thích (caption) của bảng?
A. Xác định vị trí của chú thích (trên hoặc dưới bảng)
B. Đặt kiểu chữ cho chú thích
C. Thay đổi màu sắc của chú thích
D. Xác định khoảng cách giữa chú thích và bảng
3. Bạn muốn đặt một đường viền phía dưới cho mỗi hàng trong bảng, ngoại trừ hàng cuối cùng. Cú pháp CSS nào là phù hợp nhất?
A. tr { border-bottom: 1px solid black; } tr:last-child { border-bottom: none; }
B. tr:not(:last-child) { border-bottom: 1px solid black; }
C. table { border-bottom: 1px solid black; }
D. tr { border: 1px solid black; }
4. Đâu là cách đúng để đặt đường viền cho chỉ phần trên của một ô bảng?
A. td { border-top: 2px dashed red; }
B. td { border: top 2px dashed red; }
C. td { border-style-top: dashed; border-width-top: 2px; border-color-top: red; }
D. td { border-top-width: 2px; border-top-style: dashed; border-top-color: red; }
5. Nếu bạn muốn bảng của mình có đường viền kép (double border), bạn sẽ đặt giá trị nào cho thuộc tính "border-style"?
A. double
B. dashed
C. dotted
D. solid
6. Bạn muốn đặt khoảng đệm bên trong (padding) cho tất cả các ô trong bảng là 10px. Cú pháp CSS nào là chính xác?
A. td, th { padding: 10px; }
B. table { padding: 10px; }
C. td { padding: 10px; }
D. table * { padding: 10px; }
7. Bạn muốn đặt chiều rộng của một cột cụ thể trong bảng là 150 pixel. Cách CSS nào sau đây là phù hợp nhất?
A. td:nth-child(2) { width: 150px; }
B. col:nth-child(2) { width: 150px; }
C. table td:nth-child(2) { width: 150px; }
D. th:nth-child(2) { width: 150px; }
8. Thuộc tính CSS "border-collapse" có giá trị nào sau đây sẽ làm cho các đường viền của các ô liền kề trong bảng gộp lại thành một đường duy nhất?
A. collapse
B. separate
C. single
D. merge
9. Thuộc tính CSS nào được sử dụng để căn chỉnh nội dung theo chiều dọc trong các ô bảng?
A. vertical-align
B. text-align
C. align-items
D. valign
10. Thuộc tính "empty-cells" trong CSS dùng để làm gì đối với các ô bảng không có nội dung?
A. Kiểm soát việc hiển thị đường viền của các ô trống
B. Đặt màu nền cho các ô trống
C. Căn chỉnh nội dung trong các ô trống
D. Ẩn hoàn toàn các ô trống
11. Thuộc tính CSS nào được sử dụng để thay đổi màu nền của một hàng trong bảng khi di chuột qua (hover)?
A. tr:hover { background-color: #f0f0f0; }
B. td:hover { background-color: #f0f0f0; }
C. table:hover { background-color: #f0f0f0; }
D. tr { background-color: #f0f0f0; }
12. Nếu bạn muốn các ô trong một bảng có chiều rộng bằng nhau, bất kể nội dung của chúng, bạn nên áp dụng thuộc tính CSS nào cho phần tử "table"?
A. table-layout: fixed;
B. width: 100%;
C. display: grid;
D. column-width: auto;
13. Khi "border-collapse" được đặt là "separate", khoảng cách giữa các ô bảng được xác định bởi thuộc tính nào?
A. border-spacing
B. cell-spacing
C. gap
D. spacing
14. Trong CSS, thuộc tính nào được sử dụng để kiểm soát khoảng cách giữa các ô (cell) trong một bảng?
A. border-spacing
B. padding-cell
C. margin-cell
D. spacing-table
15. Bạn muốn tô màu nền cho tất cả các ô trong một bảng bằng màu xanh nhạt. Cú pháp CSS nào là đúng?
A. td, th { background-color: lightblue; }
B. table { background-color: lightblue; }
C. table td { background: lightblue; }
D. table th { background-color: lightblue; }
16. Để làm cho các đường viền của bảng và các ô hiển thị tách biệt và có khoảng trống, bạn cần đặt "border-collapse" thành giá trị nào?
A. separate
B. collapse
C. normal
D. spacing
17. Nếu bạn muốn chỉ định một đường viền duy nhất cho toàn bộ bảng (bao gồm cả các cạnh bên ngoài), bạn nên áp dụng thuộc tính CSS nào cho phần tử "table"?
A. table { border: 1px solid black; }
B. table { border-top: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; }
C. table td { border: 1px solid black; }
D. table th { border: 1px solid black; }
18. Trong các lựa chọn sau, phương án nào **KHÔNG** phải là giá trị hợp lệ cho thuộc tính "text-align"?
A. center
B. justify
C. middle
D. left
19. Khi sử dụng "border-collapse: collapse;", đường viền của ô có độ dày lớn hơn sẽ được ưu tiên nếu các ô liền kề có các giá trị "border-width" khác nhau. Đúng hay Sai?
A. Đúng
B. Sai
C. Tùy thuộc vào trình duyệt
D. Chỉ đúng khi sử dụng CSS3
20. Để làm cho văn bản trong tất cả các ô bảng (td và th) được hiển thị theo chiều dọc từ dưới lên trên, bạn sẽ sử dụng thuộc tính CSS nào?
A. writing-mode: vertical-rl;
B. text-orientation: upright;
C. transform: rotate(90deg);
D. direction: rtl;
21. Để căn chỉnh nội dung của các ô bảng sang bên phải, bạn sẽ sử dụng thuộc tính CSS nào?
A. text-align: right;
B. align: right;
C. float: right;
D. vertical-align: right;
22. Để chỉ định màu sắc cho các hàng xen kẽ (zebra-striping) trong một bảng, bạn nên sử dụng bộ chọn CSS nào?
A. tr:nth-child(even) và tr:nth-child(odd)
B. tr:even và tr:odd
C. tr:first-child và tr:last-child
D. tr:nth-of-type(even) và tr:nth-of-type(odd)
23. Đâu là cách viết đúng cú pháp CSS để đặt đường viền cho tất cả các ô (td và th) trong một bảng?
A. table td, table th { border: 1px solid black; }
B. table { border: 1px solid black; }
C. td, th { border: 1px solid black; }
D. table * { border: 1px solid black; }
24. Thuộc tính CSS nào được sử dụng để tạo hiệu ứng đổ bóng (shadow) cho bảng?
A. box-shadow
B. text-shadow
C. shadow
D. table-shadow
25. Nếu bạn muốn các ô trong bảng có chiều rộng tự động điều chỉnh dựa trên nội dung của chúng, bạn nên đặt "table-layout" thành giá trị nào?
A. auto
B. fixed
C. content
D. normal
