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

VnDoc xin giới thiệu bài Lý thuyết Tin học 12 bài F10: Định kiểu CSS cho siêu liên kết và danh sách có toàn bộ lý thuyết và câu hỏi trắc nghiệm có trong chương trình sách mới. Thông qua đây các em học sinh đối chiếu với lời giải của mình, hoàn thành bài tập hiệu quả.

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

1. Định kiểu CSS cho siêu liên kết

Siêu liên kết là đường dẫn đến các phần khác của trang web hoặc trang web khác, được tạo bằng thẻ <a> và thuộc tính href trong HTML. Khi định kiểu CSS cho siêu liên kết, có 5 trạng thái cần quan tâm: bình thường, lướt qua (hover), kích hoạt (active), đã truy cập (visited), và tập trung (focus).

CSS sử dụng "lớp giả" để định kiểu cho các trạng thái này, kí hiệu bằng dấu hai chấm (:) trước tên lớp, ví dụ: a:hover là lớp giả hover của phần tử <a>, a:active là lớp giả active của phần tử <a>. Các trạng thái của siêu liên kết được định kiểu thông qua các lớp giả như sau:

- a:link cho trạng thái bình thường

- a:hover cho trạng thái lướt qua

- a: active cho trạng thái kích hoạt

- a:visited cho trạng thái đã truy cập

- a:focus cho trạng thái tập trung

a) Trạng thái bình thường

Đây là trạng thái mặc định của siêu liên kết khi chưa có tương tác hoặc kích hoạt. Siêu liên kết sẽ có màu xanh và gạch chân. Để thay đổi trạng thái này, định kiểu bằng cách khai báo vùng chọn là thẻ a.

b) Trạng thái lướt qua:

 Đây là trạng thái của siêu liên kết khi con trỏ chuột nằm bên trên, thường có hình bàn tay. Màu sắc của siêu liên kết vẫn như trạng thái mặc định. Để thay đổi trạng thái này, định kiểu bằng cách khai báo vùng chọn là thẻ a kèm theo trạng thái :hover.

c) Trạng thái kích hoạt:

 Đây là trạng thái của siêu liên kết khi đang được nháy chuột, nháy và giữ chuột, hoặc đang được kích hoạt. Liên kết sẽ có màu đỏ và có gạch chân. Để thay đổi trạng thái này, định kiểu bằng cách khai báo vùng chọn là thẻ a kèm theo trạng thái :active.

d) Trạng thái đã truy cập:

Đây là trạng thái khi siêu liên kết đã được truy cập trước đó. Siêu liên kết sẽ có màu tím và có gạch chân. Để thay đổi trạng thái này, định kiểu bằng cách khai báo vùng chọn là thẻ a kèm theo trạng thái :visited.

e) Trạng thái tập trung:

 Đây là trạng thái của siêu liên kết khi đang được người dùng chọn bằng bàn phím, và siêu liên kết sẽ có viền xung quanh. Để thay đổi trạng thái này, định kiểu bằng cách khai báo vùng chọn là thẻ a kèm theo trạng thái :focus.

2. Định kiểu CSS cho danh sách

a) Đánh số hoặc dấu đầu dòng theo những kiểu có sẵn:

Sử dụng thuộc tính list-style-type để định kiểu số hoặc dấu đầu dòng cho các mục trong danh sách, với các kiểu quy định sẵn của CSS.

b) Đánh dấu đầu dòng bằng hình ảnh

Để định kiểu cho dấu đầu dòng bằng hình ảnh, em sử dụng thuộc tính list-style-image và chỉ định giá trị là đường dẫn của tệp ảnh đặt trong hàm url().

Ngoài ra, em thay thế giá trị outside bằng inside để đặt dấu đầu dòng vào bên trong phần nội dung của mục.

→Để định kiểu cho số hoặc dấu đầu dòng của các mục trong danh sách, ta sử dụng những thuộc tính sau:

•list-style-type: dùng để định kiểu bằng những kiểu có sẵn của CSS.

•list-style-image: dùng để định kiểu bằng hình ảnh.

•list-style-position: dùng để định kiểu cho vị trí hiển thị.

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

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

Câu 1: Khi muốn thay đổi kiểu của siêu liên kết trong trạng thái bình thường, bạn sử dụng lớp giả nào trong CSS?

