Show Định nghĩa và sử dụng":visited" định dạng cho các thành phần đã được click. Cấu trúca:visited { property : value; } Ví dụHTML viết:<html> <head></head> <body> <p><a href="http://hocwebchuan.com/">Học web chuẩn</a></p> <p><a href="http://www.google.com.vn">Google</a></p> <p><a href="http://vnexpress.net">vnexpress</a></p> </body> </html> Hiển thị trình duyệt khi chưa có CSS:CSS viết:a:visited { color: #ff0000; } Hiển thị trình duyệt khi đã có CSS:Những link nào đã click thì css sẽ có tác dụng. Trình duyệt hỗ trợ":visited" được hỗ trợ trong đa số các trình duyệt. * Các trạng thái của thẻ a: - link: trạng thái ban đầu (chưa click vô lần nào) - hover: khi mouse chuột lên link - visited: link đã từng click vô rồi - active: lúc click chuột vô thẻ a Sau đây là một ví dụ về cách viết các trạng thái này: HTML: <a href="http://www.dngaz.com" class="dngaz">Website chia sẻ kiến thức và kết nối cộng đồng</a> CSS: a.dngaz:link, a.dngaz:visited { color:blue; text-decoration:none; } a.dngaz:hover { color:red; font-weight:bold; } a.dngaz:active { background:yellow; } 1. Đoạn css trên định dạng màu cho thẻ a (đã hay chưa bao giờ click vô) vẫn có màu xanh, không gạch dưới. 2. Khi hover chuột lên chữ "CSS cho người việt" sẽ có màu đỏ, font chữ đậm. 3. Khi click chuột vào link thì sẽ thấy background màu vàng dưới link (chớp rất nhanh, nếu máy chậm sẽ thấy dể hơn, ^^). * Focus: trạng thái này có thể hiểu là khi con chuột đang nháy vào thẻ đó, thường sử dụng cho thẻ input & textarea. Một ví dụ cụ thể, khi sử dụng trình duyệt google Schrome, khi nhấp chuột vô thẻ input, textarea nó có border nhìn rất bắt mắt... Nếu bây giờ GC muốn thẻ input có class="username" khi click chuột vô thì nó có border màu đỏ và có bóng đổ thì có thể viết như sau: HTML: <input type="text" value="Click vào đây" class="username" /> CSS: .username:focus { border:1px solid #808451; -moz-box-shadow:0 0 8px #808451; -webkit-box-shadow:0 0 15px #808451;
} Kết quả: Nguồn bài viết: Dngaz.com More "Try it Yourself" examples below. Definition and UsageThe Tip: Use the :link selector to style links to unvisited pages, the :hover selector to style links when you mouse over them, and the :active selector to style links when you click on them. Browsers limits the styles that can be set for a:visited links, due to security issues. Allowed styles are:
All other styles are inherited from a:link.
Browser SupportThe numbers in the table specifies the first browser version that fully supports the selector.
CSS Syntax :visited { More ExamplesExampleSelect and style unvisited, visited, hover, and active links: /* unvisited link */ /* visited link */ /* mouse over link */ /* selected link */ Try it Yourself » ExampleStyle links with different styles: a.ex1:hover, a.ex1:active { a.ex2:hover, a.ex2:active { Try it Yourself » Related PagesCSS tutorial: CSS Links CSS tutorial: CSS Pseudo classes Thẻ 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! |