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 - Đề 08
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 - Đề 08 đượ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: Trong CSS, để định kiểu cho tất cả các ô nhập liệu (input) và vùng văn bản (textarea) trong một biểu mẫu, bạn nên sử dụng bộ chọn (selector) nào?
- A. input textarea
- B. input > textarea
- C. .input, .textarea
- D. input, textarea
Câu 5: Khi người dùng đang nhấn và giữ chuột trên một nút (`
- A. :focus
- B. :hover
- C. :active
- D. :link
Câu 6: Để tăng khoảng cách giữa nội dung bên trong (văn bản) và đường viền của một ô nhập liệu, bạn sử dụng thuộc tính CSS nào?
- A. margin
- B. padding
- C. border
- D. spacing
Câu 7: Thuộc tính `margin` trong CSS được sử dụng để làm gì khi định kiểu biểu mẫu?
- A. Đặt màu nền cho phần tử.
- B. Tăng khoảng cách giữa nội dung và đường viền.
- C. Thiết lập kiểu cho đường viền của phần tử.
- D. Tạo khoảng cách giữa phần tử này với các phần tử khác.
Câu 8: Bạn muốn tạo một ô nhập liệu có các góc được bo tròn. Thuộc tính CSS nào giúp bạn thực hiện điều này?
- A. border-radius
- B. corner-style
- C. angle-border
- D. border-style
Câu 9: Để làm cho một nhóm các ô nhập liệu và nhãn (`
- A. inline
- B. inline-block
- C. block
- D. flex
Câu 11: Cho đoạn CSS sau:
```css
input[type="text"] {
border: 1px solid #ccc;
padding: 8px;
}
input[type="text"]:focus {
border-color: blue;
outline: none;
}
```
Khi người dùng nhấp vào ô nhập liệu kiểu text, hiệu ứng hình ảnh nào sẽ xuất hiện?
- A. Đường viền sẽ dày hơn và có màu xanh.
- B. Nền của ô nhập liệu sẽ chuyển sang màu xanh.
- C. Chỉ có đường viền ngoài (outline) màu xanh xuất hiện.
- D. Đường viền của ô nhập liệu chuyển sang màu xanh và không có đường viền ngoài mặc định.
Câu 13: Để thay đổi kiểu con trỏ chuột khi di chuyển qua một nút nhấn trong biểu mẫu thành hình bàn tay (pointer), bạn sử dụng thuộc tính CSS nào?
- A. cursor
- B. pointer-event
- C. mouse-style
- D. hand-icon
Câu 15: Sự khác biệt cơ bản về hiệu ứng hình ảnh mặc định giữa thuộc tính `outline` và `border` khi áp dụng cho một ô nhập liệu đang có focus là gì?
- A. Outline chỉ hiển thị khi rê chuột, border hiển thị khi focus.
- B. Outline làm thay đổi kích thước phần tử, border thì không.
- C. Outline không ảnh hưởng đến kích thước và bố cục của phần tử, trong khi border thì có.
- D. Border chỉ có thể là đường thẳng, outline có thể là đường nét đứt.
Câu 16: Bạn muốn một vùng văn bản (`
- A. overflow: auto;
- B. resize: vertical;
- C. size: vertical;
- D. orientation: vertical;
Câu 17: Để ẩn hoàn toàn một phần tử trong biểu mẫu (ví dụ: một ô thông báo lỗi ban đầu chưa cần hiển thị) mà không chiếm không gian trong bố cục, bạn sử dụng thuộc tính và giá trị nào?
- A. display: none;
- B. visibility: hidden;
- C. opacity: 0;
- D. height: 0; width: 0;
Câu 18: Bạn muốn tất cả các nhãn (`
- A. label { text-color: blue; font-style: bold; }
- B. .label { color: blue; font-weight: bold; }
- C. label { color: blue; font-weight: bold; }
- D. label { text-decoration: bold; color: blue; }
Câu 19: Cho cấu trúc HTML một phần tử form:
```html
```
Bạn muốn định kiểu đặc biệt cho ô nhập liệu email khi nó chứa một địa chỉ email hợp lệ. Pseudo-class nào của CSS3 có thể giúp bạn làm điều này?
- A. :valid
- B. :checked
- C. :focused
- D. :filled
Câu 20: Ngược lại với câu trên, bạn muốn hiển thị một thông báo lỗi hoặc làm nổi bật ô nhập liệu email khi nó chứa nội dung không hợp lệ (không phải định dạng email). Pseudo-class nào phù hợp?
- A. :error
- B. :wrong
- C. :required
- D. :invalid
Câu 21: Để thay đổi màu nền của toàn bộ biểu mẫu (`
Câu 22: Bạn muốn tạo một hiệu ứng đổ bóng (shadow) nhẹ xung quanh ô nhập liệu khi nó đang được focus để thu hút sự chú ý của người dùng. Thuộc tính CSS nào được sử dụng cho hiệu ứng đổ bóng?
- A. text-shadow
- B. element-shadow
- C. box-shadow
- D. drop-shadow
Câu 23: Trong CSS, để định kiểu cho các ô nhập liệu kiểu `password` mà không ảnh hưởng đến các ô nhập liệu kiểu `text` hoặc `email`, bạn sử dụng bộ chọn thuộc tính (attribute selector) nào?
- A. input#password
- B. input[type="password"]
- C. input.password
- D. [password]
Câu 24: Bạn có một danh sách thả xuống (`
- A. option
- B. select:hover
- C. select option
- D. select > option
Câu 25: Bạn muốn tạo một nút nhấn có chiều rộng đầy đủ bằng với phần tử chứa nó. Thuộc tính `display` nào thường được sử dụng để làm cho một phần tử chiếm toàn bộ chiều rộng?
- A. inline
- B. inline-block
- C. block
- D. flex-item
Câu 26: Để đặt khoảng cách đều 15px ở cả bốn phía (trên, phải, dưới, trái) bên ngoài đường viền của một ô nhập liệu, bạn sử dụng khai báo CSS nào?
- A. padding: 15px;
- B. margin: 15px;
- C. space: 15px;
- D. border-spacing: 15px;
Câu 27: Bạn muốn làm cho văn bản bên trong một vùng văn bản (`
- A. font-size
- B. text-size
- C. line-height
- D. font-scale
Câu 28: Cho đoạn CSS:
```css
input[type="radio"]:checked + label {
font-weight: bold;
color: green;
}
```
Đoạn CSS này sẽ có tác dụng gì trên biểu mẫu?
- A. Làm in đậm và đổi màu xanh cho nút radio khi được chọn.
- B. Làm in đậm và đổi màu xanh cho nhãn của tất cả các nút radio.
- C. Làm in đậm và đổi màu xanh cho nút radio khi rê chuột qua nhãn của nó.
- D. Làm in đậm và đổi màu xanh cho nhãn của nút radio khi nút radio đó được chọn.
Câu 29: Bạn muốn đặt một ảnh nền mờ cho toàn bộ biểu mẫu. Thuộc tính CSS nào được sử dụng để thiết lập ảnh nền?
- A. image-source
- B. background-image
- C. src-image
- D. list-style-image
Câu 30: Để đảm bảo rằng văn bản nhập vào các ô văn bản không bị tràn ra ngoài nếu quá dài, bạn có thể sử dụng thuộc tính nào để xử lý overflow theo chiều ngang?
- A. overflow: hidden;
- B. text-overflow: clip;
- C. word-wrap: break-word;
- D. white-space: nowrap;