Lý thuyết Tin 12 Bài F12: Định kiểu CSS cho biểu mẫu - Chân trời sáng tạo
Haylamdo biên soạn tóm tắt lý thuyết Tin học 12 Bài F12: Định kiểu CSS cho biểu mẫu sách Chân trời sáng tạo hay nhất, ngắn gọn sẽ giúp học sinh lớp 12 nắm vững kiến thức trọng tâm, ôn luyện để học tốt môn Tin 12.
Lý thuyết Tin 12 Bài F12: Định kiểu CSS cho biểu mẫu - Chân trời sáng tạo
1. Định kiểu cho hộp văn bản:
Các thuộc tính CSS như display và box-sizing có thể thay đổi cách hiển thị của các thành phần trên biểu mẫu. Các phần tử HTML cấp độ block như <header>, <div>, <form>, và các tiêu đề từ <h1> đến <h6> chiếm toàn bộ độ rộng của trang và hiển thị tuần tự trên từng dòng. Để định kiểu cho phần tử cấp độ block trong biểu mẫu, sử dụng giá trị block cho thuộc tính display.
Vùng chọn input[type="text"] định kiểu cho các hộp văn bản nhập liệu. Vùng đệm 10 pixels và đường biên 1 pixel được tính gộp trong tổng chiều rộng 300 pixels của hộp văn bản nhờ giá trị `border-box` của thuộc tính box-sizing. Để làm nổi bật hộp văn bản khi người dùng đặt con trỏ vào, khai báo trạng thái :focus.
Với vùng chọn này, khi người dùng đặt con trỏ vào, hộp văn bản sẽ có đường viền màu xanh. Thuộc tính outline không làm ảnh hưởng đến kích thước và bố cục của hộp văn bản.
2. Định kiểu cho nút tròn, hộp kiểm và nút nhấn:
Để định kiểu cho nút tròn, hộp kiểm và nút nhấn, khai báo vùng chọn bằng tên thẻ kèm thuộc tính type trong cặp ngoặc vuông. Nút tròn và hộp kiểm có hai trạng thái cơ bản là được chọn và không được chọn, với trạng thái được chọn dùng :checked để định kiểu. Nút nhấn có các trạng thái tương tự như siêu liên kết, bao gồm :hover khi con trỏ chuột nằm trên và :active khi đang được nhấn và giữ chuột.
Với hai khai báo này, khi 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 và giữ chuột, nút nhấn sẽ chuyển sang màu đỏ.
Để định kiểu cho nút tròn, hộp kiểm và nút nhãn, em khai báo vùng chọn là tên thẻ kèm thuộc tỉnh type tương ứng đặt trong cặp ngoặc vuông.
Để định kiểu cho trạng thái của các thành phần này, em khai báo vùng chọn là lớp có tên tương ứng với trạng thái như checked, hover, active,...