Nội dung chính Khoa học máy tính 12 Chân trời bài F12: Định kiểu CSS cho biểu mẫu:

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH 

BÀI F12: ĐỊNH KIỂU CSS CHO BIỂU MẪU

1. Định kiểu cho hộp văn bản

- Định kiểu cho biểu mẫu không chỉ giúp tăng tính thẩm mĩ và sự nhất quán về hình thức cho biểu mẫu, mà còn tăng cường khả năng tiếp cận và trải nghiệm của người dùng:

+ Để tăng tính thẩm mĩ, em kết hợp các yếu tố về màu sắc và kích cỡ của văn bản, nền và đường viền. 

+ Để cải thiện trải nghiệm của người dùng, em có thể điều chỉnh các yếu tố như độ rộng, khoảng cách, căn lề, phông chữ, hiệu ứng màu sắc và các dấu hiệu giúp biểu mẫu thêm trực quan, dễ đọc và dễ thao tác.

- Tương tự như những phần tử khác, biểu mẫu cũng có những thuộc tính dùng để định kiểu phông chữ, đường viền, nền, vùng đệm, lề,... Bên cạnh đó, em có thể sử dụng những thuộc tính khác như display, box-sizing,… để thay đổi cách thức hiển thị của các thành phần trên biểu mẫu.

- Trong HTML, những phần tử được xếp vào cấp độ block bao gồm: 

• <header>. 

• <div>. 

• <form>. 

• Các phần tử từ <h1> đến <h6>.

…

Theo mặc định, các phần tử này sẽ chiếm toàn bộ độ rộng của trang web hoặc của thành phần chứa chúng, do đó các phần tử này sẽ được hiển thị tuần tự trên từng dòng. 

- Để định kiểu cho một phần tử trong biểu mẫu có được cấp độ block, em chỉ định giá trị block cho thuộc tính display của phần tử đó.

2. Định kiểu cho nút tròn, hộp kiểm và nút nhấn

- Tương tự như khai báo vùng chọn cho hộp văn bản, để đị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.

- 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. Để định kiểu cho trạng thái đang được chọn, em sử dụng trạng thái checked trong vùng chọn:

• Khai báo vùng chọn để định kiểu cho trạng thái được chọn của nút tròn:

Với khai báo này, khi người dùng nháy chọn, nút tròn sẽ được tô nền màu xanh. 

• Khai báo vùng chọn để định kiểu cho trạng thái được chọn của hộp kiểm:

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

- Nút nhấn có một số trạng thái tương tự như siêu liên kết, trong đó có trạng thái:

• hover: đang có con trỏ chuột nằm trên.

• active: đang được nháy và giữ chuột.

Khai báo vùng chọn để định kiểu cho trạng thái hover và active:

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

• THỰC HÀNH

Nhiệm vụ. Định kiểu CSS cho biểu mẫu góp ý

- Trong tệp gopy.html thêm liên kết đến tệp style.css:

- Hoàn thiện tệp style.css theo các bước như hướng dẫn.