CSS 10 – Định dạng thẻ link theo trạng thái trong CSS

0
95
Ngoài những cách thông thường để tạo và trang trí đường link mà bạn đã biết trong HTML, thì trong CSS, bạn sẽ có các thuộc tính đa dạng với nhiều giá trị để giúp được link trong website của bạn trở nên đẹp và chuyên nghiệp hơn. Và bài 10 trong series học CSS, tôi sẽ hướng dẫn cho các bạn các cách thiết lập trạng thái hay còn gọi là các sự kiện khác nhau cho link, có 4 sự kiện:
  • link: trạng thái ban đầu (chưa click link lần nào)
  • visited: link đã từng click
  • hover: khi đưa chuột lên link
  • active: khi click chuột ấn giữ thành phần

Sự kiện link

Sự kiện link bắt trạng thái liên kết khi chưa có click. Cú pháp:

Sự kiện hover

Sự kiện hover bắt trạng thái liên kết đang được hơ chuột. Cú pháp:

Sự kiện active

Sự kiện active bắt trạng thái liên kết đang được giữ click. Cú pháp:

Sự kiện visited

Sự kiện visited bắt trạng thái liên kết đã được click. Cú pháp:

Lưu ý

  • Trạng thái hover phải theo sau các trạng thái linkvisited trong định nghĩa CSS thì mới có thể hoạt động. Nếu thiếu một trong hai trạng thái trên, thì các Style Rule bạn đã định nghĩa cho hover sẽ không có giá trị.
  • Trạng thái active phải theo sau trạng thái hover trong định nghĩa CSS.

Ví dụ tổng quát

Chúng ta cùng làm một ví dụ đơn giản sau để xem các sự kiện CSS của thẻ link:
  •  Ban đầu (link) màu sắc màu xanh lá, không gạch chân
  •  Hover vào (hover) thì màu sắc màu vàng và có gạch chân
  •  Khi nhấn giữ chuột (active) thì màu sắc màu đen và không gạch chân
  •  Khi click xong (visited) thì màu sắc màu hồng và có gạch chân

Kết luận

Kết thúc bài hôm nay chúng ta đã tìm hiểu và nắm được các thuộc tính định dạng trạng thái CSS cho thẻ link <a> cũng như cách dùng trong một website. Bài tới chúng ta sẽ tìm hiểu chi tiết về sự kiện hover không chỉ trong thẻ link mà còn trong toàn bộ các thẻ HTML. Chúc các bạn học tập tốt!  

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây