Đề Trắc nghiệm Tin học 12 – Bài F12: Định kiểu CSS cho biểu mẫu (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 F12: Định kiểu CSS cho biểu mẫu

Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F12: Định kiểu CSS cho biểu mẫu - Đề 01

Bài Tập Trắc nghiệm Tin học 12 - Chân trời sáng tạo - Bài F12: Định kiểu CSS cho biểu mẫu - Đề 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 thiết kế một biểu mẫu đăng ký. Để tất cả các ô nhập liệu văn bản (`

  • A. width, margin, border
  • B. height, padding, outline
  • C. size, border-spacing, border
  • D. width, padding, border
  • Câu 2: Biểu mẫu của bạn có nhiều ô nhập liệu với các giá trị padding và border khác nhau. Để đảm bảo tổng chiều rộng của mỗi ô nhập liệu (bao gồm nội dung, padding và border) luôn là 300px theo thiết kế, bất kể giá trị padding và border là bao nhiêu, bạn nên thêm thuộc tính CSS nào vào quy tắc định kiểu cho các ô nhập liệu này?

    • A. box-sizing: border-box;
    • B. box-sizing: content-box;
    • C. width-calculation: include-padding-border;
    • D. display: block;

    Câu 3: Bạn muốn làm nổi bật ô nhập liệu khi người dùng click vào nó (trạng thái focus) bằng cách đổi màu viền thành xanh dương và loại bỏ đường viền mặc định của trình duyệt. Quy tắc CSS nào sau đây thực hiện được điều này cho các ô nhập liệu kiểu văn bản?

    • A. input[type=
    • B. input[type=
    • C. input[type=
    • D. input[type=

    Câu 4: Giả sử bạn áp dụng hai quy tắc CSS sau cho một ô nhập liệu: `input:focus { border: 2px solid red; }` và `input:focus { outline: 3px solid blue; }`. Khi ô nhập liệu được focus, điều gì sẽ xảy ra với đường viền và outline của nó?

    • A. Chỉ có đường viền màu đỏ 2px hiển thị.
    • B. Cả đường viền màu đỏ 2px và outline màu xanh dương 3px đều hiển thị.
    • C. Chỉ có outline màu xanh dương 3px hiển thị.
    • D. Không có gì hiển thị vì hai quy tắc xung đột.

    Câu 5: Bạn muốn thiết kế nút "Gửi" (`

    Câu 6: Để cung cấp phản hồi trực quan cho người dùng, bạn muốn nút "Gửi" đổi màu nền sang xanh đậm hơn (`#45a049`) khi con trỏ chuột di chuyển qua nó. Bạn cần sử dụng pseudo-class nào để định kiểu cho trạng thái này?

    • A. :hover
    • B. :active
    • C. :focus
    • D. :visited

    Câu 7: Khi người dùng click và giữ chuột trên nút "Gửi", bạn muốn nút có hiệu ứng "ấn xuống" bằng cách giảm độ sáng màu nền một chút (ví dụ: `#3e8e41`). Pseudo-class nào được sử dụng để định kiểu cho trạng thái khi một phần tử đang được kích hoạt (nhấn và giữ chuột)?

    • A. :focus
    • B. :visited
    • C. :active
    • D. :disabled

    Câu 8: Bạn có một nhóm các nút radio (`

  • A. input[type=
  • B. input[type=
  • C. label input[type=
  • D. input[type=
  • Câu 9: Bạn muốn áp dụng một kiểu viền đặc biệt cho các hộp kiểm (`

  • A. :unchecked
  • B. :inactive
  • C. :default
  • D. :not(:checked)
  • Câu 10: Mặc định, thẻ `

    • A. block
    • B. inline
    • C. inline-block
    • D. flex

    Câu 11: Bạn có các ô nhập liệu cho tên (`type=

    • A. input#email
    • B. .email-input
    • C. input[type=
    • D. input:nth-child(2)

    Câu 12: Để tạo một khung rõ ràng cho toàn bộ biểu mẫu và thêm khoảng trống bên trong khung đó, bạn nên áp dụng các thuộc tính `border` và `padding` cho thẻ HTML nào?

    • A. input
    • B. form
    • C. div
    • D. label

    Câu 13: Bạn muốn áp dụng cùng một bộ kiểu cơ bản (ví dụ: padding, border, box-sizing) cho cả ô nhập liệu văn bản (`

  • A. input[type=
  • B. input[type=
  • C. input[type=
  • D. input[type=
  • Câu 14: Bạn có cấu trúc HTML cho mỗi trường nhập liệu như sau: `

  • A. .form-group + input
  • B. input .form-group
  • C. .form-group > label > input
  • D. div.form-group input
  • Câu 15: Bạn muốn thay đổi màu sắc và kiểu chữ của văn bản gợi ý (placeholder text) bên trong ô nhập liệu. Pseudo-element nào được sử dụng để định kiểu cho placeholder?

    • A. ::hint
    • B. ::placeholder
    • C. :placeholder
    • D. ::input-text

    Câu 16: Để đảm bảo tất cả các ô nhập liệu và vùng văn bản lớn trong biểu mẫu sử dụng cùng một phông chữ và kích thước chữ với phần còn lại của trang, bạn nên áp dụng các thuộc tính `font-family` và `font-size` cho phần tử nào?

    • A. Áp dụng cho thẻ `body` hoặc thẻ `
      `.
    • B. Áp dụng riêng lẻ cho từng loại input (text, email, password, textarea).
    • C. Chỉ cần áp dụng cho thẻ `
    • D. Sử dụng thuộc tính `text-style` cho mỗi input.

    Câu 17: Khi một ô nhập liệu bị vô hiệu hóa (disabled) bằng thuộc tính HTML `disabled`, bạn muốn nó có màu nền xám nhạt và con trỏ chuột thay đổi thành biểu tượng "không được phép". Pseudo-class và thuộc tính nào cần sử dụng?

    • A. input:inactive { background-color: lightgray; cursor: default; }
    • B. input[readonly] { background: gray; cursor: grab; }
    • C. input:disabled { background-color: lightgray; cursor: not-allowed; }
    • D. input.disabled { background-color: gray; cursor: no-drop; }

    Câu 18: Trình duyệt thường áp dụng một số kiểu mặc định (như margin, padding) cho các phần tử biểu mẫu, gây khó khăn trong việc định kiểu nhất quán. Để loại bỏ hoặc đặt lại các kiểu mặc định này cho các ô nhập liệu (`input`) và vùng văn bản (`textarea`), bạn thường đặt `margin` và `padding` bằng 0. Mục đích chính của việc này là gì?

    • A. Đảm bảo khoảng cách và kích thước của các phần tử được kiểm soát hoàn toàn bằng CSS của người dùng, không bị ảnh hưởng bởi kiểu mặc định của trình duyệt.
    • B. Giúp tăng tốc độ tải trang web.
    • C. Làm cho văn bản trong ô nhập liệu căn giữa theo chiều dọc.
    • D. Tự động thêm đường viền cho tất cả các ô nhập liệu.

    Câu 19: Các cặp label/input của bạn đang hiển thị quá sát nhau theo chiều dọc. Bạn muốn thêm khoảng trống 15px giữa mỗi cặp này. Giả sử mỗi cặp được bọc trong một thẻ `

  • A. padding-bottom: 15px; cho input
  • B. margin-bottom: 15px; cho div.form-group
  • C. height: calc(100% + 15px); cho input
  • D. border-bottom: 15px solid transparent; cho label
  • Câu 20: Văn bản người dùng nhập vào trong ô text input đang dính sát vào đường viền. Để tạo không gian giữa văn bản và đường viền bên trong ô nhập liệu, bạn cần sử dụng thuộc tính nào?

    • A. margin
    • B. space-inner
    • C. border-spacing
    • D. padding

    Câu 21: Khi dữ liệu nhập vào một ô không hợp lệ, bạn muốn thêm một đường viền màu đỏ đậm để báo lỗi cho người dùng. Bạn đã thêm class `error` vào ô nhập liệu đó bằng JavaScript. Quy tắc CSS nào sau đây áp dụng viền đỏ cho ô nhập liệu có class `error`?

    • A. input.error { border: 2px solid red; }
    • B. input:invalid { border-color: red; }
    • C. .error input { border: 2px solid red; }
    • D. input[data-error] { border-color: red; }

    Câu 22: Bạn muốn áp dụng một kiểu viền cơ bản (ví dụ: 1px solid #ccc) cho tất cả các ô nhập liệu (``) và vùng văn bản lớn (`