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 F12 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 KHMT Chân trời sáng tạo 12. Đề do thầy Nguyễn Văn Hùng – giáo viên môn Tin học tại Trường THPT Quốc Oai 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 F12. Định kiểu CSS cho biểu mẫu” tập trung vào việc sử dụng các thuộc tính CSS để tùy chỉnh giao diện của biểu mẫu (form), bao gồm màu sắc, font chữ, kích thước của các ô nhập liệu, nút bấm và cách bố cục tổng thể biểu mẫu trên trang web. 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ế giao diện web tương tác.
Trắc nghiệm Tin học 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 biểu mẫu đa dạng, 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 trải nghiệm người dùng. 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 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 F12. Định kiểu CSS cho biểu mẫu
Câu 1: Mục tiêu chính của việc định kiểu CSS cho biểu mẫu là gì?
A. Để tăng tính thẩm mĩ và cải thiện trải nghiệm người dùng.
B. Để giảm thiểu dung lượng tệp HTML của trang web.
C. Để đảm bảo tính tương thích với mọi trình duyệt.
D. Để mã hóa dữ liệu người dùng được nhập vào.
Câu 2: Thuộc tính display: block trong CSS có ý nghĩa gì đối với phần tử HTML?
A. Phần tử sẽ được hiển thị trên cùng một dòng với các phần tử khác.
B. Phần tử sẽ chiếm toàn bộ chiều rộng có sẵn và bắt đầu trên một dòng mới.
C. Phần tử sẽ được hiển thị dưới dạng một ô trong bảng.
D. Phần tử sẽ được ẩn khỏi trang web.
Câu 3: Thuộc tính box-sizing: border-box trong CSS có ý nghĩa gì?
A. Chỉ tính toán kích thước nội dung của phần tử.
B. Bao gồm cả đường viền nhưng không bao gồm vùng đệm.
C. Bao gồm cả vùng đệm và đường viền vào tổng chiều rộng và chiều cao của phần tử.
D. Chỉ bao gồm vùng đệm vào kích thước của phần tử.
Câu 4: Trạng thái focus của một phần tử biểu mẫu xảy ra khi nào?
A. Khi người dùng di chuyển chuột qua phần tử đó.
B. Khi người dùng nhấp đúp vào phần tử đó.
C. Khi phần tử đó bị vô hiệu hóa (disabled).
D. Khi người dùng nhấp vào hoặc nhấn phím Tab để chọn phần tử đó.
Câu 5: Để định kiểu cho trạng thái hover của một nút bấm, vùng chọn nào cần được sử dụng?
A. button[type="submit"]:hover.
B. button[type="submit"]:active.
C. button[type="submit"]:focus.
D. button[type="submit"]:checked.
Câu 6: Trạng thái checked của nút tròn (radio button) hoặc hộp kiểm (checkbox) có ý nghĩa gì?
A. Nút/hộp kiểm đang được rê chuột qua.
B. Nút/hộp kiểm đang được chọn bởi người dùng.
C. Nút/hộp kiểm đang bị vô hiệu hóa.
D. Nút/hộp kiểm đang được nhấp vào.
Câu 7: Thuộc tính background-color của một nút bấm thay đổi khi người dùng di chuột lên. Đây là việc định kiểu cho trạng thái nào?
A. Trạng thái active.
B. Trạng thái focus.
C. Trạng thái hover.
D. Trạng thái checked.
Câu 8: Để định kiểu cho nút tròn (radio button) hoặc hộp kiểm (checkbox) khi chúng ở trạng thái được chọn, vùng chọn nào cần được sử dụng?
A. input[type="radio"]:hover.
B. input[type="checkbox"]:active.
C. input[type="text"]:focus.
D. input[type="radio"]:checked.
Câu 9: Trong ví dụ về biểu mẫu góp ý (gopy.html), thuộc tính max-width: 400px cho thẻ <form> có ý nghĩa gì?
A. Chiều rộng tối đa của biểu mẫu là 400px.
B. Chiều rộng tối thiểu của biểu mẫu là 400px.
C. Chiều rộng cố định của biểu mẫu là 400px.
D. Biểu mẫu sẽ chiếm 400% chiều rộng màn hình.
Câu 10: Thuộc tính margin: 0 auto cho thẻ <form> trong ví dụ biểu mẫu góp ý có tác dụng gì?
A. Căn chỉnh biểu mẫu về phía bên trái của trang.
B. Căn chỉnh biểu mẫu ra giữa trang web theo chiều ngang.
C. Đặt lề trên và dưới của biểu mẫu là 0.
D. Thêm khoảng trống bên ngoài biểu mẫu là 0.
Câu 11: Để thiết lập màu nền cho hộp văn bản nhập liệu trong biểu mẫu góp ý, thuộc tính CSS nào được sử dụng?
A. color.
B. border-color.
C. background-color.
D. fill.
Câu 12: Trong CSS, thuộc tính border: 1px solid #ccc có ý nghĩa gì?
A. Đặt đường viền màu đen.
B. Đặt đường viền chấm chấm.
C. Đặt đường viền chỉ có viền trên và dưới.
D. Đặt đường viền nét liền, dày 1px, màu xám nhạt.
Câu 13: Thuộc tính border-radius: 10px cho form có tác dụng gì?
A. Bo tròn các góc của form với bán kính 10px.
B. Tạo đường viền nét liền cho form.
C. Đặt khoảng cách giữa nội dung và đường viền là 10px.
D. Thay đổi màu sắc của đường viền thành 10px.
Câu 14: Thuộc tính resize: vertical cho thẻ <textarea> có tác dụng gì?
A. Cho phép thay đổi kích thước <textarea> theo chiều ngang.
B. Cho phép thay đổi kích thước <textarea> theo chiều dọc.
C. Khóa kích thước <textarea> không cho thay đổi.
D. Tự động điều chỉnh kích thước <textarea> theo nội dung.
Câu 15: Trạng thái active của một nút bấm (button) xảy ra khi nào?
A. Khi người dùng di chuột qua nút đó.
B. Khi nút đó nhận được tiêu điểm (focus).
C. Khi người dùng nhấp và giữ chuột vào nút đó.
D. Khi nút đó đã được nhấn và giải phóng chuột.
Câu 16: Khi định kiểu cho các thành phần biểu mẫu, việc sử dụng input[type="text"] là ví dụ của khai báo vùng chọn nào?
A. Khai báo vùng chọn là ID.
B. Khai báo vùng chọn là tên lớp.
C. Khai báo vùng chọn là tên thẻ.
D. Khai báo vùng chọn là thuộc tính.
Câu 17: Biểu mẫu góp ý trong bài học sử dụng các thành phần nào sau đây?
A. Hộp văn bản để nhập Họ tên và Lớp, hai nút tròn để chọn Môn học, và hộp kiểm cho Câu lạc bộ.
B. Hộp văn bản để nhập Họ tên và Địa chỉ email.
C. Nút tròn để chọn giới tính và nút bấm Gửi.
D. Hộp văn bản cho số điện thoại và địa chỉ nhà.
Câu 18: Lợi ích của việc định kiểu cho biểu mẫu là gì?
A. Làm cho biểu mẫu trở thành một hình ảnh tĩnh không tương tác.
B. Nâng cao tính thẩm mĩ và cải thiện trải nghiệm tương tác của người dùng.
C. Đơn giản hóa cấu trúc HTML của biểu mẫu.
D. Giúp tự động hóa việc điền thông tin vào biểu mẫu.
Câu 19: Để các phần tử biểu mẫu như hộp văn bản, nút bấm được hiển thị theo kiểu khối (block-level), ta sử dụng thuộc tính nào trong CSS?
A. display: inline.
B. display: inline-block.
C. display: block.
D. display: flex.
Câu 20: Ý nghĩa của thuộc tính display và box-sizing trong việc định kiểu biểu mẫu là gì?
A. display để căn chỉnh văn bản, box-sizing để thay đổi màu nền.
B. display để thiết lập font chữ, box-sizing để căn lề.
C. display để tạo vùng đệm, box-sizing để bo tròn góc.
D. display để kiểm soát cách hiển thị phần tử, box-sizing để kiểm soát cách tính kích thước phần tử.
Câu 21: Trong một biểu mẫu đăng nhập, nếu muốn tạo nền chung cho cả nút tròn và hộp kiểm, ta nên định kiểu cho thuộc tính nào?
A. background-color.
B. color.
C. border-radius.
D. padding.
Câu 22: Để tạo và định kiểu biểu mẫu đăng nhập gồm các thành phần: “Tên tài khoản”, “Mật khẩu” (hộp văn bản), “Ghi nhớ thông tin đăng nhập” (hộp kiểm), “Đăng nhập” (nút bấm), “Quên mật khẩu” (đường liên kết), chúng ta cần sử dụng kết hợp các loại thẻ HTML và thuộc tính CSS nào?
A. Chỉ sử dụng thẻ <input type="text"> và nút <button>.
B. Kết hợp các thẻ <input> với các type khác nhau, nút <button> và thẻ <a> cùng CSS.
C. Chỉ sử dụng CSS để định kiểu cho các đoạn văn bản.
D. Sử dụng một thẻ <form> duy nhất và đặt mọi thứ bên trong.
Câu 23: Khi tạo một ô nhập văn bản trong biểu mẫu, để có thể thay đổi kích thước của ô đó theo chiều dọc, thuộc tính CSS nào phải được áp dụng cho thẻ <textarea>?
A. resize: horizontal.
B. resize: none.
C. resize: vertical.
D. resize: both.
Câu 24: Một trong những lợi ích của việc định kiểu biểu mẫu là giúp tăng cường khả năng tương tác và trải nghiệm của người dùng. Điều này được thể hiện qua hành vi nào?
A. Tự động điền thông tin vào biểu mẫu.
B. Giảm thiểu số lượng bước để hoàn thành biểu mẫu.
C. Biểu mẫu có thể gửi dữ liệu mà không cần internet.
D. Các thành phần biểu mẫu được thiết kế rõ ràng và dễ sử dụng.
Câu 25: Khi người dùng nhấp vào một nút bấm, nếu nút đó chuyển sang màu đỏ, đây là việc định kiểu cho trạng thái nào của nút?
A. hover.
B. active.
C. focus.
D. visited.
Câu 26: Để định kiểu cho toàn bộ biểu mẫu (thẻ <form>), các thuộc tính như max-width, padding, border và border-radius thường được sử dụng. Điều này giúp biểu mẫu có giao diện như thế nào?
A. Biểu mẫu nhỏ gọn và không có đường viền.
B. Biểu mẫu không có bất kỳ khoảng trống nào bên trong.
C. Biểu mẫu có kích thước giới hạn, có vùng đệm, đường viền và góc bo tròn.
D. Biểu mẫu chiếm toàn bộ chiều rộng màn hình.
Câu 27: Khi thiết kế biểu mẫu, việc sử dụng thuộc tính outline cho trạng thái focus của các phần tử nhập liệu có tác dụng gì?
A. Loại bỏ hoàn toàn đường viền khi phần tử được chọn.
B. Đặt màu nền cho phần tử khi được chọn.
C. Tạo một đường viền nổi bật khi phần tử nhận được tiêu điểm.
D. Thay đổi kích thước của phần tử khi được chọn.
Câu 28: Đối với các phần tử nhập liệu (như input[type="text"]), việc định kiểu box-sizing: border-box; width: 100%; đảm bảo điều gì?
A. Chúng sẽ có chiều rộng cố định 100 pixels.
B. Chúng sẽ chỉ chiếm một phần nhỏ của chiều rộng có sẵn.
C. Chúng sẽ tự động thay đổi kích thước theo nội dung.
D. Chúng sẽ chiếm toàn bộ chiều rộng của phần tử cha mà không bị tràn.
Câu 29: Để tạo hiệu ứng trực quan khi người dùng di chuột qua một nút bấm, ta nên sử dụng pseudo-class nào trong CSS?
A. :hover.
B. :active.
C. :focus.
D. :checked.
Câu 30: Khả năng nào của CSS cho phép nhà phát triển kiểm soát và chỉnh sửa giao diện của toàn bộ trang web một cách linh hoạt?
A. Khả năng nhúng mã JavaScript.
B. Khả năng tạo các hiệu ứng động.
C. Khả năng áp dụng quy tắc định kiểu thông qua các vùng chọn.
D. Khả năng tự động tạo nội dung.
