Pseudo-class for link

Một phần của tài liệu Bài giảng phân tích ứng dụng web (Trang 35)

CHƯƠNG 4: CASCADING STYLE SHEETS 4.1 Giới thiệu

4.4.4Pseudo-class for link

Pseudo có nghĩa là “giả, không thật”, sở dĩ nó được đặt tên là Pseudo Class hay gọi là “Class giả” là vì nó không được gắn liền với những thẻ XHTML như những class thông thường. Pseudo Class sẽ tạo ra thay đổi tới thành phần của XHTML khi một sự kiện nào đó sẽ xảy ra. Pseudo Class được sử dụng thông dụng nhất với các đường liên kết khi người dùng di chuột qua hoặc nhấp vào nó. Với những trình duyệt mới hơn (trừ Internet Explorer 6) ta có thể dễ dàng tạo ra hiệu ứng Rollover với bất cứ thành phần nào trên trang chứ không chỉ thẻ <a>.

Pseudo Class được sử dụng nhiều nhất với các đường liên kết (thẻ <a>) để tạo ra hiệu ứng thay đổi trạng thái chữ mỗi khi người dùng di chuột qua nó ví dụ như những đường liên kết trên izwebz, khi ta di chuột qua sẽ có màu nền là màu xanh nhạt.

Có tất cả 4 trạng thái của đường liên kết

• Link: đơn thuần là đường liên kết để báo cho người đọc biết nó là đường liên kết.

• Visited: Người đọc đã từng nhấp chuột vào link này rồi. • Hover: Người đọc di chuột qua đường liên kết

• Active: Đường liên kết đang được người đọc nhấp chuột. Tương đương với 4 Pseudo Class.

a:link {color:blue;} a:visited {color:gray;}

a:hover {color:red; text-decoration:none;} a:active {color:navy;}

Với ví dụ trên, bình thường sẽ có màu xanh và gạch chân là giá trị mặc định. Đường liên kết đã được người dùng nhấp vào, nó sẽ có màu xám. Người dùng di chuột lên (chưa nhấp) nó sẽ có màu đỏ và không có gạch chân. Người dùng chỉ nhấp và giữ chuột nó sẽ có màu xanh đậm (ít khi xảy ra).

Một phần của tài liệu Bài giảng phân tích ứng dụng web (Trang 35)