Trắc Nghiệm Tin Học 12 Chân Trời Sáng Tạo Khoa Học Máy Tính Bài F11 là bộ đề ôn tập kiến thức thực hành môn Tin học lớp 12, bám sát nội dung sách Tin học Chân trời sáng tạo Khoa học máy tính 12. Đề do cô Lê Thị Kim Ngân – giáo viên môn Tin học tại Trường THPT Đống Đa biên soạn năm học 2024–2025. Đây là bài học quan trọng thuộc “Chủ đề F. Giải quyết vấn đề với sự trợ giúp của máy tính”, với nội dung chính của “Bài F11. Định kiểu CSS cho bảng và phần tử <div>” tập trung vào việc sử dụng các thuộc tính CSS để tùy chỉnh kiểu dáng cho bảng biểu (đường viền, màu nền, canh lề) và quản lý bố cục trang web bằng phần tử <div> (chiều rộng, chiều cao, lề, đệm). Bộ câu hỏi này là tài liệu quan trọng giúp học sinh nắm vững kỹ năng thiết kế layout web chuyên nghiệp.
Trắc nghiệm Tin học lớp 12 trên nền tảng detracnghiem.edu.vn được thiết kế để mang lại trải nghiệm học tập thực tế và hiệu quả. Với kho câu hỏi phong phú, mô phỏng các tình huống định dạng bảng và div, học sinh có thể thực hành không giới hạn để củng cố kiến thức. Mỗi câu hỏi đều đi kèm đáp án và lời giải thích chi tiết, giúp các em không chỉ biết kết quả mà còn hiểu sâu sắc về cách thức hoạt động của từng thuộc tính CSS và sự ảnh hưởng của chúng đến bố cục trang web. Biểu đồ phân tích tiến độ học tập cá nhân là tính năng nổi bật, giúp học sinh nhận diện điểm mạnh, điểm yếu để xây dựng chiến lược ôn tập khoa học. Đây là công cụ hữu ích giúp học sinh tự tin chinh phục các Bài tập trắc nghiệm lớp 12.
Trắc Nghiệm Tin Học 12 Chân Trời Sáng Tạo Khoa Học Máy Tính
Chủ đề F. Giải quyết vấn đề với sự trợ giúp của máy tính
Bài F11. Định kiểu CSS cho bảng và phần tử <div>
Câu 1: Để gộp các đường viền của các ô trong bảng thành một đường viền đơn duy nhất, thuộc tính CSS nào được sử dụng?
A. border-spacing.
B. border-collapse.
C. border-style.
D. border-width.
Câu 2: Để định kiểu cho các hàng chẵn trong một bảng có màu nền khác với các hàng lẻ, bộ chọn CSS nào sau đây được sử dụng?
A. tr:nth-child(odd).
B. tr:first-child.
C. tr:nth-child(even).
D. tr:last-child.
Câu 3: Để tạo hiệu ứng đổi màu nền của một hàng trong bảng khi người dùng di chuột qua, bộ chọn CSS nào được sử dụng?
A. tr:hover.
B. tr:focus.
C. tr:active.
D. tr:visited.
Câu 4: Thẻ <div> trong HTML có vai trò chính là gì trong việc xây dựng bố cục trang web?
A. Để định dạng văn bản và hình ảnh.
B. Để tạo các liên kết giữa các trang web.
C. Để chèn các nội dung đa phương tiện.
D. Để nhóm và tạo khối cho các phần tử.
Câu 5: Để đặt một phần tử <div> nằm về phía bên trái và cho phép các phần tử khác nổi lên bên phải nó, thuộc tính CSS nào được sử dụng?
A. position: left;.
B. align: left;.
C. float: left;.
D. display: left;.
Câu 6: Khi hai phần tử <div> có thuộc tính float được đặt cạnh nhau, để ngăn một phần tử thứ ba bị ảnh hưởng và nằm dưới chúng, thuộc tính nào được sử dụng?
A. float: none;.
B. clear: both;.
C. overflow: hidden;.
D. display: block;.
Câu 7: Theo mặc định, mỗi ô trong bảng HTML có đường viền riêng biệt. Việc này dẫn đến hiệu ứng hiển thị nào giữa các ô?
A. Các ô sẽ tự động gộp lại thành một.
B. Các ô sẽ không có đường viền.
C. Các ô sẽ có đường viền đơn.
D. Có khe hở giữa các đường viền.
Câu 8: Một học sinh muốn định kiểu cho tiêu đề của một bảng (thẻ <th>) có màu nền xanh và chữ màu trắng. Đoạn mã CSS nào sau đây là đúng?
A. th { background-color: #3eafff; color: #fff; }.
B. th { text-color: #fff; background: #3eafff; }.
C. th { background-color: #fff; color: #3eafff; }.
D. th { color: #3eafff; background-color: #fff; }.
Câu 9: Để làm cho các hàng trong bảng có màu nền xen kẽ (ví dụ: hàng chẵn màu xám, hàng lẻ màu trắng), phương pháp nào sau đây là hiệu quả nhất?
A. Sử dụng thuộc tính style cho từng thẻ <tr> riêng biệt.
B. Sử dụng bộ chọn :hover để đổi màu khi di chuột qua.
C. Sử dụng bộ chọn :nth-child(even) hoặc :nth-child(odd).
D. Sử dụng JavaScript để thay đổi màu nền của các hàng.
Câu 10: Ưu điểm của việc sử dụng các phần tử <div> để tạo bố cục trang web so với việc dùng bảng là gì?
A. Mã HTML ngắn gọn và dễ đọc hơn rất nhiều.
B. Tăng tốc độ tải trang web một cách đáng kể.
C. Giảm sự phụ thuộc vào các tệp CSS bên ngoài.
D. Linh hoạt và dễ dàng tùy chỉnh bằng CSS.
Câu 11: Một nhà thiết kế muốn tạo một bố cục hai cột, với cột trái chiếm 30% chiều rộng và cột phải chiếm 70%. Thuộc tính float sẽ được áp dụng như thế nào?
A. Cả hai cột đều có float: center;.
B. Cột trái float: left;, cột phải float: right; hoặc float: left;.
C. Cột trái không có float, cột phải float: right;.
D. Cột trái float: left;, cột phải không có float.
Câu 12: Khi một phần tử <div> được đặt thuộc tính float, nó sẽ thoát ra khỏi luồng văn bản bình thường. Điều này có thể gây ra vấn đề gì cho các phần tử theo sau nó?
A. Các phần tử sau sẽ tự động có cùng thuộc tính float.
B. Các phần tử sau sẽ bị ẩn đi khỏi trang web.
C. Các phần tử sau có thể bị chồng lấn hoặc bao quanh nó.
D. Các phần tử sau sẽ bị đẩy xuống cuối trang.
Câu 13: Để định kiểu cho đường viền và màu nền của một bảng, học sinh cần trình bày những khai báo vùng chọn và thuộc tính nào trong tệp CSS?
A. Bộ chọn table, th, td và các thuộc tính border, background-color.
B. Chỉ bộ chọn table và thuộc tính border.
C. Chỉ bộ chọn tr và thuộc tính background-color.
D. Chỉ bộ chọn td và thuộc tính color.
Câu 14: Để định kiểu cho một thẻ <div> để tạo bố cục trang web, các thuộc tính nào thường được sử dụng?
A. Chỉ width, height và background-color.
B. Chỉ float, clear và margin.
C. Chỉ padding, border và text-align.
D. Tất cả các thuộc tính trên kết hợp với nhau.
Câu 15: Ưu điểm của việc sử dụng CSS để định kiểu cho bảng và thẻ <div> là gì?
A. Làm cho mã HTML trở nên phức tạp và khó quản lý hơn.
B. Hạn chế khả năng tùy chỉnh giao diện của trang web.
C. Tách biệt nội dung (HTML) và trình bày (CSS), dễ bảo trì.
D. Giảm tốc độ tải trang và hiệu suất của trình duyệt.
Câu 16: Một học sinh muốn tạo một bố cục gồm 3 vùng: Thanh điều hướng, Vùng trái, và Vùng phải. Để thực hiện điều này, học sinh nên sử dụng các thẻ nào?
A. Chỉ sử dụng thẻ <table> với 3 hàng.
B. Sử dụng các thẻ <div> với các lớp tương ứng.
C. Chỉ sử dụng các thẻ <span> với các lớp khác nhau.
D. Chỉ sử dụng thẻ <table> với 3 cột.
Câu 17: Để định kiểu cho phần “Lịch sinh hoạt hàng tuần” trở nên đẹp mắt và trực quan hơn, các bước nào sau đây cần được thực hiện?
A. Chỉ thêm đường viền cho bảng và các ô.
B. Chỉ thay đổi màu nền cho hàng tiêu đề.
C. Kết hợp định kiểu đường viền, màu nền, và hiệu ứng.
D. Chỉ tạo hiệu ứng hover cho các hàng.
Câu 18: Khi tạo một bố cục minh họa bằng các thẻ <div>, để vùng chân trang (footer) luôn nằm dưới các vùng trái và phải, thuộc tính nào cần được áp dụng cho nó?
A. float: bottom;.
B. display: block;.
C. position: absolute;.
D. clear: both;.
Câu 19: Việc sử dụng thuộc tính class cho các thẻ HTML (ví dụ: <table class="my-table">) có lợi ích gì khi định kiểu bằng CSS?
A. Giúp mã HTML trở nên ngắn gọn hơn.
B. Cho phép áp dụng cùng một kiểu cho nhiều phần tử.
C. Tự động áp dụng các kiểu mặc định của trình duyệt.
D. Tăng cường tính bảo mật của trang web.
Câu 20: Để định kiểu cho vùng đệm (padding) của các ô trong bảng, bộ chọn nào sau đây là phù hợp nhất để áp dụng cho cả ô tiêu đề và ô dữ liệu?
A. table { padding: 10px; }.
B. tr { padding: 10px; }.
C. td, th { padding: 0; }.
D. th, td { padding: 10px; }.
Câu 21: Một trang web “Kỉ yếu lớp” cần được chỉnh sửa để có bố cục 3 vùng: Thanh điều hướng, Nội dung, và Chân trang. Phương pháp nào sau đây là phù hợp nhất?
A. Sử dụng các thẻ <div> với các lớp CSS tương ứng.
B. Sử dụng một bảng lớn với 3 hàng.
C. Sử dụng các thẻ <h1>, <p>, <ul> để phân chia.
D. Sử dụng JavaScript để tạo các vùng động.
Câu 22: Để chỉnh sửa trang thanhvienlop.html có bố cục 3 phần: Trang chủ, Hoạt động, Thành viên, với phần nội dung chính là một bảng danh sách, học sinh cần làm gì?
A. Xóa bỏ hoàn toàn cấu trúc bảng hiện có.
B. Chuyển toàn bộ nội dung sang dạng danh sách <ul>.
C. Bọc cấu trúc hiện tại vào các thẻ <div> và định kiểu.
D. Sử dụng JavaScript để tạo lại giao diện.
Câu 23: Theo mục tiêu của bài học, sau khi hoàn thành, học sinh cần có khả năng nào?
A. Chỉ định kiểu CSS cho văn bản và hình ảnh.
B. Chỉ tạo bố cục trang web bằng HTML.
C. Thực hiện được việc định kiểu CSS cho bảng và <div>.
D. Chỉ sử dụng các bộ chọn CSS nâng cao.
Câu 24: Tại sao việc sử dụng thuộc tính border-collapse: collapse; lại quan trọng khi định kiểu đường viền cho bảng?
A. Giúp tăng độ dày của đường viền.
B. Giúp thay đổi màu sắc của đường viền.
C. Giúp tạo khoảng cách giữa các đường viền.
D. Giúp loại bỏ khoảng trống và tạo đường viền đơn.
Câu 25: Khi một phần tử <div> có float: left; và một phần tử khác có float: right;, chúng sẽ được sắp xếp như thế nào trong phần tử chứa chúng?
A. Cả hai sẽ nằm trên cùng một hàng ngang.
B. Cả hai sẽ nằm chồng lên nhau ở giữa.
C. Phần tử right sẽ nằm dưới phần tử left.
D. Phần tử left sẽ nằm dưới phần tử right.
Câu 26: Để tạo một thanh điều hướng có chiều rộng 100% và nền màu xanh, đoạn mã CSS nào sau đây là đúng (giả sử lớp là .bar)?
A. .bar { width: 100vw; background-color: blue; }.
B. .bar { width: 100%; color: #00aacc; }.
C. .bar { width: 100%; background-color: #00aacc; }.
D. .bar { size: 100%; background: #00aacc; }.
Câu 27: Khi sử dụng tr:nth-child(even), bộ chọn này sẽ áp dụng kiểu cho những hàng nào trong bảng?
A. Chỉ hàng đầu tiên của bảng.
B. Tất cả các hàng có chỉ số lẻ.
C. Tất cả các hàng có chỉ số chẵn.
D. Chỉ hàng cuối cùng của bảng.
Câu 28: Nếu không sử dụng clear: both; cho phần tử chân trang, điều gì có thể xảy ra khi các cột nội dung có thuộc tính float?
A. Chân trang sẽ tự động có cùng thuộc tính float.
B. Chân trang sẽ bị ẩn đi khỏi trang web.
C. Chân trang sẽ nằm ở đầu trang.
D. Chân trang sẽ nằm bên cạnh các cột nội dung.
Câu 29: Để đảm bảo nội dung trong các ô của bảng được căn giữa theo chiều ngang, thuộc tính nào cần được thêm vào bộ chọn th, td?
A. text-align: center;.
B. vertical-align: middle;.
C. align-content: center;.
D. float: center;.
Câu 30: Một nhà thiết kế muốn tạo một vùng <div> có nền màu xám nhạt, chiều cao tối thiểu 100px và chiếm 20% chiều rộng. Đoạn mã CSS nào sau đây là đúng?
A. .box { background-color: lightgrey; height: 100px; width: 20%; }.
B. .box { background-color: lightgrey; min-height: 100px; width: 20%; }.
C. .box { background: #ccc; min-height: 100px; width: 20vw; }.
D. .box { color: lightgrey; min-height: 100px; width: 20%; }.
Câu 31: So với việc dùng bảng (<table>), việc sử dụng <div> để tạo bố cục mang lại lợi thế nào về mặt ngữ nghĩa (semantic)?
A. Giúp trình duyệt hiểu rõ hơn về cấu trúc dữ liệu dạng bảng.
B. Tự động tạo ra các tiêu đề và chú thích cho nội dung.
C. Cải thiện khả năng truy cập cho người dùng khiếm thị.
D. Giúp phân tách rõ ràng cấu trúc và trình bày của trang.
Câu 32: Để tạo một hiệu ứng trực quan, khi người dùng di chuột qua một hàng, màu chữ của hàng đó đổi thành màu đỏ. Đoạn mã CSS nào sau đây là đúng?
A. tr:hover { text-color: red; }.
B. tr:active { color: red; }.
C. tr:hover { color: red; }.
D. tr:focus { color: red; }.
Câu 33: Một bảng được định kiểu với border-collapse: separate; và border-spacing: 10px;. Điều này có nghĩa là gì?
A. Các đường viền của ô sẽ gộp lại và cách nhau 10px.
B. Các ô sẽ có đường viền đơn và cách nhau 10px.
C. Các đường viền của ô sẽ tách biệt và không có khoảng cách.
D. Các đường viền của ô sẽ tách biệt và cách nhau 10px.
Câu 34: Để một vùng <div> nằm bên trái (float: left;) và một vùng khác nằm bên phải (float: right;) có cùng chiều cao, thuộc tính nào cần được thiết lập giống nhau cho cả hai?
A. height hoặc min-height.
B. clear.
C. margin.
D. padding.
Câu 35: Một trang web có bố cục ba cột. Nếu chiều rộng của cửa sổ trình duyệt bị thu hẹp, điều gì có thể xảy ra với các cột có thuộc tính float?
A. Các cột sẽ tự động thu nhỏ lại để vừa với màn hình.
B. Các cột sẽ bị ẩn đi để tiết kiệm không gian.
C. Các cột sẽ nằm chồng lên nhau theo chiều dọc.
D. Các cột có thể bị đẩy xuống hàng dưới nếu không đủ chỗ.
Câu 36: Để tạo một bố cục linh hoạt hơn, thay vì sử dụng float, công nghệ CSS hiện đại nào thường được khuyến khích sử dụng?
A. Sử dụng bảng (<table>) với các thuộc tính CSS.
B. Sử dụng CSS Flexbox hoặc CSS Grid.
C. Sử dụng JavaScript để điều khiển vị trí các phần tử.
D. Sử dụng các thẻ HTML5 ngữ nghĩa như <section>.
Câu 37: Việc tách mã CSS ra một tệp riêng (ví dụ: layout.css) và liên kết vào tệp HTML có lợi ích gì?
A. Giúp mã HTML trở nên dài hơn và chi tiết hơn.
B. Tăng tốc độ tải trang vì trình duyệt phải tải thêm tệp.
C. Hạn chế khả năng tái sử dụng mã CSS cho các trang khác.
D. Dễ dàng quản lý và tái sử dụng kiểu cho nhiều trang.
Câu 38: Để áp dụng một lớp CSS có tên là my-table cho một bảng, cú pháp HTML nào sau đây là đúng?
A. <table style="my-table">.
B. <table class="my-table">.
C. <table name="my-table">.
D. <table id="my-table">.
Câu 39: Một nhà thiết kế muốn tạo một hiệu ứng đơn giản: khi di chuột qua một ô (<td>), đường viền của ô đó sẽ trở nên đậm hơn. Bộ chọn CSS nào cần được sử dụng?
A. td:active { border-width: 2px; }.
B. td:focus { border-width: 2px; }.
C. td:hover { border-width: 2px; }.
D. td:nth-child(even) { border-width: 2px; }.
Câu 40: Khi định kiểu cho một <div> làm thanh điều hướng, việc sử dụng padding thay vì margin để tạo khoảng trống bên trong có tác dụng gì?
A. Giúp vùng nền của thanh điều hướng bao phủ cả khoảng trống.
B. Giúp thanh điều hướng có thể nổi lên trên các phần tử khác.
C. Giúp các liên kết bên trong được căn giữa theo chiều dọc.
D. Giúp thanh điều hướng có nền trong suốt để nhìn thấy nền trang.
