Đề Trắc nghiệm Tin học 12 – Bài F11: Định kiểu CSS cho bảng và phần tử (Chân Trời Sáng Tạo) Đề 01 Đề 02 Đề 03 Đề 04 Đề 05 Đề 06 Đề 07 Đề 08 Đề 09 Đề 10 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử - Đề 01 Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử - Đề 01 được xây dựng với nhiều câu hỏi chất lượng, sát với nội dung chương trình học, giúp bạn dễ dàng ôn tập và kiểm tra kiến thức hiệu quả. Hãy cùng bắt đầu làm bài tập trắc nghiệm ngay để nâng cao hiểu biết và chuẩn bị tốt cho kỳ thi sắp tới! Câu 1: Bạn đang định kiểu cho một bảng HTML. Bạn muốn các đường viền của các ô (` `, ` `) và đường viền của chính bảng (` `) chỉ hiển thị là một đường kẻ duy nhất, không bị tách rời hay có khoảng cách. Thuộc tính CSS nào sau đây cần được áp dụng cho phần tử ` ` để đạt được hiệu ứng này? A. border-spacing: 0; B. border: 1px solid black; C. border-collapse: collapse; D. border-style: solid; Câu 2: Để làm cho nội dung văn bản bên trong tất cả các ô dữ liệu (` `) của bảng được căn giữa theo chiều ngang, bạn sẽ sử dụng thuộc tính CSS nào? A. vertical-align: middle; B. margin: auto; C. padding: center; D. text-align: center; Câu 3: Bạn muốn tạo hiệu ứng sọc ngựa (màu nền xen kẽ) cho các hàng dữ liệu trong bảng để dễ đọc hơn. Cụ thể, bạn muốn các hàng chẵn (thứ 2, 4, 6...) có màu nền khác với các hàng lẻ. Quy tắc CSS nào sau đây sử dụng đúng pseudo-class để chọn các hàng chẵn? A. tr:odd { background-color: #f2f2f2; } B. tr:nth-child(even) { background-color: #f2f2f2; } C. tr:nth-child(odd) { background-color: #f2f2f2; } D. tr.even-row { background-color: #f2f2f2; } Câu 4: Để tạo khoảng đệm bên trong mỗi ô dữ liệu (` `) và ô tiêu đề (` `) của bảng, giúp nội dung không bị dính sát vào đường viền, bạn sử dụng thuộc tính CSS nào? A. padding B. margin C. border-spacing D. text-indent Câu 5: Xét đoạn mã CSS sau: ```css table, th, td { border: 1px solid black; } table { border-collapse: separate; border-spacing: 5px; } ``` Đoạn mã này sẽ tạo ra hiệu ứng đường viền cho bảng như thế nào? A. Đường viền đơn, không có khoảng cách giữa các ô. B. Đường viền đôi, không có khoảng cách giữa các ô. C. Đường viền đơn, mỗi ô có đường viền riêng nhưng dính liền. D. Đường viền đơn cho mỗi ô, có khoảng cách 5px giữa các ô. Câu 6: Để thay đổi màu nền của hàng tiêu đề bảng (` `) thành màu xanh và màu chữ thành màu trắng, bạn sẽ sử dụng kết hợp các thuộc tính CSS nào? A. background-image và font-color B. border-color và text-decoration C. background-color và color D. list-style và font-weight Câu 7: Khi thiết kế bố cục trang web sử dụng các phần tử ` `, bạn muốn một `div` nằm ở bên trái và một `div` khác nằm ở bên phải trên cùng một hàng. Thuộc tính CSS nào thường được sử dụng để "đẩy" các phần tử sang trái hoặc phải như vậy? A. float B. position C. display D. align-items Câu 8: Sau khi sử dụng thuộc tính `float` cho một hoặc nhiều `div`, các phần tử theo sau trong mã HTML có thể bị "cuốn" lên và nằm cạnh các `div` đã float, gây ra lỗi bố cục. Để ngăn chặn hành vi này và đảm bảo phần tử tiếp theo bắt đầu dưới tất cả các `div` đã float, bạn sử dụng thuộc tính CSS nào? A. overflow: hidden; B. clear: both; C. display: block; D. position: static; Câu 9: Bạn có một `div` và muốn đặt khoảng cách 20px ở phía ngoài (bên ngoài đường viền) của nó so với các phần tử xung quanh. Thuộc tính CSS nào cần sử dụng? A. padding B. border-spacing C. outline D. margin Câu 10: Theo mặc định, phần tử ` ` là một phần tử cấp khối (block-level element). Điều này có ý nghĩa gì đối với bố cục khi bạn đặt nhiều `div` liền kề trong mã HTML? A. Mỗi `div` sẽ bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng. B. Các `div` sẽ nằm cạnh nhau trên cùng một dòng. C. Nội dung bên trong `div` sẽ được căn giữa tự động. D. Các `div` sẽ có đường viền mặc định. Câu 11: Bạn muốn một bảng có chiều rộng cố định là 500 pixel và nằm giữa trang web (căn giữa theo chiều ngang). Quy tắc CSS nào sau đây là cách hiệu quả nhất để đạt được điều này? A. table { width: 500px; text-align: center; } B. table { width: 500px; float: center; } C. table { width: 500px; margin: auto; } D. table { width: 500px; position: center; } Câu 12: Để làm nổi bật hàng dữ liệu khi người dùng di chuột qua bằng cách thay đổi màu nền của hàng đó, bạn sẽ sử dụng selector và thuộc tính nào trong CSS? A. tr:active { background-color: yellow; } B. tr:focus { background-color: yellow; } C. tr:visited { background-color: yellow; } D. tr:hover { background-color: yellow; } Câu 13: Bạn muốn một thẻ `div` có chiều rộng là 30% của phần tử chứa nó và chiều cao cố định là 200px. Quy tắc CSS nào sau đây định nghĩa đúng kích thước này? A. div { size: 30% 200px; } B. div { width: 30%; height: 200px; } C. div { max-width: 30%; min-height: 200px; } D. div { dimension: 30%, 200px; } Câu 14: Xét hai `div` A và B trong HTML. Bạn áp dụng `float: left;` cho `div` A và `float: right;` cho `div` B. Nếu cả hai `div` đều có chiều rộng nhỏ hơn 50% của phần tử chứa và đủ không gian trên cùng một hàng, kết quả bố cục sẽ như thế nào? A. Div A nằm bên trái, Div B nằm bên phải trên cùng một hàng. B. Div A nằm bên trái, Div B nằm ngay dưới Div A. C. Div A nằm bên trái, Div B nằm bên phải nhưng trên hàng khác. D. Div A và Div B đều nằm giữa trang. Câu 15: Trong CSS, sự khác biệt cơ bản giữa `margin` và `padding` khi áp dụng cho một phần tử có đường viền là gì? A. Margin tạo khoảng trống bên trong phần tử, padding tạo khoảng trống bên ngoài. B. Margin chỉ áp dụng cho văn bản, padding áp dụng cho hình ảnh. C. Padding tạo khoảng trống giữa nội dung và đường viền, margin tạo khoảng trống bên ngoài đường viền. D. Margin và padding đều tạo khoảng trống bên trong phần tử. Câu 16: Bạn muốn định kiểu cho đường viền của riêng hàng đầu tiên trong bảng (hàng tiêu đề). Selector CSS nào sau đây phù hợp nhất để chọn chỉ hàng đầu tiên? A. tr:first-child B. tr:last-child C. tr:nth-child(1) D. tr.header-row Câu 17: Để đặt màu nền cho các ô tiêu đề (` `) và các ô dữ liệu (` `) trong bảng, bạn sẽ sử dụng thuộc tính CSS nào? A. color B. background-color C. border-color D. fill Câu 18: Bạn có một `div` chứa một hình ảnh và một đoạn văn bản. Bạn áp dụng `float: left;` cho hình ảnh. Điều gì có khả năng xảy ra với đoạn văn bản? A. Đoạn văn bản sẽ nằm ngay dưới hình ảnh. B. Đoạn văn bản sẽ biến mất. C. Đoạn văn bản sẽ nằm bên cạnh hình ảnh (ở phía bên phải). D. Đoạn văn bản sẽ đẩy hình ảnh xuống dưới. Câu 19: Xét đoạn HTML và CSS sau: ```html A. Box 1 và Box 2 vẫn nằm trên hai dòng khác nhau. B. Box 1 và Box 2 sẽ nằm cạnh nhau, và đoạn văn bản có thể nằm bên cạnh chúng. C. Box 1 và Box 2 sẽ biến mất. D. Đoạn văn bản sẽ nằm giữa Box 1 và Box 2. Câu 20: Bạn muốn tạo một khoảng cách 15px giữa đường viền của một `div` và nội dung bên trong `div` đó. Thuộc tính CSS nào phù hợp nhất để thực hiện điều này? A. padding: 15px; B. margin: 15px; C. border-spacing: 15px; D. text-indent: 15px; Câu 21: Để định kiểu riêng cho ô dữ liệu cuối cùng (` `) trong mỗi hàng của bảng, bạn có thể sử dụng pseudo-class nào? A. td:first-child B. td:nth-child(odd) C. td:last-child D. td:only-child Câu 22: Xét một bảng có `border-collapse: collapse;`. Nếu bạn chỉ định `border: 2px dashed red;` cho cả `table` và `td`, đường viền hiển thị cuối cùng sẽ như thế nào? A. Đường viền 1px nét liền màu đen. B. Đường viền 2px nét liền màu đỏ. C. Đường viền 1px nét đứt màu đỏ. D. Đường viền 2px nét đứt màu đỏ. Câu 23: Bạn muốn tạo một khoảng cách 10px giữa các đường viền của các ô trong bảng mà KHÔNG gộp chúng lại (đường viền vẫn tách rời). Thuộc tính nào cần sử dụng? A. padding B. border-spacing C. margin D. cell-padding Câu 24: Để đảm bảo rằng một phần tử `div` có chiều cao tự động điều chỉnh để chứa hết nội dung float bên trong nó (ngăn chặn tình trạng phần tử cha bị xẹp chiều cao khi chứa float), bạn có thể sử dụng thuộc tính nào cho phần tử `div` cha? A. overflow: hidden; B. clear: both; C. float: none; D. height: auto; Câu 25: Bạn muốn thiết lập khoảng cách lề trên và lề dưới 10px, lề trái và lề phải 20px cho một thẻ `div`. Quy tắc CSS nào sau đây viết gọn và đúng? A. margin: 10px 10px 20px 20px; B. margin: 20px 10px; C. margin: 10px 20px 10px 20px; D. margin: 10px 20px; Câu 26: Để định kiểu cho tiêu đề bảng (` `), ví dụ như căn lề tiêu đề ở phía dưới bảng thay vì mặc định ở trên, bạn sử dụng thuộc tính CSS nào cho `caption`? A. text-align: bottom; B. caption-side: bottom; C. vertical-align: bottom; D. position: bottom; Câu 27: Bạn có một bảng và muốn tất cả các ô (`td`, `th`) có đường viền 1px nét liền màu xám. Quy tắc CSS nào sau đây thực hiện điều này? A. td, th { border: 1px solid gray; } B. table { border: 1px solid gray; } C. td { border-width: 1px; border-style: solid; border-color: gray; } D. td th { border: 1px solid gray; } Câu 28: Khi sử dụng `float: left;` cho nhiều `div` có cùng chiều rộng, chúng sẽ cố gắng xếp hàng ngang cho đến khi hết chỗ trên dòng hiện tại. Điều gì sẽ xảy ra với `div` tiếp theo khi không còn đủ không gian trên dòng? A. Nó sẽ bị ẩn đi. B. Nó sẽ tràn ra ngoài phần tử chứa. C. Nó sẽ xuống dòng và float ở dòng tiếp theo. D. Nó sẽ nằm đè lên phần tử trước đó. Câu 29: Bạn muốn loại bỏ hoàn toàn khoảng cách giữa các ô trong bảng mà không làm gộp đường viền (tức là vẫn có đường viền riêng cho từng ô, nhưng chúng dính liền nhau). Bạn cần thiết lập thuộc tính nào cho bảng? A. border-collapse: collapse; B. border-spacing: 0; C. padding: 0; D. margin: 0; Câu 30: Xét đoạn mã CSS cho một `div`: ```css .my-div { width: 200px; padding: 10px; border: 5px solid blue; margin: 15px; } ``` Tổng chiều rộng thực tế mà phần tử `.my-div` chiếm trên trang (bao gồm cả nội dung, padding, border và margin) là bao nhiêu? A. 200px B. 210px C. 230px D. 260px 1 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 1: Bạn đang định kiểu cho một bảng HTML. Bạn muốn các đường viền của các ô (` `, ` `) và đường viền của chính bảng (` `) chỉ hiển thị là một đường kẻ duy nhất, không bị tách rời hay có khoảng cách. Thuộc tính CSS nào sau đây cần được áp dụng cho phần tử ` ` để đạt được hiệu ứng này? border-spacing: 0; border-spacing: 0; border: 1px solid black; border: 1px solid black; border-collapse: collapse; border-collapse: collapse; border-style: solid; border-style: solid; Thuộc tính `border-collapse` với giá trị `collapse` được sử dụng để gộp các đường viền liền kề của ô và bảng thành một đường viền duy nhất, loại bỏ khoảng cách giữa chúng. 2 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 2: Để làm cho nội dung văn bản bên trong tất cả các ô dữ liệu (` `) của bảng được căn giữa theo chiều ngang, bạn sẽ sử dụng thuộc tính CSS nào? vertical-align: middle; vertical-align: middle; margin: auto; margin: auto; padding: center; padding: center; text-align: center; text-align: center; Thuộc tính `text-align` được sử dụng để căn chỉnh nội dung văn bản theo chiều ngang bên trong một phần tử. Giá trị `center` sẽ căn giữa nội dung. 3 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 3: Bạn muốn tạo hiệu ứng sọc ngựa (màu nền xen kẽ) cho các hàng dữ liệu trong bảng để dễ đọc hơn. Cụ thể, bạn muốn các hàng chẵn (thứ 2, 4, 6...) có màu nền khác với các hàng lẻ. Quy tắc CSS nào sau đây sử dụng đúng pseudo-class để chọn các hàng chẵn? tr:odd { background-color: #f2f2f2; } tr:odd { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f2f2f2; } tr:nth-child(odd) { background-color: #f2f2f2; } tr:nth-child(odd) { background-color: #f2f2f2; } tr.even-row { background-color: #f2f2f2; } tr.even-row { background-color: #f2f2f2; } Pseudo-class `:nth-child(even)` được sử dụng để chọn các phần tử là con thứ 2, 4, 6... của phần tử cha. Áp dụng cho `tr:nth-child(even)` sẽ chọn các hàng chẵn trong bảng. 4 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 4: Để tạo khoảng đệm bên trong mỗi ô dữ liệu (` `) và ô tiêu đề (` `) của bảng, giúp nội dung không bị dính sát vào đường viền, bạn sử dụng thuộc tính CSS nào? padding padding margin margin border-spacing border-spacing text-indent text-indent Thuộc tính `padding` tạo khoảng không gian đệm bên trong đường viền của một phần tử, giữa nội dung và đường viền. 5 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 5: Xét đoạn mã CSS sau: ```css table, th, td { border: 1px solid black; } table { border-collapse: separate; border-spacing: 5px; } ``` Đoạn mã này sẽ tạo ra hiệu ứng đường viền cho bảng như thế nào? Đường viền đơn, không có khoảng cách giữa các ô. Đường viền đơn, không có khoảng cách giữa các ô. Đường viền đôi, không có khoảng cách giữa các ô. Đường viền đôi, không có khoảng cách giữa các ô. Đường viền đơn, mỗi ô có đường viền riêng nhưng dính liền. Đường viền đơn, mỗi ô có đường viền riêng nhưng dính liền. Đường viền đơn cho mỗi ô, có khoảng cách 5px giữa các ô. Đường viền đơn cho mỗi ô, có khoảng cách 5px giữa các ô. `border-collapse: separate;` là giá trị mặc định, giữ cho các đường viền của ô và bảng tách rời. `border-spacing: 5px;` thêm khoảng cách 5px giữa các ô. Do đó, các ô sẽ có đường viền riêng và có khoảng cách 5px giữa chúng. 6 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 6: Để thay đổi màu nền của hàng tiêu đề bảng (` `) thành màu xanh và màu chữ thành màu trắng, bạn sẽ sử dụng kết hợp các thuộc tính CSS nào? background-image và font-color background-image và font-color border-color và text-decoration border-color và text-decoration background-color và color background-color và color list-style và font-weight list-style và font-weight `background-color` dùng để đặt màu nền, và `color` dùng để đặt màu chữ (văn bản) của phần tử. 7 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 7: Khi thiết kế bố cục trang web sử dụng các phần tử ` `, bạn muốn một `div` nằm ở bên trái và một `div` khác nằm ở bên phải trên cùng một hàng. Thuộc tính CSS nào thường được sử dụng để 'đẩy' các phần tử sang trái hoặc phải như vậy? float float position position display display align-items align-items Thuộc tính `float` được sử dụng để đưa một phần tử ra khỏi luồng bình thường của tài liệu và đẩy nó sang trái hoặc phải, cho phép các phần tử khác (như văn bản) bao quanh nó. 8 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 8: Sau khi sử dụng thuộc tính `float` cho một hoặc nhiều `div`, các phần tử theo sau trong mã HTML có thể bị 'cuốn' lên và nằm cạnh các `div` đã float, gây ra lỗi bố cục. Để ngăn chặn hành vi này và đảm bảo phần tử tiếp theo bắt đầu dưới tất cả các `div` đã float, bạn sử dụng thuộc tính CSS nào? Thuộc tính `clear` được sử dụng để chỉ định phần tử đó không được nằm cạnh các phần tử đã float ở bên trái, bên phải hoặc cả hai bên. Giá trị `both` ngăn chặn nó nằm cạnh các phần tử float ở cả hai phía. 9 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 9: Bạn có một `div` và muốn đặt khoảng cách 20px ở phía ngoài (bên ngoài đường viền) của nó so với các phần tử xung quanh. Thuộc tính CSS nào cần sử dụng? padding padding border-spacing border-spacing outline outline margin margin Thuộc tính `margin` tạo khoảng không gian bên ngoài đường viền của một phần tử, tạo khoảng cách giữa phần tử đó và các phần tử lân cận. 10 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 10: Theo mặc định, phần tử ` ` là một phần tử cấp khối (block-level element). Điều này có ý nghĩa gì đối với bố cục khi bạn đặt nhiều `div` liền kề trong mã HTML? Mỗi `div` sẽ bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng. Mỗi `div` sẽ bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng. Các `div` sẽ nằm cạnh nhau trên cùng một dòng. Các `div` sẽ nằm cạnh nhau trên cùng một dòng. Nội dung bên trong `div` sẽ được căn giữa tự động. Nội dung bên trong `div` sẽ được căn giữa tự động. Các `div` sẽ có đường viền mặc định. Các `div` sẽ có đường viền mặc định. Phần tử cấp khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng khả dụng theo mặc định. Do đó, các `div` liền kề sẽ tự động xếp chồng lên nhau theo chiều dọc. 11 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 11: Bạn muốn một bảng có chiều rộng cố định là 500 pixel và nằm giữa trang web (căn giữa theo chiều ngang). Quy tắc CSS nào sau đây là cách hiệu quả nhất để đạt được điều này? table { width: 500px; text-align: center; } table { width: 500px; text-align: center; } table { width: 500px; float: center; } table { width: 500px; float: center; } table { width: 500px; margin: auto; } table { width: 500px; margin: auto; } table { width: 500px; position: center; } table { width: 500px; position: center; } Để căn giữa một phần tử cấp khối (như bảng hoặc div) có chiều rộng cố định, bạn đặt `width` và sử dụng `margin: auto;`. `margin: auto;` sẽ tự động tính toán lề trái và lề phải bằng nhau. 12 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 12: Để làm nổi bật hàng dữ liệu khi người dùng di chuột qua bằng cách thay đổi màu nền của hàng đó, bạn sẽ sử dụng selector và thuộc tính nào trong CSS? tr:active { background-color: yellow; } tr:active { background-color: yellow; } tr:focus { background-color: yellow; } tr:focus { background-color: yellow; } tr:visited { background-color: yellow; } tr:visited { background-color: yellow; } tr:hover { background-color: yellow; } tr:hover { background-color: yellow; } Pseudo-class `:hover` được sử dụng để định kiểu cho một phần tử khi con trỏ chuột di qua nó. Áp dụng cho `tr:hover` sẽ định kiểu cho hàng khi di chuột qua. 13 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 13: Bạn muốn một thẻ `div` có chiều rộng là 30% của phần tử chứa nó và chiều cao cố định là 200px. Quy tắc CSS nào sau đây định nghĩa đúng kích thước này? div { size: 30% 200px; } div { size: 30% 200px; } div { width: 30%; height: 200px; } div { width: 30%; height: 200px; } div { max-width: 30%; min-height: 200px; } div { max-width: 30%; min-height: 200px; } div { dimension: 30%, 200px; } div { dimension: 30%, 200px; } Thuộc tính `width` và `height` được sử dụng để đặt kích thước của phần tử. Giá trị có thể là phần trăm (%) hoặc pixel (px). 14 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 14: Xét hai `div` A và B trong HTML. Bạn áp dụng `float: left;` cho `div` A và `float: right;` cho `div` B. Nếu cả hai `div` đều có chiều rộng nhỏ hơn 50% của phần tử chứa và đủ không gian trên cùng một hàng, kết quả bố cục sẽ như thế nào? Div A nằm bên trái, Div B nằm bên phải trên cùng một hàng. Div A nằm bên trái, Div B nằm bên phải trên cùng một hàng. Div A nằm bên trái, Div B nằm ngay dưới Div A. Div A nằm bên trái, Div B nằm ngay dưới Div A. Div A nằm bên trái, Div B nằm bên phải nhưng trên hàng khác. Div A nằm bên trái, Div B nằm bên phải nhưng trên hàng khác. Div A và Div B đều nằm giữa trang. Div A và Div B đều nằm giữa trang. `float: left;` đẩy A sang trái. `float: right;` đẩy B sang phải. Nếu có đủ không gian, chúng sẽ nằm trên cùng một hàng, A ở sát lề trái và B ở sát lề phải. 15 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 15: Trong CSS, sự khác biệt cơ bản giữa `margin` và `padding` khi áp dụng cho một phần tử có đường viền là gì? Margin tạo khoảng trống bên trong phần tử, padding tạo khoảng trống bên ngoài. Margin tạo khoảng trống bên trong phần tử, padding tạo khoảng trống bên ngoài. Margin chỉ áp dụng cho văn bản, padding áp dụng cho hình ảnh. Margin chỉ áp dụng cho văn bản, padding áp dụng cho hình ảnh. Padding tạo khoảng trống giữa nội dung và đường viền, margin tạo khoảng trống bên ngoài đường viền. Padding tạo khoảng trống giữa nội dung và đường viền, margin tạo khoảng trống bên ngoài đường viền. Margin và padding đều tạo khoảng trống bên trong phần tử. Margin và padding đều tạo khoảng trống bên trong phần tử. `padding` tạo khoảng trống giữa nội dung và đường viền (bên trong đường viền). `margin` tạo khoảng trống bên ngoài đường viền, giữa phần tử đó và các phần tử khác. 16 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 16: Bạn muốn định kiểu cho đường viền của riêng hàng đầu tiên trong bảng (hàng tiêu đề). Selector CSS nào sau đây phù hợp nhất để chọn chỉ hàng đầu tiên? tr:first-child tr:first-child tr:last-child tr:last-child tr:nth-child(1) tr:nth-child(1) tr.header-row tr.header-row Pseudo-class `:first-child` được sử dụng để chọn phần tử là con đầu tiên của phần tử cha. `tr:first-child` sẽ chọn hàng đầu tiên trong bảng. 17 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 17: Để đặt màu nền cho các ô tiêu đề (` `) và các ô dữ liệu (` `) trong bảng, bạn sẽ sử dụng thuộc tính CSS nào? color color background-color background-color border-color border-color fill fill `background-color` được sử dụng để đặt màu nền cho bất kỳ phần tử HTML nào, bao gồm cả ` ` và ` `. 18 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 18: Bạn có một `div` chứa một hình ảnh và một đoạn văn bản. Bạn áp dụng `float: left;` cho hình ảnh. Điều gì có khả năng xảy ra với đoạn văn bản? Đoạn văn bản sẽ nằm ngay dưới hình ảnh. Đoạn văn bản sẽ nằm ngay dưới hình ảnh. Đoạn văn bản sẽ biến mất. Đoạn văn bản sẽ biến mất. Đoạn văn bản sẽ nằm bên cạnh hình ảnh (ở phía bên phải). Đoạn văn bản sẽ nằm bên cạnh hình ảnh (ở phía bên phải). Đoạn văn bản sẽ đẩy hình ảnh xuống dưới. Đoạn văn bản sẽ đẩy hình ảnh xuống dưới. Khi một phần tử (hình ảnh) được float, nó được lấy ra khỏi luồng bình thường và các phần tử khác (văn bản) sẽ cố gắng 'cuốn' xung quanh nó. 19 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 19: Xét đoạn HTML và CSS sau: ```html Box 1 Box 2 This is a paragraph. ``` ```css .box { width: 100px; height: 100px; margin: 10px; border: 1px solid black; /* float: left; */ /* Dòng này bị chú thích */ } ``` Nếu bỏ chú thích (`/* */`) ở dòng `float: left;`, bố cục sẽ thay đổi như thế nào? Box 1 và Box 2 vẫn nằm trên hai dòng khác nhau. Box 1 và Box 2 vẫn nằm trên hai dòng khác nhau. Box 1 và Box 2 sẽ nằm cạnh nhau, và đoạn văn bản có thể nằm bên cạnh chúng. Box 1 và Box 2 sẽ nằm cạnh nhau, và đoạn văn bản có thể nằm bên cạnh chúng. Box 1 và Box 2 sẽ biến mất. Box 1 và Box 2 sẽ biến mất. Đoạn văn bản sẽ nằm giữa Box 1 và Box 2. Đoạn văn bản sẽ nằm giữa Box 1 và Box 2. Ban đầu, các `.box` là block, mỗi cái một dòng, đoạn P dưới cùng. Khi `float: left;` được áp dụng, các `.box` sẽ nằm cạnh nhau (nếu đủ chỗ) và đoạn P sẽ cố gắng cuốn xung quanh chúng, có thể nằm bên cạnh nếu không có `clear`. 20 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 20: Bạn muốn tạo một khoảng cách 15px giữa đường viền của một `div` và nội dung bên trong `div` đó. Thuộc tính CSS nào phù hợp nhất để thực hiện điều này? padding: 15px; padding: 15px; margin: 15px; margin: 15px; border-spacing: 15px; border-spacing: 15px; text-indent: 15px; text-indent: 15px; `padding` tạo khoảng đệm bên trong đường viền, giữa đường viền và nội dung. 21 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 21: Để định kiểu riêng cho ô dữ liệu cuối cùng (` `) trong mỗi hàng của bảng, bạn có thể sử dụng pseudo-class nào? td:first-child td:first-child td:nth-child(odd) td:nth-child(odd) td:last-child td:last-child td:only-child td:only-child Pseudo-class `:last-child` chọn phần tử là con cuối cùng của phần tử cha. `td:last-child` sẽ chọn ô dữ liệu cuối cùng trong mỗi hàng. 22 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 22: Xét một bảng có `border-collapse: collapse;`. Nếu bạn chỉ định `border: 2px dashed red;` cho cả `table` và `td`, đường viền hiển thị cuối cùng sẽ như thế nào? Đường viền 1px nét liền màu đen. Đường viền 1px nét liền màu đen. Đường viền 2px nét liền màu đỏ. Đường viền 2px nét liền màu đỏ. Đường viền 1px nét đứt màu đỏ. Đường viền 1px nét đứt màu đỏ. Đường viền 2px nét đứt màu đỏ. Đường viền 2px nét đứt màu đỏ. Khi `border-collapse: collapse;`, các đường viền liền kề sẽ được gộp lại. CSS có quy tắc ưu tiên để xác định đường viền nào được hiển thị. Đường viền của ô (`td`) thường có độ ưu tiên cao hơn đường viền của bảng (`table`) tại các điểm giao nhau. Do đó, đường viền giữa các ô và ở viền bảng sẽ là 2px nét đứt màu đỏ. 23 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 23: Bạn muốn tạo một khoảng cách 10px giữa các đường viền của các ô trong bảng mà KHÔNG gộp chúng lại (đường viền vẫn tách rời). Thuộc tính nào cần sử dụng? padding padding border-spacing border-spacing margin margin cell-padding cell-padding `border-spacing` được sử dụng để thiết lập khoảng cách giữa các đường viền của các ô trong bảng khi `border-collapse` có giá trị là `separate` (giá trị mặc định). 24 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 24: Để đảm bảo rằng một phần tử `div` có chiều cao tự động điều chỉnh để chứa hết nội dung float bên trong nó (ngăn chặn tình trạng phần tử cha bị xẹp chiều cao khi chứa float), bạn có thể sử dụng thuộc tính nào cho phần tử `div` cha? overflow: hidden; overflow: hidden; clear: both; clear: both; float: none; float: none; height: auto; height: auto; Thuộc tính `overflow` với giá trị như `hidden` hoặc `auto` trên phần tử cha có thể buộc nó chứa các phần tử float bên trong, khắc phục tình tr??ng 'sụp đổ' chiều cao của phần tử cha. 25 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 25: Bạn muốn thiết lập khoảng cách lề trên và lề dưới 10px, lề trái và lề phải 20px cho một thẻ `div`. Quy tắc CSS nào sau đây viết gọn và đúng? margin: 10px 10px 20px 20px; margin: 10px 10px 20px 20px; margin: 20px 10px; margin: 20px 10px; margin: 10px 20px 10px 20px; margin: 10px 20px 10px 20px; margin: 10px 20px; margin: 10px 20px; Khi sử dụng cú pháp viết gọn cho `margin` hoặc `padding` với hai giá trị, giá trị đầu tiên áp dụng cho trên/dưới, giá trị thứ hai áp dụng cho trái/phải. 26 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 26: Để định kiểu cho tiêu đề bảng (` `), ví dụ như căn lề tiêu đề ở phía dưới bảng thay vì mặc định ở trên, bạn sử dụng thuộc tính CSS nào cho `caption`? text-align: bottom; text-align: bottom; caption-side: bottom; caption-side: bottom; vertical-align: bottom; vertical-align: bottom; position: bottom; position: bottom; Thuộc tính `caption-side` được sử dụng để xác định vị trí của tiêu đề bảng (` `), có thể là `top` (mặc định) hoặc `bottom`. 27 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 27: Bạn có một bảng và muốn tất cả các ô (`td`, `th`) có đường viền 1px nét liền màu xám. Quy tắc CSS nào sau đây thực hiện điều này? td, th { border: 1px solid gray; } td, th { border: 1px solid gray; } table { border: 1px solid gray; } table { border: 1px solid gray; } td { border-width: 1px; border-style: solid; border-color: gray; } td { border-width: 1px; border-style: solid; border-color: gray; } td th { border: 1px solid gray; } td th { border: 1px solid gray; } Áp dụng thuộc tính `border` với cú pháp viết gọn (độ dày, kiểu, màu) cho cả selector `td` và `th` sẽ định kiểu đường viền cho tất cả các ô. 28 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 28: Khi sử dụng `float: left;` cho nhiều `div` có cùng chiều rộng, chúng sẽ cố gắng xếp hàng ngang cho đến khi hết chỗ trên dòng hiện tại. Điều gì sẽ xảy ra với `div` tiếp theo khi không còn đủ không gian trên dòng? Nó sẽ bị ẩn đi. Nó sẽ bị ẩn đi. Nó sẽ tràn ra ngoài phần tử chứa. Nó sẽ tràn ra ngoài phần tử chứa. Nó sẽ xuống dòng và float ở dòng tiếp theo. Nó sẽ xuống dòng và float ở dòng tiếp theo. Nó sẽ nằm đè lên phần tử trước đó. Nó sẽ nằm đè lên phần tử trước đó. Nếu không còn đủ không gian trên dòng hiện tại, phần tử đã float tiếp theo sẽ tự động 'xuống dòng' và cố gắng float ở dòng mới, bắt đầu từ lề trái. 29 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 29: Bạn muốn loại bỏ hoàn toàn khoảng cách giữa các ô trong bảng mà không làm gộp đường viền (tức là vẫn có đường viền riêng cho từng ô, nhưng chúng dính liền nhau). Bạn cần thiết lập thuộc tính nào cho bảng? border-collapse: collapse; border-collapse: collapse; border-spacing: 0; border-spacing: 0; padding: 0; padding: 0; margin: 0; margin: 0; `border-spacing` với giá trị `0` sẽ loại bỏ khoảng cách giữa các ô khi `border-collapse` là `separate` (mặc định). 30 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 01 Câu 30: Xét đoạn mã CSS cho một `div`: ```css .my-div { width: 200px; padding: 10px; border: 5px solid blue; margin: 15px; } ``` Tổng chiều rộng thực tế mà phần tử `.my-div` chiếm trên trang (bao gồm cả nội dung, padding, border và margin) là bao nhiêu? 200px 200px 210px 210px 230px 230px 260px 260px Tổng chiều rộng của phần tử trên bố cục là tổng của `margin-left` + `border-left` + `padding-left` + `width` + `padding-right` + `border-right` + `margin-right`. Tính toán: 15px (margin-left) + 5px (border-left) + 10px (padding-left) + 200px (width) + 10px (padding-right) + 5px (border-right) + 15px (margin-right) = 260px. 0 Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!! Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!! Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử - Đề 02 Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử - Đề 02 được xây dựng với nhiều câu hỏi chất lượng, sát với nội dung chương trình học, giúp bạn dễ dàng ôn tập và kiểm tra kiến thức hiệu quả. Hãy cùng bắt đầu làm bài tập trắc nghiệm ngay để nâng cao hiểu biết và chuẩn bị tốt cho kỳ thi sắp tới! Câu 1: Để loại bỏ khoảng cách giữa các đường viền của các ô trong bảng (table) và hiển thị chúng như một đường viền duy nhất, thuộc tính CSS nào cần được sử dụng cho phần tử ` `? A. border-spacing B. border-style C. border-collapse D. border Câu 2: Giả sử bạn có một bảng và muốn đường viền của nó xuất hiện dưới dạng đường viền đơn, không có khoảng trống giữa các ô. Bạn đã sử dụng `border-collapse: collapse;`. Để đặt màu cho đường viền này, bạn cần áp dụng thuộc tính `border-color` cho phần tử nào? A. Chỉ cho ` ` B. Chỉ cho ` ` và ` ` C. Chỉ cho ` ` D. Cho cả ` ` và ` `, ` ` Câu 3: Bạn muốn tạo một bảng có màu nền xen kẽ cho các hàng để dễ đọc hơn. Cụ thể, bạn muốn các hàng chẵn (2, 4, 6...) có màu nền khác với các hàng lẻ. Vùng chọn (selector) CSS nào phù hợp nhất để chọn các hàng chẵn trong bảng? A. tr:nth-child(even) B. tr:nth-child(odd) C. tr:first-child D. tr:last-child Câu 4: Để đặt khoảng đệm (padding) bên trong mỗi ô dữ liệu (` `) và ô tiêu đề (` `) của bảng, giúp nội dung bên trong không bị sát vào đường viền, bạn sẽ áp dụng thuộc tính `padding` cho phần tử nào trong CSS? A. B. td, th C. tr D. tbody Câu 5: Bạn có một hàng tiêu đề (` `) trong bảng và muốn chữ trong các ô tiêu đề này được căn giữa theo chiều ngang và in đậm. Thuộc tính CSS nào giúp căn giữa văn bản? A. text-align B. vertical-align C. font-weight D. align-items Câu 6: Bạn muốn thay đổi màu nền của một hàng cụ thể trong bảng khi người dùng di chuột qua hàng đó. Lớp giả (pseudo-class) nào được sử dụng để định kiểu cho trạng thái di chuột (hover) của một phần tử? A. :active B. :focus C. :hover D. :visited Câu 7: Bạn có hai phần tử ` ` và muốn đặt chúng cạnh nhau trên cùng một dòng, với phần tử thứ nhất nằm bên trái và phần tử thứ hai nằm bên phải. Thuộc tính CSS nào được sử dụng phổ biến để đưa các phần tử cấp khối (block-level) lên cùng một dòng và định vị chúng sang trái hoặc phải? A. display B. float C. position D. align Câu 8: Khi sử dụng thuộc tính `float` cho các phần tử ` `, các phần tử sau đó (không được float) có thể "cuộn" lên và nằm cạnh các phần tử đã float, gây ra lỗi bố cục không mong muốn. Thuộc tính CSS nào được sử dụng để buộc một phần tử phải nằm dưới tất cả các phần tử đã float trước đó? A. overflow B. visibility C. display D. clear Câu 9: Bạn đã sử dụng `float: left;` cho một ` ` và `float: right;` cho một ` ` khác để tạo bố cục hai cột. Tuy nhiên, phần tử footer nằm ngay sau hai ` ` này lại bị chồng lên hoặc nằm cạnh chúng thay vì nằm ở dưới. Để khắc phục, bạn cần thêm một phần tử trống hoặc áp dụng thuộc tính `clear` cho phần tử footer. Giá trị nào của `clear` là phù hợp nhất trong trường hợp này? A. clear: left; B. clear: right; C. clear: both; D. clear: none; Câu 10: Xét đoạn mã CSS sau: ```css table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 8px; } ``` Đoạn mã này sẽ định dạng bảng như thế nào? A. Bảng có đường viền kép giữa các ô, nội dung sát đường viền. B. Bảng có đường viền đơn giữa các ô, nội dung có khoảng đệm 8px. C. Bảng không có đường viền, nội dung có khoảng đệm 8px. D. Bảng có đường viền đơn, nội dung sát đường viền. Câu 11: Để đặt khoảng cách giữa các đường viền của các ô trong bảng khi `border-collapse` có giá trị là `separate` (giá trị mặc định), thuộc tính CSS nào được sử dụng cho phần tử ` `? A. border-spacing B. margin C. padding D. gap Câu 12: Bạn muốn căn giữa nội dung của các ô dữ liệu (` `) theo chiều dọc (ví dụ: nếu một ô có nhiều dòng văn bản, bạn muốn nó nằm chính giữa theo chiều cao của ô). Thuộc tính CSS nào được sử dụng để căn chỉnh nội dung theo chiều dọc trong ô bảng? A. text-align B. align-items C. vertical-align D. line-height Câu 13: Xét đoạn mã HTML và CSS sau: ```html A. Box 1 và Box 2 nằm cạnh nhau trên cùng một dòng, đoạn văn bản nằm ở dòng dưới cùng. B. Box 1 nằm bên trái, Box 2 nằm bên phải ở dòng dưới cùng, đoạn văn bản nằm sau Box 2. C. Box 1 và Box 2 nằm chồng lên nhau, đoạn văn bản nằm dưới cùng. D. Box 1 và Box 2 nằm cạnh nhau, đoạn văn bản nằm ngay bên phải Box 2. Câu 14: Bạn muốn đặt màu nền cho hàng tiêu đề (` `) và màu chữ trắng cho các ô tiêu đề (` `) trong bảng của mình. Quy tắc CSS nào sau đây là đúng để thực hiện điều này? A. thead { color: white; } th { background-color: blue; } B. table { background-color: blue; } th { color: white; } C. tr:first-child { background-color: blue; color: white; } D. thead { background-color: blue; } th { color: white; } Câu 15: Khi sử dụng `float: left;` cho một phần tử, điều gì xảy ra với luồng tài liệu thông thường (normal flow) của các phần tử khác? A. Phần tử đó được đưa ra khỏi luồng thông thường, và các phần tử khác (đặc biệt là nội dung inline) sẽ bao bọc nó. B. Phần tử đó vẫn nằm trong luồng thông thường nhưng được dịch chuyển sang trái. C. Tất cả các phần tử sau đó đều bị đẩy xuống dòng mới. D. Chỉ các phần tử inline sau đó bị ảnh hưởng. Câu 16: Bạn có một bảng lớn và muốn cố định chiều rộng của các cột ngay cả khi nội dung bên trong vượt quá. Thuộc tính CSS nào cho phép bạn đặt thuật toán bố cục bảng để chiều rộng cột chỉ dựa vào chiều rộng bảng và chiều rộng cột được thiết lập, bỏ qua nội dung? A. width B. column-width C. layout-algorithm D. table-layout Câu 17: Để tạo đường viền cho phần tử ` ` với độ dày 2 pixel, kiểu nét đứt (dashed) và màu đỏ, quy tắc CSS nào sau đây là đúng? A. border-width: 2px; border-style: dashed; border-color: red; B. border: 2px dashed red; C. border-size: 2px; border-type: dashed; border-color: red; D. border-style: dashed; border-width: 2px; color: red; Câu 18: Bạn muốn tạo khoảng trống bên ngoài đường viền của một phần tử ` `, tách nó ra khỏi các phần tử lân cận. Thuộc tính CSS nào được sử dụng để định nghĩa khoảng trống này? A. margin B. padding C. border D. outline Câu 19: Xét đoạn mã CSS sau: ```css tr:nth-child(odd) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } ``` Nếu một hàng lẻ (`odd`) trong bảng đang có màu nền `#f2f2f2`, và người dùng di chuột qua hàng đó, màu nền của hàng sẽ thay đổi thành màu nào? A. #f2f2f2 (màu nền ban đầu của hàng lẻ) B. #ddd (màu nền khi hover) C. Không thay đổi màu nền D. Trở về màu nền mặc định (thường là trong suốt) Câu 20: Bạn muốn tạo một phần tử ` ` có chiều rộng cố định là 200px và nằm ở giữa trang theo chiều ngang. Để căn giữa một phần tử block theo chiều ngang, bạn có thể sử dụng thuộc tính `margin` với giá trị nào? A. margin: center; B. margin: 0 0 0 auto; C. margin: auto; D. text-align: center; Câu 21: Trong CSS, đâu là cách chính xác để chọn tất cả các ô tiêu đề (` `) trong một bảng? A. th B. .th C. #th D. table th Câu 22: Bạn có một bố cục với một ` ` float trái và một ` ` float phải. Nội dung sau chúng bị bố cục sai. Bạn đã thêm một `div` trống với class `clear` và áp dụng `clear: both;` cho nó. Tại sao việc thêm `div` trống này đôi khi được sử dụng để khắc phục vấn đề float? A. Nó giúp định nghĩa rõ ràng chiều cao của các phần tử float. B. Nó tạo ra một khoảng trống tự động giữa các phần tử float và nội dung sau. C. Nó buộc các phần tử float phải nằm trong giới hạn của phần tử cha. D. Nó tạo ra một điểm trong tài liệu mà không có phần tử float nào được phép nằm cạnh nó, đẩy nội dung sau xuống dưới. Câu 23: Thuộc tính `border-spacing` trong CSS dùng để làm gì khi áp dụng cho phần tử ` `? A. Đặt khoảng cách giữa các đường viền của các ô trong bảng khi border-collapse là separate. B. Đặt khoảng cách bên trong các ô (padding). C. Đặt khoảng cách bên ngoài bảng (margin). D. Đặt khoảng cách giữa các dòng văn bản trong ô bảng. Câu 24: Bạn muốn tạo một bảng mà mỗi ô có đường viền riêng biệt, không gộp chung với ô bên cạnh. Giá trị mặc định của thuộc tính `border-collapse` là gì? A. collapse B. separate C. initial D. inherit Câu 25: Bạn có một ` ` chứa hình ảnh và văn bản, và bạn muốn hình ảnh nằm bên trái, văn bản nằm bên phải và bao quanh hình ảnh. Thuộc tính CSS nào cho hình ảnh sẽ giúp đạt được bố cục này? A. float: left; B. display: inline-block; C. position: absolute; D. margin-right: auto; Câu 26: Để đặt màu nền cho toàn bộ bảng, bạn áp dụng thuộc tính `background-color` cho phần tử nào? A. table B. tr C. td D. tbody Câu 27: Bạn muốn tạo một phần tử ` ` có chiều rộng bằng 50% chiều rộng của phần tử cha. Thuộc tính và giá trị nào sau đây là đúng? A. width: 50px; B. width: 50%; parent-width; C. width: 50%; D. width: half; Câu 28: Xét đoạn mã CSS cho bảng: ```css table { border-collapse: separate; border-spacing: 10px; } td { border: 1px solid blue; } ``` Kết quả hiển thị sẽ là gì? A. Bảng có đường viền đơn màu xanh, các ô sát nhau. B. Bảng không có đường viền, các ô cách nhau 10px. C. Bảng có đường viền kép màu xanh, các ô sát nhau. D. Bảng có đường viền riêng cho mỗi ô màu xanh, các ô cách nhau 10px. Câu 29: Bạn muốn đặt một đường viền chỉ ở phía dưới cho phần tử ` `. Thuộc tính CSS nào cho phép bạn định kiểu chỉ một cạnh của đường viền? A. border-edge: bottom; B. border-bottom C. border-side: bottom; D. border: bottom; Câu 30: Khi nào thì thuộc tính `border-spacing` không có tác dụng trên phần tử ` `? A. Khi thuộc tính border-collapse có giá trị là collapse. B. Khi thuộc tính width của bảng được thiết lập. C. Khi các ô trong bảng có padding. D. Khi các hàng trong bảng có màu nền xen kẽ. 1 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 1: Để loại bỏ khoảng cách giữa các đường viền của các ô trong bảng (table) và hiển thị chúng như một đường viền duy nhất, thuộc tính CSS nào cần được sử dụng cho phần tử ` `? border-spacing border-style border-collapse border Câu hỏi kiểm tra kiến thức về thuộc tính CSS dùng để kiểm soát mô hình đường viền của bảng, đặc biệt là việc gộp các đường viền lân cận lại thành một. 2 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 2: Giả sử bạn có một bảng và muốn đường viền của nó xuất hiện dưới dạng đường viền đơn, không có khoảng trống giữa các ô. Bạn đã sử dụng `border-collapse: collapse;`. Để đặt màu cho đường viền này, bạn cần áp dụng thuộc tính `border-color` cho phần tử nào? Chỉ cho `<table>` Chỉ cho `<td>` và `<th>` Chỉ cho `<tr>` Cho cả `<table>` và `<td>`, `<th>` Khi `border-collapse` là `collapse`, đường viền của bảng và các ô được gộp lại. Thuộc tính `border` (bao gồm `border-color`) cần được áp dụng cho cả ` ` và ` `, ` ` để định nghĩa đường viền chung. 3 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 3: Bạn muốn tạo một bảng có màu nền xen kẽ cho các hàng để dễ đọc hơn. Cụ thể, bạn muốn các hàng chẵn (2, 4, 6...) có màu nền khác với các hàng lẻ. Vùng chọn (selector) CSS nào phù hợp nhất để chọn các hàng chẵn trong bảng? tr:nth-child(even) tr:nth-child(odd) tr:first-child tr:last-child Câu hỏi kiểm tra khả năng sử dụng các lớp giả cấu trúc (:nth-child) để chọn các phần tử dựa trên vị trí của chúng trong nhóm anh chị em. `even` chọn các phần tử ở vị trí chẵn. 4 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 4: Để đặt khoảng đệm (padding) bên trong mỗi ô dữ liệu (` `) và ô tiêu đề (` `) của bảng, giúp nội dung bên trong không bị sát vào đường viền, bạn sẽ áp dụng thuộc tính `padding` cho phần tử nào trong CSS? <table> td, th tr tbody Padding là khoảng trống bên trong đường viền của một phần tử. Trong bảng, padding thường được áp dụng cho các ô (` `, ` `) để tạo khoảng cách giữa nội dung và đường viền của ô đó. 5 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 5: Bạn có một hàng tiêu đề (` `) trong bảng và muốn chữ trong các ô tiêu đề này được căn giữa theo chiều ngang và in đậm. Thuộc tính CSS nào giúp căn giữa văn bản? text-align vertical-align font-weight align-items Thuộc tính `text-align` được sử dụng để căn chỉnh nội dung văn bản theo chiều ngang trong một phần tử. 6 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 6: Bạn muốn thay đổi màu nền của một hàng cụ thể trong bảng khi người dùng di chuột qua hàng đó. Lớp giả (pseudo-class) nào được sử dụng để định kiểu cho trạng thái di chuột (hover) của một phần tử? :active :focus :hover :visited Lớp giả `:hover` được sử dụng để áp dụng kiểu dáng cho một phần tử khi con trỏ chuột di chuyển qua nó. 7 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 7: Bạn có hai phần tử ` ` và muốn đặt chúng cạnh nhau trên cùng một dòng, với phần tử thứ nhất nằm bên trái và phần tử thứ hai nằm bên phải. Thuộc tính CSS nào được sử dụng phổ biến để đưa các phần tử cấp khối (block-level) lên cùng một dòng và định vị chúng sang trái hoặc phải? display float position align Thuộc tính `float` được thiết kế ban đầu cho việc bao bọc văn bản quanh hình ảnh, nhưng thường được sử dụng để tạo bố cục cột đơn giản, cho phép các phần tử block nằm cạnh nhau. 8 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 8: Khi sử dụng thuộc tính `float` cho các phần tử ` `, các phần tử sau đó (không được float) có thể 'cuộn' lên và nằm cạnh các phần tử đã float, gây ra lỗi bố cục không mong muốn. Thuộc tính CSS nào được sử dụng để buộc một phần tử phải nằm dưới tất cả các phần tử đã float trước đó? overflow visibility display clear Thuộc tính `clear` được sử dụng để kiểm soát các phần tử có thể nằm cạnh các phần tử đã float hay không. `clear: both` yêu cầu phần tử phải nằm dưới cả các phần tử float trái và float phải. 9 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 9: Bạn đã sử dụng `float: left;` cho một ` ` và `float: right;` cho một ` ` khác để tạo bố cục hai cột. Tuy nhiên, phần tử footer nằm ngay sau hai ` ` này lại bị chồng lên hoặc nằm cạnh chúng thay vì nằm ở dưới. Để khắc phục, bạn cần thêm một phần tử trống hoặc áp dụng thuộc tính `clear` cho phần tử footer. Giá trị nào của `clear` là phù hợp nhất trong trường hợp này? clear: left; clear: right; clear: both; clear: none; Khi cả float trái và float phải được sử dụng, `clear: both` là giá trị cần thiết để đảm bảo phần tử không nằm cạnh bất kỳ phần tử float nào. 10 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 10: Xét đoạn mã CSS sau: ```css table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 8px; } ``` Đoạn mã này sẽ định dạng bảng như thế nào? Bảng có đường viền kép giữa các ô, nội dung sát đường viền. Bảng có đường viền đơn giữa các ô, nội dung có khoảng đệm 8px. Bảng không có đường viền, nội dung có khoảng đệm 8px. Bảng có đường viền đơn, nội dung sát đường viền. Phân tích đoạn CSS: `border-collapse: collapse;` gộp đường viền. `border: 1px solid black;` áp dụng đường viền đen 1px cho mỗi ô. `padding: 8px;` thêm khoảng đệm 8px bên trong mỗi ô. Kết quả là bảng có đường viền đơn và nội dung các ô có khoảng cách với đường viền. 11 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 11: Để đặt khoảng cách giữa các đường viền của các ô trong bảng khi `border-collapse` có giá trị là `separate` (giá trị mặc định), thuộc tính CSS nào được sử dụng cho phần tử ` `? border-spacing margin padding gap Thuộc tính `border-spacing` chỉ có tác dụng khi `border-collapse` là `separate`. Nó định nghĩa khoảng cách giữa các đường viền của các ô lân cận. 12 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 12: Bạn muốn căn giữa nội dung của các ô dữ liệu (` `) theo chiều dọc (ví dụ: nếu một ô có nhiều dòng văn bản, bạn muốn nó nằm chính giữa theo chiều cao của ô). Thuộc tính CSS nào được sử dụng để căn chỉnh nội dung theo chiều dọc trong ô bảng? text-align align-items vertical-align line-height Thuộc tính `vertical-align` được sử dụng để căn chỉnh nội dung theo chiều dọc trong các ô bảng (` `, ` `). 13 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 13: Xét đoạn mã HTML và CSS sau: ```html Box 1 Box 2 Some text after boxes. ``` ```css .box { width: 100px; height: 100px; border: 1px solid black; float: left; } .clear { clear: both; } ``` Kết quả hiển thị trên trình duyệt sẽ như thế nào? Box 1 và Box 2 nằm cạnh nhau trên cùng một dòng, đoạn văn bản nằm ở dòng dưới cùng. Box 1 nằm bên trái, Box 2 nằm bên phải ở dòng dưới cùng, đoạn văn bản nằm sau Box 2. Box 1 và Box 2 nằm chồng lên nhau, đoạn văn bản nằm dưới cùng. Box 1 và Box 2 nằm cạnh nhau, đoạn văn bản nằm ngay bên phải Box 2. Phân tích: Hai `div.box` đều được float trái nên sẽ nằm cạnh nhau. `div.clear` có `clear: both` sẽ nằm dưới cả hai box float đó. Đoạn văn bản ` ` sẽ nằm dưới `div.clear`. Do đó, hai box nằm cạnh nhau, và văn bản nằm ở dòng dưới cùng. 14 / 30 Category: Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F11: Định kiểu CSS cho bảng và phần tử Tags: Bộ đề 02 Câu 14: Bạn muốn đặt màu nền cho hàng tiêu đề (` `) và màu chữ trắng cho các ô tiêu đề (` `) trong bảng của mình. Quy tắc CSS nào sau đây là đúng để thực hiện điều này? thead { color: white; } th { background-color: blue; } table { background-color: blue; } th { color: white; } tr:first-child { background-color: blue; color: white; } thead { background-color: blue; } th { color: white; } Để định màu nền cho hàng tiêu đề, áp dụng `background-color` cho ` ` hoặc ` ` bên trong ` `. Để định màu chữ cho các ô tiêu đề, áp dụng `color` cho ` `.
