Lý thuyết Tin học 12 Chân trời sáng tạo bài F12

Với nội dung bài 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 Tin học ứng dụng.

A. Lý thuyết Tin học 12 bài F12

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ị ${\displaystyle b\text{or}der-b\otimes }$ 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,...

B. Trắc nghiệm Tin học 12 bài F12

1. Câu trắc nghiệm nhiều phương án lựa chọn

Câu 1: Để làm nổi bật hộp văn bản khi người dùng đặt con trỏ vào, thuộc tính nào cần được sử dụng để thay đổi đường viền của hộp văn bản?

A. background-color

B. border

C. outline

D. box-shadow

Đáp án: C

Giải thích: Thuộc tính outline được sử dụng để thay đổi đường viền của hộp văn bản khi người dùng đặt con trỏ vào, mà không làm ảnh hưởng đến kích thước và bố cục của hộp văn bản.

Câu 2: Để định kiểu cho các hộp văn bản trong biểu mẫu với kích thước tổng cộng là 300 pixels, bạn cần sử dụng thuộc tính nào để tính gộp vùng đệm và đường biên vào tổng chiều rộng?

A. box-sizing

B. margin

C. padding

D. border

Đáp án: A

Giải thích: Thuộc tính box-sizing với giá trị border-box cho phép tính gộp vùng đệm và đường biên vào tổng chiều rộng của hộp văn bản.

Câu 3: Để làm cho nút nhấn chuyển sang màu đỏ khi đang được nhấn và giữ chuột, thuộc tính nào cần được sử dụng?

A. :hover

B. :focus

C. :checked

D. :active

Đáp án: D

Giải thích: Thuộc tính :active được sử dụng để định kiểu cho nút nhấn khi đang được nhấn và giữ chuột.

Câu 4: Để định kiểu cho nút tròn trong trạng thái được chọn, thuộc tính nào cần được sử dụng?

A. :hover

B. :focus

C. :checked

D. :active

Đáp án: C

Giải thích: Thuộc tính :checked được sử dụng để định kiểu cho nút tròn hoặc hộp kiểm khi chúng ở trạng thái được chọn.

Câu 5: Để đặt thuộc tính hiển thị cho các phần tử HTML cấp độ block trong biểu mẫu, bạn cần sử dụng giá trị nào cho thuộc tính display?

A. inline

B. flex

C. block

D. none

Đáp án: C

Giải thích: Giá trị block của thuộc tính display được sử dụng để đặt các phần tử HTML cấp độ block hiển thị toàn bộ chiều rộng của trang và tuần tự trên từng dòng.

Câu 6: Để đặt màu nền cho hộp văn bản khi con trỏ chuột nằm trên nó, bạn cần sử dụng thuộc tính nào?

A. background-color

B. border-color

C. color

D. outline-color

Đáp án: A

Giải thích: Để thay đổi màu nền của hộp văn bản khi con trỏ chuột nằm trên nó, bạn cần sử dụng thuộc tính background-color trong trạng thái :hover.

Câu 7: Để định kiểu cho các hộp kiểm khi chúng không được chọn, thuộc tính nào được sử dụng?

A. :focus

B. :not(:checked)

C. :active

D. :hover

Đáp án: B

Giải thích: Thuộc tính :not(:checked) được sử dụng để định kiểu cho các hộp kiểm khi chúng không được chọn.

Câu 8: Để làm cho hộp văn bản có đường viền màu xanh khi người dùng đặt con trỏ vào, thuộc tính nào nên được sử dụng?

A. border-color

B. outline-color

C. background-color

D. text-color

Đáp án: B

Giải thích: Thuộc tính outline-color được sử dụng để thay đổi màu của đường viền hộp văn bản khi người dùng đặt con trỏ vào, mà không ảnh hưởng đến kích thước và bố cục.

Câu 9: Để đặt các phần tử <div> và <form> chiếm toàn bộ chiều rộng của trang, thuộc tính nào cần sử dụng?

A. margin

B. display

C. width

D. height

Câu 10: Để định kiểu cho trạng thái khi nút tròn hoặc hộp kiểm được chọn, bạn cần sử dụng lớp nào?

