Câu hỏi tự luận mức độ thông hiểu Khoa học máy tính 12 ctst bài F12: Định kiểu CSS cho biểu mẫu

Câu 1: 

Giải thích: border-radius trong CSS được sử dụng để tạo các góc tròn cho phần tử. Khi áp dụng cho nút, nó làm cho nút trở nên mềm mại và dễ nhìn hơn.

.button {

    background-color: #4CAF50; /* Màu nền */

    color: white; /* Màu chữ */

    padding: 10px 20px; /* Khoảng cách */

    border: none; /* Không có viền */

    border-radius: 25px; /* Góc tròn */

    cursor: pointer; /* Hiện con trỏ khi di chuột */

}

<button class="button">Nút tròn</button>

Câu 2:

Hộp kiểm (checkbox):

Cho phép người dùng chọn nhiều tùy chọn.

Được biểu diễn bằng thẻ <input type="checkbox">.

Nút radio (radio button):

Cho phép người dùng chỉ chọn một tùy chọn trong một nhóm.

Được biểu diễn bằng thẻ <input type="radio">.

Định kiểu bằng CSS:

Hộp kiểm thường có thể được định kiểu để hiển thị như một ô vuông, trong khi nút radio có thể được định kiểu để hiển thị như một hình tròn. Cả hai đều có thể sử dụng pseudo-classes để tạo hiệu ứng trực quan khi người dùng tương tác.

Câu 3: 

- Mô tả: background-color xác định màu nền cho hộp văn bản, giúp tạo sự nổi bật cho nó và làm cho nội dung dễ đọc hơn.

- Tại sao quan trọng: Màu nền ảnh hưởng đến cảm nhận và trải nghiệm người dùng. Màu sắc phù hợp có thể tạo ra sự thu hút và giúp người dùng dễ dàng phân biệt các phần khác nhau trên trang.

Câu 4: 

- Giải thích: Pseudo-classes như :hover và :focus cho phép bạn áp dụng kiểu đặc biệt cho phần tử khi người dùng tương tác với nó.

:hover: Khi người dùng di chuột qua nút, có thể thay đổi màu nền hoặc viền để tạo hiệu ứng phản hồi.

:focus: Khi nút được chọn bằng bàn phím hoặc chuột, có thể thay đổi kiểu để cho thấy nút đang được chọn.

.button:hover {

    background-color: #45a049; /* Màu nền khi di chuột */

}

.button:focus {

    outline: 2px solid #4CAF50; /* Đường viền khi nút được chọn */

}