Liên kết (link) là một phần quan trọng trong việc điều hướng và trải nghiệm người dùng trên website. Trong bài 14 này, chúng ta sẽ tìm hiểu cách định dạng và tùy chỉnh liên kết trong CSS, bao gồm các thuộc tính như color, text-decoration, cũng như các trạng thái hover, visited, và active. Việc sử dụng đúng các thuộc tính này sẽ giúp bạn tạo ra những liên kết dễ nhìn, thu hút, và thân thiện với người dùng. Hãy cùng khám phá chi tiết cách tùy chỉnh liên kết trong CSS!

1. Cấu trúc cơ bản của CSS Links

Trong HTML, các liên kết được tạo ra bằng thẻ <a> (anchor), và CSS cung cấp các cách để bạn định dạng chúng trong các trạng thái khác nhau như:

  • Normal (Bình thường): Liên kết chưa được người dùng tương tác.
  • Hover: Khi người dùng đưa chuột lên liên kết.
  • Active: Khi liên kết đang được người dùng bấm.
  • Visited: Liên kết đã được người dùng bấm vào trước đó.

Các trạng thái chính của liên kết:

  • a:link: Trạng thái liên kết bình thường.
  • a:visited: Trạng thái khi liên kết đã được truy cập.
  • a:hover: Trạng thái khi di chuột qua liên kết.
  • a:active: Trạng thái khi liên kết đang được bấm.

Ví dụ:

html
Thử online
<style>
a:link {
    color: blue; /* Liên kết bình thường */
}

a:visited {
    color: purple; /* Liên kết đã truy cập */
}

a:hover {
    color: red; /* Liên kết khi di chuột qua */
}

a:active {
    color: orange; /* Liên kết khi bấm */
}
</style>
<a href="https://codetuthub.com">Truy cập Codetuthub</a>

Kết quả:

  • Liên kết có màu xanh khi chưa được truy cập.
  • Khi đã truy cập, liên kết chuyển sang màu tím.
  • Khi di chuột qua, liên kết đổi thành màu đỏ.
  • Khi nhấn giữ, liên kết sẽ có màu cam.

2. Định dạng liên kết trong CSS

2.1. Thay đổi màu sắc của liên kết

Bạn có thể dễ dàng thay đổi màu sắc của liên kết bằng cách sử dụng thuộc tính color. Dưới đây là ví dụ thay đổi màu sắc cho từng trạng thái của liên kết.

html
Thử online
<style>
a:link {
    color: #007bff; /* Xanh dương cho liên kết bình thường */
}

a:visited {
    color: #6f42c1; /* Màu tím cho liên kết đã truy cập */
}

a:hover {
    color: #dc3545; /* Màu đỏ cho khi hover */
}

a:active {
    color: #28a745; /* Màu xanh lá cho liên kết khi bấm */
}
</style>
<a href="https://codetuthub.com">Truy cập Codetuthub</a>

2.2. Thêm hoặc loại bỏ gạch chân cho liên kết

Theo mặc định, liên kết có gạch chân. Bạn có thể sử dụng thuộc tính text-decoration để loại bỏ hoặc thêm lại gạch chân cho liên kết.

html
Thử online
<style>
a {
    text-decoration: none; /* Bỏ gạch chân cho liên kết */
}

a:hover {
    text-decoration: underline; /* Thêm gạch chân khi di chuột qua */
}
</style>
<a href="https://codetuthub.com">Truy cập Codetuthub không có gạch chân</a>

Kết quả: Liên kết sẽ không có gạch chân, nhưng khi di chuột qua, gạch chân sẽ xuất hiện.

2.3. Thay đổi kiểu chữ và định dạng liên kết

Bạn có thể thay đổi phông chữ, kích thước, độ đậm và các định dạng khác cho liên kết giống như với các phần tử văn bản khác.

html
Thử online
<style>
a {
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase; /* Viết hoa tất cả các ký tự */
    color: #ff5722;
}
</style>
<a href="https://codetuthub.com">Định dạng liên kết với chữ hoa</a>

Kết quả: Liên kết sẽ hiển thị với font Arial, chữ hoa, và màu cam.

3. Hiệu ứng liên kết khi di chuột (hover effects)

