[CSS] – Styling Links

Một link (liên kết) là một đường dẫn tới một vị trí trên trang hoặc tại địa chỉ của trang xác định khác. Cú pháp của thẻ liên kết là: a { color, font-family, text-decoration, background, v.v… }

Các liên kết có những styles (kiểu) khác nhau phụ thuộc vào trạng thái của liên kết. Có 4 trạng thái chính của một liên kết:

  • a: link – trạng thái thông thường, khi liên kết chưa được click vào.
  • a:visited – trạng thái sau khi người dùng click vào.
  • a:hover – trạng thái khi người dùng di chuột vào.
  • a:active – trạng thái khi người dùng click vào liên kết nhưng chưa nhả chuột ra.

Ví dụ: Thiết lập css cho liên kết như sau:

Kết quả:

Hình 1. Liên kêt mặc định

Một số quy tắc cần nhớ:

  • a:hover phải theo sau a:link và a:visited
  • a:active phải theo sau a:hover

Một số thuộc tính CSS thường dùng với links:

  1. Text-decoration: được dùng để thêm hoặc bỏ đường gạch chân dưới liên kết.

Ví dụ 1: Sử dụng thuộc tính text-decoration bỏ đường gạch chân liên kết

Kết quả:

text-decoration
Hình 2. Bỏ đường gạch chân liên kết

2. Background-color: được dùng để thiết lập màu nền cho liên kết

Ví dụ 2: Sử dụng thuộc tính background-color thiết lập màu nền vàng cho liên kết

Kết quả:

Thuộc tính background-color
Hình 3. Thiết lập màu nền liên kết

3. Link Buttons: sử dụng kết hợp các thuộc tính để tạo liên kết như button hay box.

Ví dụ 3: Tạo liên kết có dạng nút bấm với những thuộc tính kết hợp

Kết quả:

link button with css
Hình 4. Liên kết dạng nút bấm

Ngoài ra, các bạn có thể kết hợp những thuộc tính thường dùng cho liên kết:

  • text: màu chữ của liên kết
  • border: đường viền của liên kết
  • font-family: font chữ của liên kết

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.