Giải Tin học 12 trang 174 Chân trời sáng tạo

Với Giải Tin học 12 trang 174 trong Bài F12: Định kiểu CSS cho biểu mẫu Tin học 12 Chân trời sáng tạo hay nhất, ngắn gọn sẽ giúp học sinh dễ dàng trả lời các câu hỏi & làm bài tập Tin 12 Tin học ứng dụng trang 174.

Giải Tin học 12 trang 174 Chân trời sáng tạo

Vận dụng 1 trang 174 Tin học 12: Đị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

Lời giải:

Thực hiện đị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

- Đối với hộp kiểm, khai báo vùng chọn để định kiểu cho trạng thái được chọn: input[type="checkbox"]: checked {

}

accent-color: #007bff;

Với khai báo này, khi người dùng nháy chọn, hộp kiểm sẽ có dạng

- Đối với nút, khai báo vùng chọn để định kiểu cho trạng thái hover và active:

button[type="submit"]:hover {

}

background-color: #0056b3;

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

}

Vận dụng 2 trang 174 Tin học 12: 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.

Lời giải:

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;

input[type="text"] { display: block;

}

box-sizing: border-box; width: 100%;

background-color: #f4f4f4;

border: none;

border-radius: 20px; padding: 10px;

margin: 10px 0 10px 0;

rocksen trò

an

input[type="text"]: focus {outline: 2px solid #007bff;

}

- 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.

input[type="radio"]: checked {

}

background-color: #007bff;

input[type="checkbox"]: checked { accent-color: #007bff;

}

textarea {

box-sizing: border-box;

width: 100%;

background-color: #f4f4f4;

border: none;

}

border-radius: 20px; padding: 10px; resize: vertical;

textarea: focus {

}

outline: 2px solid #007bff;

Vận dụng 3 trang 174 Tin học 12: Tìm hiểu thêm cách để chèn biểu tượng vào hộp văn bản.

Lời giải:

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

button[type="submit"] { width: 25%; font-size: 16px;

color: #fff;

background-color: #007bff;

border: none;

border-radius: 20px;

padding: 10px 20px;

margin: 10px auto; cursor: pointer;

}

button[type="submit"]:hover {

}

background-color: #005663;

button[type="submit"]: focus { outline: yellow;

}

"T-sctave a trời sáng tạo

button[type="submit"]: activ background-color: #4ff4a2;

}

Lời giải bài tập Tin học 12 Bài F12: Định kiểu CSS cho biểu mẫu hay khác:

• Giải Tin học 12 trang 172

Xem thêm lời giải bài tập Tin học lớp 12 Chân trời sáng tạo hay nhất, ngắn gọn khác:

• Tin học 12 Bài F11: Định kiểu CSS cho bảng và phần tử <div>

• Tin học 12 Bài F13: Dự án tạo trang web (tiếp theo)

• Tin học 12 Bài G1: Nhóm nghề dịch vụ thuộc ngành Công nghệ thông tin

• Tin học 12 Bài G2: Nhóm nghề quản trị thuộc ngành Công nghệ thông tin

• Tin học 12 Bài G3: Một số nghề ứng dụng tin học và một số ngành thuộc lĩnh vực Công nghệ thông tin

Xem thêm các tài liệu học tốt lớp 12 hay khác:

• Giải sgk Tin học 12 Chân trời sáng tạo
• Giải Chuyên đề Tin học 12 Chân trời sáng tạo
• Giải SBT Tin học 12 Chân trời sáng tạo
• Giải lớp 12 Chân trời sáng tạo (các môn học)
• Giải lớp 12 Kết nối tri thức (các môn học)
• Giải lớp 12 Cánh diều (các môn học)