Thuộc tính Cascading Style Sheets (CSS) được sử dụng phổ biến nhất để thay đổi màu sắc của siêu liên kết trong các trang web. Các giải pháp ít chức năng hơn cho vấn đề này là bằng ngôn ngữ HTML (HyperText Markup Language - "ngôn ngữ đánh dấu siêu văn bản").
Nó là cần thiết
Kiến thức cơ bản về ngôn ngữ HTML và CSS
Hướng dẫn
Bước 1
Chuẩn bị một khối tạo kiểu cho các siêu liên kết. Ở dạng đơn giản nhất, nó có thể trông giống như sau: a {color: Green} Ở đây "a" được gọi là "bộ chọn", cho biết rằng mô tả kiểu trong dấu ngoặc đơn nên được áp dụng cho tất cả các thẻ liên kết trong tài liệu. Màu xanh lá cây xác định màu của liên kết; đây là một định nghĩa rất thô về màu sắc và hiếm khi được sử dụng. Thông thường hơn, một "lớp giả" được thêm vào bộ chọn "a" - nó là một nhãn cho phép bạn chỉ định kiểu của liên kết ở ba trạng thái khác nhau.
Bước 2
Sử dụng lớp giả liên kết để tạo kiểu cho trạng thái bình thường (không hoạt động) của liên kết. Nó có thể trông như thế này, ví dụ: a: link {color: Green}
Bước 3
Sử dụng di chuột lớp giả để chỉ định cách liên kết sẽ xuất hiện khi di chuột. Ví dụ: a: hover {color: Lime}
Bước 4
Sử dụng lớp giả đã truy cập để mô tả kiểu của một liên kết đã được truy cập. Ví dụ: a: đã thăm {color: DarkGreen}
Bước 5
Kết hợp cả ba trạng thái vào một khối mô tả kiểu. Ví dụ: giao diện của mã HTML chứa mô tả CSS về kiểu có thể trông như thế này:
a: link {color: Green}
a: đã ghé thăm {color: DarkGreen}
a: hover {color: Lime}
Ở đây, các thẻ kiểu HTML mở và đóng cho trình duyệt biết nơi mô tả kiểu bắt đầu và kết thúc, và giữa chúng là mô tả hành vi liên kết ở ba trạng thái.
Bước 6
Mẫu được sử dụng ở trên chỉ hiển thị các đặc điểm màu sắc, nhưng các thuộc tính khác có thể được đưa vào mô tả. Ví dụ: nếu thiết kế trang yêu cầu liên kết không được gạch chân ở trạng thái bình thường (không hoạt động), nhưng được gạch chân khi con trỏ được di chuột qua, thì mã có thể được sửa đổi như sau:
a: link {color: Green; text-decoration: none;}
a: đã thăm {color: DarkGreen; text-decoration: none;}
a: hover {color: Lime; text-decoration: underline;}
Bước 7
Nếu bạn chỉ muốn thay đổi màu của một số liên kết trong trang và để phần còn lại với cài đặt mặc định, thì hãy thêm thuộc tính lớp vào thẻ của mỗi liên kết đang được thay đổi. Ví dụ, đặt tên cho lớp siêu kết nối này là newLinks. Sau đó, thẻ liên kết có thể trông giống như sau: liên kết văn bản Tên lớp giống nhau phải được thêm vào mô tả kiểu:
a.newLinks: link {color: Green; text-decoration: none;}
a.newLinks: đã thăm {color: DarkGreen; text-decoration: none;}
a.newLinks: hover {color: Lime; text-decoration: underline;}
Bước 8
Đặt mã mô tả kiểu được chuẩn bị từ các ví dụ được mô tả ở trên trong tiêu đề của trang - giữa các thẻ và. Nếu cần, hãy thêm thuộc tính lớp vào các thẻ liên kết với tên được sử dụng trong mô tả kiểu. Sau đó, lưu trang đã sửa đổi và quy trình thay đổi màu sắc của các siêu liên kết sẽ được hoàn tất.
