Khi nào thì sử dụng selector a hover để đặt các định dạng css trong đỏ
Thẻ Show Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Mỗi website sẽ có nhiều thẻ Nội dung như sau:
Trong bài này mình có sử dụng kiến thức của bài cũ như Bài viết này được đăng tại [free tuts .net] 1. Chọn màu sắc cho thẻ aMặc định thẻ Ví dụ: Chọn màu xanh cho thẻ a XEM DEMO Bạn hãy thử lại với các màu khác và cảm nhận nhé. 2. Tắt gạch chân thẻ a với text-decorationThông thường khi bạn tạo thẻ Ví dụ: Tắt gạch chân của thẻ a XEM DEMO a.non-textdecoration{ color: red; text-decoration: none; } 3. Chọn background cho thẻ aCũng tương tự các phần trên ta sẽ sử dụng một thuộc tính chuyên về CSS background đó là background. Ví dụ: Chọn background màu xanh và màu chữ màu trắng cho thẻ a XEM DEMO a{ background: blue; color:#FFF; /*white*/ } 4. Style các sự kiện (hover, visited, active, link)Các sự kiện này xay ra khi chúng ta dùng chuột thao tác lên nó.
Các sự kiện của thẻ a sẽ có quy tắc CSS selector như sau: selector:hover{} selector:active{} selector:link{} selector:visited{} Ví dụ: a:hover{} a.home:active{} a#contact:link{} a:visited{} Sau đây là các ví dụ liên quan đến các sự kiện này Ví dụ: Hover Trong ví dụ này khi hover vào màu sắc của thẻ XEM DEMO a:hover{ color: red; text-decoration: none; } Ví dụ: Visited Trong ví dụ này khi bạn click vào thẻ a
đó nó sẽ mở sang tab khác (thẻ a có thuộc tính Lưu ý: Nếu bạn gõ URL là một trang web mà trình duyệt đã lưu thì nó sẽ là visted, chính vì vậy hãy đổi URL trong ví dụ sang một URL khác và xem kết quả. XEM DEMO a:visited{ color: yellow; } Ví dụ: Link Lưu ý: Nếu bạn gõ URL là một trang web mà trình duyệt đã lưu thì nó sẽ là visted, chính vì vậy hãy đổi URL trong ví dụ sang một URL khác và xem kết quả. Style cho những thẻ nào chưa xem thì có màu đỏ. XEM DEMO Ví dụ: Active Mặc định màu sắc của trường hợp này là màu đỏ nên ta làm ví dụ khi click giữ chuột thì cho màu sắc màu vàng. XEM DEMO a:active{ color: yellow; } 5. Ví dụ tổng hợp CSS cho thẻ aBây giờ ta làm một ví dụ tổng hợp với yêu cầu như sau:
XEM DEMO a:link{ color: blue; text-decoration: none; } a:visited{ color: black; text-decoration: underline; } a:hover{ color: yellow; text-decoration: underline; } a:active{ color: white; text-decoration: none; } Bạn chú ý nếu bạn đặt thứ tự các đoạn CSS không giống như trong demo thì sẽ không hoạt động, nghĩa là ban phải đặt CSS theo quy tắc (link -> visited -> hover -> active). 6. Lời kếtTrong bài này chúng ta đã tìm hiểu một số thuộc tính định dạng cho thẻ Trong bài mình có tham khảo một số website như W3C và internet nên nếu bạn có thể sử dụng google để tìm hiểu thêm. Chúc bạn học tốt! |