A. a:hover

B. a:active

C. a:visited

D. a:link

Câu 2: Để thay đổi kiểu của siêu liên kết khi người dùng di chuột qua, bạn sử dụng lớp giả nào?

A. a:focus

B. a:visited

C. a:active

D. a:hover

Đáp án: D

Giải thích: Lớp giả a:hover được sử dụng để định kiểu cho siêu liên kết khi người dùng di chuột qua liên kết.

Câu 3: Để định kiểu cho siêu liên kết khi nó đang được kích hoạt, bạn nên sử dụng lớp giả nào?

A. a:focus

B. a:link

C. a:active

D. a:hover

Đáp án: C

Giải thích: Lớp giả a:active được sử dụng để định kiểu cho siêu liên kết khi nó đang được nhấp chuột hoặc kích hoạt.

Câu 4: Để thay đổi kiểu của siêu liên kết đã được truy cập, bạn sử dụng lớp giả nào?

A. a:focus

B. a:hover

C. a:visited

D. a:active

Đáp án: C

Giải thích: Lớp giả a:visited được sử dụng để định kiểu cho siêu liên kết đã được truy cập trước đó.

Câu 5: Để định kiểu cho siêu liên kết khi nó đang được người dùng chọn bằng bàn phím, bạn nên sử dụng lớp giả nào?

A. a:focus

B. a:link

C. a:visited

D. a:hover

Đáp án: A

Giải thích: Lớp giả a:focus được sử dụng để định kiểu cho siêu liên kết khi nó đang được người dùng chọn bằng bàn phím.

Câu 6: Để định kiểu cho dấu đầu dòng trong danh sách bằng một hình ảnh, bạn nên sử dụng thuộc tính nào?

A. list-style-type

B. list-style-position

C. list-style-image

D. list-style

Đáp án: C

Giải thích: Thuộc tính list-style-image được sử dụng để định kiểu dấu đầu dòng trong danh sách bằng một hình ảnh.

Câu 7: Để đặt dấu đầu dòng vào bên trong phần nội dung của mục trong danh sách, bạn sử dụng thuộc tính nào?

A. list-style-image

B. list-style-type

C. list-style-position

D. list-style

Câu 8: Để định kiểu cho các phần tử trong danh sách bằng các kiểu có sẵn của CSS, bạn sử dụng thuộc tính nào?

A. list-style-position

B. list-style-image

C. list-style-type

D. list-style

Đáp án: C

Giải thích: Thuộc tính list-style-type được sử dụng để định kiểu cho số hoặc dấu đầu dòng theo các kiểu có sẵn của CSS.

Câu 9: Khi định kiểu cho siêu liên kết trong trạng thái kích hoạt, siêu liên kết sẽ có đặc điểm gì?

A. Màu sắc là xanh và không gạch chân

B. Màu sắc là đỏ và có gạch chân

C. Màu sắc là tím và có gạch chân

D. Màu sắc là xanh và có gạch chân

Đáp án: B

Giải thích: Trong trạng thái kích hoạt (a:active), siêu liên kết thường có màu đỏ và có gạch chân để biểu thị rằng nó đang được nhấn hoặc kích hoạt.

Câu 10: Để thay đổi kiểu cho siêu liên kết trong trạng thái đã truy cập, siêu liên kết sẽ có màu gì?

A. Xanh

B. Đỏ

C. Tím

D. Vàng

Đáp án: C

Giải thích: Trong trạng thái đã truy cập (a:visited), siêu liên kết thường có màu tím để biểu thị rằng liên kết đã được truy cập trước đó.

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 CSS cho siêu liên kết?

a) Trạng thái bình thường của siêu liên kết được định kiểu bằng cách sử dụng lớp giả a:link, và siêu liên kết sẽ có màu xanh và gạch chân khi ở trạng thái này.

b) Trạng thái lướt qua siêu liên kết thường có màu sắc khác với trạng thái mặc định và được định kiểu bằng lớp giả a:hover.

c) Trạng thái kích hoạt siêu liên kết được định kiểu bằng lớp giả a:focus, và siêu liên kết sẽ có màu đỏ và có gạch chân khi ở trạng thái này.

