Video: [Học CSS - 19] Cách làm menu ngang dropdown cơ bản 2025
Một trong những cách sử dụng phổ biến nhất của các dạng kết hợp của Cascading Style Sheets (CSS) là tạo các siêu liên kết tùy chỉnh với các lớp giả, có thể được dùng để thay đổi màu mặc định và các thuộc tính của siêu liên kết.
Phong cách kết hợp các liên kết siêu liên kết có thể được viết như một bộ chọn hai phần, nơi thẻ neo được phân cách bằng dấu hai chấm theo sau tên của trạng thái liên kết, như trong liên kết a: a, visited, a: hover, và a: hoạt động.
Sự xuất hiện của một siêu liên kết được xác định bởi sự tương tác của khách truy cập với nó trong một trình duyệt:
-
Liên kết bình thường là liên kết không được duyệt.
-
Liên kết đã ghé thăm là liên kết mà khách truy cập đã nhấp vào.
-
Hover liên kết thay đổi sự xuất hiện của họ khi khách truy cập di chuột qua chúng.
-
Liên kết hoạt động thay đổi sự xuất hiện của họ chỉ khi khách truy cập nhấp chuột trực tiếp vào liên kết, trước khi thả nút chuột.
Như bạn có thể biết, tất cả các siêu liên kết mặc định hiển thị trong văn bản được gạch chân màu xanh (liên kết chưa được hiển thị) hoặc văn bản gạch dưới màu tím (các liên kết đã ghé thăm). Vì những màu này không phù hợp với màu sắc cụ thể trong thiết kế của trang web của bạn, bạn có thể ghi đè các kiểu liên kết mặc định bằng cách tạo các kiểu liên kết tùy chỉnh.
Thậm chí tốt hơn, ngoài các trạng thái siêu liên kết không được truy cập và truy cập, với CSS, bạn có thể thêm các kiểu cho hai trạng thái siêu liên kết bổ sung, cụ thể là trạng thái di chuột, xảy ra khi một khách truy cập chuột qua một liên kết và trạng thái hoạt động, xuất hiện khi một khách truy cập nhấp vào một liên kết.
a: link {color: # CC0000;} a: visited {color: # 339933;} a: hover {color: # 000000;} a: active {color: # 99CC33;}Để tiếp tục thực hiện điều thú vị, bạn có thể thêm các khai báo kiểu bổ sung cho bất kỳ hoặc tất cả bốn trạng thái liên kết. Ví dụ, bạn có thể muốn gỡ bỏ dấu gạch dưới, thêm màu nền, hoặc áp dụng một đường viền chấm xung quanh liên kết, như được minh họa ở đây và hiển thị dưới đây:
a: link {color: # CC0000;} a: visited {color: # 339933; text-decoration: none;} a: hover {color: # 000000; màu nền: # 0CC;} a: active {color: #ffffff; văn bản-trang trí: không có; biên giới: 2px chấm #CCC; background-color: # 000;}
Khi tạo các kiểu liên kết này, bạn phải lưu ý rằng mỗi kiểu được thêm vào CSS theo thứ tự mà nó sẽ được người dùng trang web kinh nghiệm trên trang web: link, visited, hover, hoạt động.
Nếu các kiểu được thêm vào CSS không đúng thứ tự, các kiểu liên kết có thể không hoạt động bình thường khi được xem trong một trình duyệt. Do đó, có thói quen tạo trạng thái liên kết bình thường đầu tiên, sau đó thêm trạng thái truy cập theo sau bởi trạng thái di chuột, và cuối cùng là trạng thái hoạt động, như thể hiện trong ví dụ trước.
