* 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;
box-shadow:0 0 15px #808451;
}
Kết quả: