TopStudy

Tin học · Lớp 12

Giải SGK Tin học 12 CTST Bài F12. Định kiểu CSS cho biểu mẫu có đáp án

8 câu · 12 phút · Ngân hàng đề TopStudy. Đáp án và lời giải do TopStudy biên soạn, mở ngay dưới từng câu.

Làm bài

Nội dung đề

Phần I. Tự luận

Câu 1

1 điểm
Em hãy quan sát và nhận xét một số biểu mẫu khảo sát trên trang web mà trường hay lớp em từng sử dụng.
Xem đáp án và lời giải

Hướng dẫn chấm do TopStudy biên soạn, mang tính gợi ý

Có rất nhiều biểu mẫu khảo sát khác nhau trên trang web mà trường hay lớp em từng sử dụng. Các thành phần của biểu mẫu có các thuộc tính về phông chữ , nền, đường viền, vùng đệm, lề như các phần tử khác trên trang web.

Câu 2

1 điểm
Em hãy khai báo vùng chọn dùng để định kiểu cho trạng thái focus của phần tử textarea.
Xem đáp án và lời giải

Hướng dẫn chấm do TopStudy biên soạn, mang tính gợi ý

Khai báo vùng chọn dùng để định kiểu cho trạng thái focus của phần tử textarea:

Input [type="text"]:focus {

Outline: 2px solid #007bff;

}

Câu 3

1 điểm
Trong khai báo vùng chọn của hộp kiểm, em hãy thay đổi thuộc tính accent-color thành backgroun-color và nêu nhận xét.
Xem đáp án và lời giải

Hướng dẫn chấm do TopStudy biên soạn, mang tính gợi ý

Khai báo vùng chọn của hộp kiểm, em thay đổi thuộc tính accent-color thành backgroun-color và nêu nhận xét như sau:

button[type="submit"]:hover {

}

background-color: #0056b3;

button [type="submit"]:active { background-color: #ff0000;

}

Với khai báo này người dùng di chuyển con trỏ chuột đến, nút sẽ chuyển sang màu xanh đậm, khi người dùng nháy chuột, nút nhấn sẽ chuyển sang màu đỏ.

Câu 4

1 điểm
Em hãy trình bày lợi ích khi định kiểu cho biểu mẫu
Xem đáp án và lời giải

Hướng dẫn chấm do TopStudy biên soạn, mang tính gợi ý

Lợi ích khi định kiểu cho biểu mẫu: làm tăng tính trực quan của biểu mẫu và cải thiện trải nghiệm của người dùng, góp phần giúp người dùng thao tác chính xác.

Câu 5

1 điểm
Ý nghĩa của thuộc tính display và box-sizing là gì?
Xem đáp án và lời giải

Hướng dẫn chấm do TopStudy biên soạn, mang tính gợi ý

Thuộc tính thuộc tính display và box-sizing được dùng để định kiểu hiển thị cho các thành phần trong biểu mẫu.

Câu 6

1 điểm
Em hãy liệt kê một số trạng thái của các thành phần trong biểu mẫu và nêu cách khai báo vùng chọn để định kiểu cho chúng.
Xem đáp án và lời giải

Câu 7

1 điểm

Em hãy định kiểu CSS cho biểu mẫu góp ý của học sinh ở Bài F5 (tệp gopy.html) sao cho đẹp mắt và trực quan. Biểu mẫu góp ý được minh hoạ như Hình 1.

Biểu mẫu góp ý của học sinh gồm các thành phần sau: Hai hộp văn bản dạng text để nhập Họ tên và Lớp; Hai nút tròn để chọn định hướng môn Tin học; Ba hộp kiểm để chọn câu lạc bộ đang tham gia;

Hình minh hoạ

Một hộp văn bản dạng textarea để nhập ý kiến;

Một nút nhấn Gửi để gửi góp ý.

Xem đáp án và lời giải

Câu 8

1 điểm

Em hãy thực hiện các yêu cầu dưới đây.

1. Định kiểu để tạo màu nền chung cho hai nút tròn và màu nền chung cho ba hộp kiểm của biểu mẫu của Thực hành.

2. Tạo và định kiểu cho biểu mẫu đăng nhập gồm các thành phần sau:

Hai văn bản để nhập Tên tài khoản và Mật khẩu;

Một hộp kiểm Ghi nhớ thông tin đăng nhập;

Một nút nhấn Đăng nhập;

Một đường liên kết Quên mật khẩu.

3. Tìm hiểu thêm cách để chèn biểu tượng vào hộp văn bản.

Xem đáp án và lời giải

Đề cùng chủ đề

Tất cả đề Bài F12. Định kiểu CSS cho biểu mẫu · Các bộ sách Tin học Lớp 12