3.1. Thay đổi màu nền khi hover

Một cách thú vị để làm nổi bật liên kết là thay đổi màu nền khi người dùng di chuột qua.

html
Thử online
<style>
a {
    color: #fff;
    background-color: #007bff;
    padding: 5px 10px;
    text-decoration: none;
    transition: background-color 0.3s ease; /* Tạo hiệu ứng chuyển mượt */
}

a:hover {
    background-color: #0056b3; /* Đổi màu nền khi hover */
}
</style>
<a href="https://codetuthub.com">Hover để thay đổi màu nền</a>

Kết quả: Khi người dùng di chuột qua liên kết, màu nền sẽ thay đổi từ xanh dương sang màu đậm hơn.

3.2. Thêm hiệu ứng phóng to (zoom) khi hover

Bạn có thể tạo hiệu ứng phóng to liên kết khi di chuột bằng cách sử dụng transform: scale().

html
Thử online
<style>
a {
    display: inline-block;
    color: #000;
    padding: 5px;
    transition: transform 0.3s ease; /* Hiệu ứng mượt */
}

a:hover {
    transform: scale(1.2); /* Phóng to 120% khi di chuột */
}
</style>
<a href="https://codetuthub.com">Hover để phóng to</a>

Kết quả: Khi di chuột, liên kết sẽ phóng to nhẹ, tạo cảm giác nổi bật hơn.

4. Tạo button từ liên lết

Bạn có thể dễ dàng tạo các nút từ liên kết bằng cách sử dụng CSS. Điều này đặc biệt hữu ích khi bạn muốn người dùng bấm vào một nút nhưng nó dẫn đến một trang khác.

html
Thử online
<style>
a.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

a.button:hover {
    background-color: #218838;
}
</style>
<a href="https://codetuthub.com" class="button">Click vào đây</a>

Kết quả: Liên kết sẽ trông giống như một nút với màu nền xanh lá, và khi di chuột qua, màu nền sẽ trở nên đậm hơn.

5. Định dạng liên kết với biểu tượng

Bạn có thể thêm biểu tượng vào liên kết để tăng thêm tính thẩm mỹ và trải nghiệm người dùng. Đây là ví dụ sử dụng biểu tượng mũi tên cho liên kết ngoài.

html
Thử online
<style>
a.external-link::after {
    content: ' →';
    color: #007bff;
    font-size: 18px;
}
</style>
<a href="https://codetuthub.com" class="external-link">Truy cập Codetuthub</a>

Kết quả: Biểu tượng mũi tên sẽ xuất hiện sau liên kết.

6. Mẹo và lưu ý khi định dạng liên kết

6.1. Thứ tự các pseudo-classes

Khi định dạng các trạng thái liên kết với các pseudo-classes (:link, :visited, :hover, :active), bạn cần tuân thủ thứ tự nhất định để CSS hoạt động đúng. Thứ tự lý tưởng là:

  1. :link
  2. :visited
  3. :hover
  4. :active

6.2. Sử dụng text-decoration cẩn thận

Liên kết gạch chân thường giúp người dùng nhận biết chúng là liên kết, nên khi bỏ gạch chân (text-decoration: none;), hãy đảm bảo rằng bạn vẫn có cách khác để làm nổi bật liên kết, chẳng hạn như thay đổi màu hoặc thêm hiệu ứng hover.

6.3. Tăng cường khả năng truy cập

Hãy đảm bảo rằng các liên kết trên trang web của bạn có màu sắc và phong cách dễ nhận biết. Người dùng cần phân biệt dễ dàng giữa liên kết đã truy cập và chưa truy cập. Điều này giúp tăng cường khả năng truy cập cho trang web.

7. Kết luận

CSS Links là một phần quan trọng trong việc thiết kế trải nghiệm người dùng cho trang web. Bạn có thể sử dụng CSS để tùy chỉnh cách liên kết hiển thị, từ việc thay đổi màu sắc, hiệu ứng hover đến việc biến liên kết thành các nút bấm hấp dẫn. Hãy thử nghiệm các ví dụ và áp dụng cho trang web Codetuthub.com để làm cho các liên kết trở nên thu hút hơn và dễ sử dụng hơn.