d) Trạng thái đã truy cập của siêu liên kết được định kiểu bằng lớp giả a:visited, và siêu liên kết sẽ có màu tím và có gạch chân khi ở trạng thái này.

Trả lời

a) Đúng: Trạng thái bình thường của siêu liên kết được định kiểu bằng lớp giả a:link. Siêu liên kết sẽ có màu xanh và gạch chân theo mặc định.

b) Đúng: Trạng thái lướt qua siêu liên kết (hover) có thể thay đổi màu sắc và được định kiểu bằng lớp giả a:hover.

c) Sai: Trạng thái kích hoạt (active) được định kiểu bằng lớp giả a:active, không phải a:focus. Trạng thái a:focus liên quan đến trạng thái tập trung, không phải kích hoạt.

d) Đúng: Trạng thái đã truy cập của siêu liên kết được định kiểu bằng lớp giả a:visited, và siêu liên kết thường có màu tím và có gạch chân.

Câu 2: Phát biểu sau đây đúng hay sai về định kiểu CSS cho danh sách?

a) Để định kiểu cho số hoặc dấu đầu dòng của các mục trong danh sách, ta sử dụng thuộc tính list-style-position để thay đổi kiểu số hoặc dấu đầu dòng.

b) Để định kiểu dấu đầu dòng bằng hình ảnh, ta sử dụng thuộc tính list-style-image và có thể thay thế giá trị outside bằng inside để đặt dấu đầu dòng vào bên trong phần nội dung của mục.

c) Để thay đổi kiểu số hoặc dấu đầu dòng của danh sách, ta sử dụng thuộc tính list-style-type để chỉ định kiểu có sẵn của CSS.

d) Để định kiểu cho vị trí của dấu đầu dòng, ta sử dụng thuộc tính list-style-position và có thể chọn giá trị là inside hoặc outside.

Trả lời

a) Sai: Thuộc tính list-style-position được sử dụng để định kiểu vị trí hiển thị của dấu đầu dòng (inside hoặc outside), không phải để thay đổi kiểu số hoặc dấu đầu dòng. Để thay đổi kiểu số hoặc dấu đầu dòng, sử dụng thuộc tính list-style-type.

b) Đúng: Thuộc tính list-style-image dùng để định kiểu dấu đầu dòng bằng hình ảnh. Giá trị inside có thể được sử dụng để đặt dấu đầu dòng vào bên trong phần nội dung của mục.

c) Đúng: Thuộc tính list-style-type dùng để thay đổi kiểu số hoặc dấu đầu dòng của danh sách theo các kiểu có sẵn của CSS, chẳng hạn như disc, circle, square, hoặc decimal.

d) Đúng: Thuộc tính list-style-position dùng để định kiểu vị trí của dấu đầu dòng trong danh sách. Giá trị inside sẽ đặt dấu đầu dòng vào bên trong phần nội dung của mục, trong khi giá trị outside sẽ giữ dấu đầu dòng ngoài phần nội dung.

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

Câu 1: Làm thế nào để thay đổi màu sắc của siêu liên kết khi con trỏ chuột di chuyển qua nó?

Đáp án: Sử dụng lớp giả a:hover.

Giải thích: Lớp giả a:hover cho phép định kiểu cho trạng thái lướt qua của siêu liên kết, khi con trỏ chuột nằm bên trên, giúp thay đổi màu sắc hoặc các thuộc tính khác của siêu liên kết.

Câu 2: Làm thế nào để thay đổi kiểu của dấu đầu dòng trong danh sách bằng hình ảnh?

Đáp án: Sử dụng thuộc tính list-style-image.

Giải thích: Thuộc tính list-style-image cho phép định kiểu dấu đầu dòng bằng hình ảnh, thông qua việc chỉ định đường dẫn của tệp ảnh trong hàm url().

Câu 3: Thuộc tính nào được sử dụng để đặt vị trí của dấu đầu dòng vào bên trong nội dung của mục trong danh sách?

Đáp án: list-style-position với giá trị inside.

Giải thích: Thuộc tính list-style-position được dùng để thay đổi vị trí của dấu đầu dòng. Giá trị inside đặt dấu đầu dòng vào bên trong phần nội dung của mục trong danh sách

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