Trắc Nghiệm Tin Học 12 Chân Trời Sáng Tạo Tin Học Ứng Dụng 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 Tin học 12 CTST Tin học ứng dụng. Đề do cô Nguyễn Thị Lan – giáo viên môn Tin học tại Trường THPT Việt Đức 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 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 Trắc nghiệm các môn lớp 12.
Trắc Nghiệm Tin Học 12 Chân Trời Sáng Tạo Tin Học Ứng Dụng
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 để tạo khoảng cách giữa các viền ô.
B. border-style để xác định kiểu của đường viền.
C. border-collapse để gộp các đường viền lại.
D. border-width để quy định độ dày của đường viền.
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) để chọn các hàng có chỉ số lẻ.
B. tr:nth-child(even) để chọn các hàng có chỉ số chẵn.
C. tr:first-child để chọn hàng đầu tiên trong bảng.
D. tr:last-child để chọn hàng cuối cùng trong bảng.
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. :focus để định kiểu khi phần tử nhận được sự tập trung.
B. :active để định kiểu khi phần tử đang được kích hoạt.
C. :visited để định kiểu cho liên kết đã được truy cập.
D. :hover để định kiểu khi con trỏ chuột nằm trên phần tử.
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 các đoạn văn bản và các yếu tố hình ảnh.
B. Tạo ra các siêu liên kết giữa các trang web khác nhau.
C. Nhóm các phần tử và tạo ra các khối cấu trúc cho trang.
D. Chèn các nội dung đa phương tiện như video và âm thanh.
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. float: left; để làm phần tử trôi về bên trái.
B. position: left; là một giá trị không hợp lệ.
C. align: left; là một thuộc tính không tồn tại trong CSS.
D. display: left; là một giá trị không hợp lệ.
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; để hủy bỏ hiệu ứng trôi của chính nó.
B. display: block; để hiển thị phần tử dưới dạng khối.
C. clear: both; để không cho phép phần tử trôi ở cả hai bên.
D. overflow: hidden; để xử lí nội dung bị tràn.
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 đường viền đơn.
B. Các ô sẽ không có đường viền trừ khi được khai báo.
C. Các ô sẽ có đường viền đơn liền mạch với nhau.
D. Sẽ có một khoảng trống nhỏ 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 { color: #3eafff; background-color: #ffffff; }.
B. th { background-color: #3eafff; color: #ffffff; }.
C. th { text-color: #ffffff; background: #3eafff; }.
D. th { background-color: #ffffff; color: #3eafff; }.
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> trong mã HTML.
B. Sử dụng bộ chọn :hover để đổi màu khi người dùng di chuột qua.
C. Sử dụng bộ chọn :nth-child(even) hoặc :nth-child(odd) trong CSS.
D. Sử dụng JavaScript để duyệt qua và 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. Giúp mã HTML trở nên ngắn gọn và dễ đọc hơn rất nhiều.
B. Tăng tốc độ tải của 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. Cung cấp sự 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 gán giá trị float: center;.
B. Cột trái float: left; và cột phải float: right; hoặc float: left;.
C. Cột trái float: left; cột phải không cần khai báo float.
D. Cột trái không khai báo float, cột phải float: right;.
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ử theo sau sẽ tự động kế thừa thuộc tính float.
B. Các phần tử theo sau sẽ bị ẩn hoàn toàn khỏi trang web.
C. Các phần tử theo sau có thể bị chồng lấn hoặc bao quanh nó.
D. Các phần tử theo sau sẽ bị đẩy xuống cuối cùng của 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. Sử dụng bộ chọn table và các thuộc tính border và color.
B. Sử dụng bộ chọn tr và các thuộc tính background-color và border.
C. Sử dụng các bộ chọn table, th, td và các thuộc tính border, background-color.
D. Sử dụng bộ chọn td và các thuộc tính color và background.
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. width, height để xác định kích thước.
B. float, clear để xác định vị trí trôi.
C. margin, padding để xác định khoảng cách.
D. Sự kết hợp của nhiều thuộc tính khác 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. Tách biệt nội dung (HTML) và trình bày (CSS), dễ bảo trì.
B. Làm cho mã HTML trở nên phức tạp và khó quản lý hơn.
C. Hạn chế khả năng tùy chỉnh giao diện của trang web.
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. Sử dụng một thẻ <table> với ba hàng lồng nhau.
B. Sử dụng các thẻ <div> với các lớp CSS tương ứng.
C. Sử dụng một thẻ <table> với ba cột riêng biệt.
D. Sử dụng các thẻ <span> với các lớp CSS khác nhau.
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. Thêm đường viền cho bảng và các ô bên trong.
B. Thay đổi màu nền cho hàng tiêu đề của bảng.
C. Tạo hiệu ứng hover cho các hàng của bảng.
D. Kết hợp định kiểu đường viền, màu nền và hiệu ứ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; là một giá trị không hợp lệ.
B. clear: both; để không bị ảnh hưởng bởi float.
C. display: block; để hiển thị nó dưới dạng khối.
D. position: absolute; để định vị tuyệt đối.
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 và súc tích hơn.
B. Tăng cường tính bảo mật cho trang web và dữ liệu.
C. Cho phép áp dụng cùng một bộ quy tắc kiểu cho nhiều phần tử.
D. Tự động áp dụng các kiểu mặc định của trình duyệt.
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. th, td { padding: 10px; }.
B. table { padding: 10px; }.
C. tr { padding: 10px; }.
D. td, th { padding: 0; }.
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 một thẻ <table> lớn với ba hàng riêng biệt.
B. Sử dụng các thẻ <h1>, <p>, <ul> để phân chia các vùng.
C. Sử dụng các thẻ <div> với các lớp CSS tương ứng.
D. Sử dụng JavaScript để tự động tạo ra 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ó và làm lại.
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 một cách tự động.
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. Thực hiện được việc định kiểu CSS cho bảng và <div>.
B. Định kiểu cho các yếu tố văn bản và hình ảnh.
C. Tạo ra các bố cục trang web bằng HTML.
D. Sử dụng thành thạo 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. Để tăng độ dày của các đường viền trong bảng.
B. Để thay đổi màu sắc của các đường viền.
C. Để tạo ra khoảng cách giữa các đường viền.
D. Để 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 chồng lên nhau ở chính giữa.
B. Phần tử right sẽ nằm ở dưới phần tử left.
C. Phần tử left sẽ nằm ở dưới phần tử right.
D. Cả hai sẽ nằm trên cùng một hàng ngang.
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%; background-color: #00aacc; }.
C. .bar { width: 100%; 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. Hàng đầu tiên của bảng.
B. Tất cả các hàng có chỉ số lẻ.
C. Hàng cuối cùng của bảng.
D. Tất cả các hàng có chỉ số chẵn.
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ẽ nằm bên cạnh các cột nội dung.
B. Chân trang sẽ tự động kế thừa thuộc tính float.
C. Chân trang sẽ bị ẩn hoàn toàn khỏi trang web.
D. Chân trang sẽ được hiển thị ở đầu trang.
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. vertical-align: middle;.
B. align-content: center;.
C. float: center;.
D. text-align: 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 class=”my-table”>.
B. <table style=”my-table”>.
C. <table id=”my-table”>.
D. <table name=”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 thanh điều hướng có thể nổi lên trên các phần tử khác.
B. Giúp các liên kết bên trong được căn giữa theo chiều dọc.
C. Giúp vùng nền của thanh điều hướng bao phủ cả khoảng trống.
D. Giúp thanh điều hướng có nền trong suốt để nhìn thấy nền trang.
