Nội dung chính Khoa học máy tính 12 Chân trời Bài F10: Định kiểu CSS cho siêu liên kết và danh sách

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

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

- Khái niệm: Siêu liên kết là một đường dẫn đến các phần khác của trang web hay một trang web khác. 

- Trong HTML, siêu liên kết được tạo bằng thẻ <a> và thuộc tính href.

- Khi định kiểu CSS cho siêu liên kết, ta thường quan tâm đến 5 trạng thái của siêu liên kết: 

+ Bình thường.

+ Lướt qua (hover).

+ Kích hoạt (active).

+ Đã truy cập (visited).

+ Tập trung (focus).

- Ngôn ngữ CSS đặt ra khái niệm gọi là “lớp giả” để định kiểu cho các trạng thái của một phần tử. 

- Lớp giả được kí hiệu bằng dấu hai chấm (:) đặt trước tên lớp, chẳng hạn: 

+ 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) 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 có gạch chân (Hình 1).

+ Muốn thay đổi trạng thái này, em đị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, con trỏ chuột sẽ có hình bàn tay, màu sắc của siêu liên kết như trạng thái mặc định. 

- Muốn thay đổi trạng thái này, em đị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, hoặc nháy và giữ chuột hoặc đang được kích hoạt, liên kết sẽ có màu đỏ, có gạch chân. 

- Muốn thay đổi trạng thái này, em đị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, có gạch chân. 

- Muốn thay đổi trạng thái này, em đị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, siêu liên

kết sẽ có viền xung quanh. 

- Muốn thay đổi trạng thái này, em áp dụng định kiểu với 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

Bên cạnh những thuộc tính về màu sắc, nền, căn lề,... CSS còn cho phép định kiểu cho số hoặc dấu đầu dòng của các mục trong 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 và chỉ định những kiểu do CSS quy định sẵn.

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

- 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().

THỰC HÀNH

Nhiệm vụ. Định kiểu CSS cho siêu liên kết và danh sách

- Đoạn mã HTML:

- Đoạn mã CSS: