CSS - Liên kết: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của các liên kết CSS. Với kinh nghiệm giảng dạy này trong nhiều năm, tôi có thể告诉你 rằng việc thành thạo các liên kết giống như học cách buộc dây giày - ban đầu có vẻ khó khăn, nhưng một khi bạn đã nắm vững, bạn sẽ tự hỏi làm thế nào mà bạn từng sống mà không có nó!

CSS - Links

Hiểu về các trạng thái của Liên kết

Trước khi chúng ta nhảy vào mã, hãy nói về các trạng thái của liên kết. Hãy tưởng tượng liên kết như những con kỳ đà - chúng thay đổi ngoại hình dựa trên cách chúng ta tương tác với chúng. Có bốn trạng thái chính:

a:link - Liên kết bình thường, chưa được truy cập
a:visited - Liên kết mà người dùng đã truy cập
a:hover - Liên kết khi người dùng di chuột qua
a:active - Liên kết vào thời điểm nó được nhấp

Dưới đây là bảng nhỏ để nhớ các trạng thái này:

Trạng thái	Mô tả
a:link	Liên kết bình thường, chưa được truy cập
a:visited	Liên kết mà người dùng đã truy cập
a:hover	Liên kết khi di chuột qua
a:active	Liên kết vào thời điểm nhấp

Mặc định của các Liên kết

B=default, các trình duyệt sẽ định dạng các liên kết theo một cách nhất định. Bạn có thể đã chú ý thấy:

Liên kết chưa truy cập có màu xanh lam và gạch chân
Liên kết đã truy cập có màu tím và gạch chân
Liên kết đang hoạt động có màu đỏ

Nhưng đừng lo lắng, chúng ta sẽ thay đổi tất cả điều đó!

CSS Links - Ví dụ cơ bản

Hãy bắt đầu với một ví dụ đơn giản:

a {
color: #FF0000;
text-decoration: none;
}

Mã này sẽ làm cho tất cả các liên kết của bạn có màu đỏ và loại bỏ gạch chân. Đúng là tuyệt vời phải không? Hãy phân tích nó:

a chọn tất cả các phần tử liên kết
color: #FF0000; đặt màu thành đỏ
text-decoration: none; loại bỏ gạch chân

CSS Links - Định dạng một số Liên kết

Bây giờ, hãy làm cho nó trở nên ấn tượng hơn và định dạng các liên kết cho các trạng thái khác nhau:

/* liên kết chưa truy cập */
a:link {
color: #FF0000;
}

/* liên kết đã truy cập */
a:visited {
color: #00FF00;
}

/* liên kết khi di chuột qua */
a:hover {
color: #FF00FF;
}

/* liên kết khi được chọn */
a:active {
color: #0000FF;
}

Mã này sẽ cho bạn:

Liên kết chưa truy cập có màu đỏ
Liên kết đã truy cập có màu xanh lá
Liên kết khi di chuột qua có màu hồng
Liên kết khi nhấp có màu xanh dương

Lưu ý, thứ tự rất quan trọng ở đây! Thứ tự chính xác là: link, visited, hover, active. Tôi thích nhớ nó như là "LoVe HAte" (Link, Visited, Hover, Active).

Thêm biểu tượng vào Liên kết

Muốn làm cho liên kết của bạn nổi bật hơn? Hãy thêm một số biểu tượng!

Trước tiên, bạn cần có một hình ảnh biểu tượng. Giả sử chúng ta có một biểu tượng mũi tên nhỏ tên là 'arrow.png'.

a {
background: url('arrow.png') no-repeat left center;
padding-left: 20px;
}

Mã này sẽ thêm biểu tượng mũi tên vào bên trái của văn bản liên kết. padding-left đảm bảo rằng văn bản không trùng với biểu tượng.

CSS Links - Thêm biểu tượng

Hãy nâng cấp và thêm biểu tượng khác nhau cho các loại liên kết khác nhau:

/* Thêm biểu tượng cho liên kết ngoại부 */
a[href^="http"] {
background: url('external-link.png') no-repeat right center;
padding-right: 20px;
}

/* Thêm biểu tượng PDF cho liên kết đến PDF */
a[href$=".pdf"] {
background: url('pdf-icon.png') no-repeat right center;
padding-right: 20px;
}

Mã này sẽ:

Thêm biểu tượng liên kết ngoại bộ vào các liên kết bắt đầu bằng "http"
Thêm biểu tượng PDF vào các liên kết kết thúc bằng ".pdf"

Liên kết như Nút

Đôi khi, bạn muốn liên kết của mình trông như một nút. CSS làm điều này rất dễ dàng!

.button-link {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

Bây giờ, bất kỳ liên kết nào có lớp "button-link" sẽ trông như một nút xanh.style!

CSS Links - Liên kết như Nút

Hãy làm cho các liên kết nút của chúng ta trở nên tương tác hơn:

.button-link {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.button-link:hover {
background-color: #45a049;
}

.button-link:active {
background-color: #3e8e41;
}

Mã này sẽ:

Tạo một nút xanh
Tăм màu nút tối hơn khi di chuột qua
Tăм màu nút tối hơn nữa khi nhấp
Thêm hiệu ứng chuyển màu mượt mà

Và thế là xong! Bây giờ bạn đã được trang bị kiến thức để tạo ra những liên kết stunning, tương tác sẽ làm cho các trang web của bạn nổi bật. Nhớ rằng, thực hành là chìa khóa, vì vậy đừng ngần ngại thử nghiệm với các phong cách và sự kết hợp khác nhau.

Như tôi luôn nói với học sinh của mình, CSS giống như nấu ăn - bạn bắt đầu với các nguyên liệu cơ bản (thuộc tính), nhưng chính cách bạn kết hợp chúng tạo ra một kiệt tác. Vậy hãy tiến lên và tạo ra những kiệt tác liên kết CSS của bạn!

Credits: Image by storyset