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