CSS Links

21/05/2019

Bài sau » « Bài trước

Trong CSS, Thẻ link được style theo nhiều cách khác nhau.

Text LinkText LinkLink ButtonLink Button

Styling links

Trong CSS, thẻ link có thể được style với bất kì thuộc tính nào (size, color, background,...)

Ví dụ:

a { color: red; }

Ngoài ra, Link có thể được CSS theo trạng thái mà nó đang có, có 4 trạng thái cơ bản:

  • a:link - trạng thái bình thường, user chưa nhấn chuột vào (unvisited)
  • a:visited - thẻ link này user đã nhấn chuột vào (visited)
  • a:hover - khi user đưa chuột lên thẻ link
  • a:active - thời điểm khi thẻ link đang được click vào

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }

Khi style CSS cho thẻ link, có một số quy tắc :

  • a:hover PHẢI ở sau a:link and a:visited
  • a:active PHẢI ở sau a:hover

Text Decoration

Thuộc tính text-decoration thường được dùng để remove underline cho thẻ link.

a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }

Background Color

Thuộc tính background-color thường được dùng để thiết lập màu nền cho thẻ link.

a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; }

Nâng cao - Link Button

Ví dụ dưới đây cho chúng ta thấy với CSS, ta có thể style thẻ link thành 1 nút button:

a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; }

Kết quả hiển thị:

Link Button

Bài học CSS Links đến đây là kết thúc. Chúc các bạn học tốt !

Bài sau » « Bài trước
Back to top