Lý thuyết Tin 12 Chân trời sáng tạo Bài F10: Định kiểu CSS cho siêu liên kết và danh sách

Với tóm tắt 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 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 Chân trời sáng tạo Bài F10: Định kiểu CSS cho siêu liên kết và danh sách

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.

$\to$Để đị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ị.

Xem thêm tóm tắt lý thuyết Tin học lớp 12 Chân trời sáng tạo hay khác:

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

• Lý thuyết Tin học 12 Bài F12: Định kiểu CSS cho biểu mẫu

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

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

• Lý thuyết Tin học 12 Bài G2: Nhóm nghề quản trị thuộc ngành 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)

---