A. :hover

B. :focus

C. :checked

D. :disabled

Đáp án: C

Giải thích: Lớp :checked được sử dụng để định kiểu cho nút tròn hoặc hộp kiểm khi chúng ở trạng thái được chọn.

2. Câu trắc nghiệm đúng sai

Câu 1: Phát biểu sau đây đúng hay sai về định kiểu cho hộp văn bản?

a) Để đị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.

b) Thuộc tính box-sizing với giá trị border-box làm cho vùng đệm và đường biên được tính vào tổng chiều rộng của hộp văn bản.

c) Thuộc tính outline làm ảnh hưởng đến kích thước và bố cục của hộp văn bản.

d) Để 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 là cần thiết.

Trả lời

a) Đúng: Các phần tử cấp độ block như <header>, <div>, 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 các phần tử này, sử dụng giá trị block cho thuộc tính display

b) Đúng: Khi sử dụng giá trị border-box cho thuộc tính box-sizing, vùng đệm và đường biên được tính gộp vào tổng chiều rộng của hộp văn bản, giúp dễ dàng kiểm soát kích thước.

c) Sai: 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; nó chỉ thay đổi cách hiển thị của đường viền xung quanh phần tử.

d) Đúng: Trạng thái :focus cho phép bạn thay đổi cách hiển thị của hộp văn bản khi người dùng đặt con trỏ vào đó, giúp cải thiện khả năng tương tác với biểu mẫu.

Câu 2: Phát biểu sau đây đúng hay sai về định kiểu cho nút tròn, hộp kiểm và nút nhấn?

a) Để đị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ẻ và thuộc tính type trong cặp ngoặc vuông.

b) Trạng thái :checked dùng để định kiểu cho các nút tròn và hộp kiểm khi chúng được chọn.

c) Để định kiểu cho nút nhấn, sử dụng thuộc tính :hover để thay đổi màu sắc khi con trỏ chuột nằm trên nút.

d) Để định kiểu cho trạng thái nút nhấn khi nhấn và giữ chuột, sử dụng thuộc tính :active.

Trả lời

a) Đúng: Để định kiểu cho các nút tròn, hộp kiểm và nút nhấn, bạn sử dụng vùng chọn với tên thẻ và thuộc tính type trong cặp ngoặc vuông để áp dụng kiểu cho các phần tử này.

b) Đúng: Trạng thái :checked được sử dụng để định kiểu cho các nút tròn và hộp kiểm khi chúng ở trạng thái được chọn

c) Đúng: Thuộc tính :hover thay đổi màu sắc của nút nhấn khi con trỏ chuột nằm trên nút.

d) Đúng: Thuộc tính :active dùng để định kiểu cho trạng thái của nút nhấn khi nó đang được nhấn và giữ chuột.

3. Câu trả lời ngắn

Câu 1: Để định kiểu cho phần tử cấp độ block trong biểu mẫu, thuộc tính display cần được đặt giá trị gì?

Đáp án: block

Giải thích: Các phần tử HTML cấp độ block như <header>, <div>, 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 các phần tử này, thuộc tính display cần được đặt giá trị block.

Câu 2: Thuộc tính box-sizing với giá trị nào giúp tính gộp vùng đệm và đường biên vào tổng chiều rộng của hộp văn bản?

Đáp án: border-box

Giải thích: Giá trị border-box của thuộc tính box-sizing làm cho vùng đệm và đường biên được tính gộp vào tổng chiều rộng của hộp văn bản, giúp dễ dàng kiểm soát kích thước.

Câu 3: Để định kiểu cho trạng thái nút nhấn khi con trỏ chuột nằm trên nút, thuộc tính nào cần được sử dụng?

Đáp án: :hover

Giải thích: Trạng thái :hover được sử dụng để định kiểu cho các nút nhấn khi con trỏ chuột nằm trên nút, thay đổi cách hiển thị của nút trong trạng thái này.

>>>> Bài tiếp theo: Lý thuyết Tin học 12 Chân trời sáng tạo bài F13