Gốc > Những vấn đề về CNTT > Web > CSS >
Đỗ Thanh Dương @ 16:24 19/03/2011
Số lượt xem: 288
Bài 6: Pseudo-classes For Links
Một thành phần rất quan trọng trong mọi website chính là liên kết.Cũng như một
đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính
định dạng đã học ở 2 bài trước như định font chữ, gạch chân, màu chữ,… cho một
liên kết. Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt được gọi là pseudo-
classes. Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối
tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link),
khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên
kết đang được kích hoạt – đang giữ nhấn chuột (a:active). Với điều khiển pseudo-
classes cùng với các thuộc tính CSS đã học chắc chắn sẽ mang lại rất nhiều ý
tưởng về trang trí liên kết cho trang web.
Sau đây chúng ta sẽ tiến hành một số ví dụ để tìm hiểu thêm về các khả năng trang
trí cho một liên kết dựa trên pseudo-classes.
Ví dụ 1: Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái
liên kết: các liên kết chưa thăm có màu xanh lá; các liên kết mouse over sẽ có màu
đỏ tươi; các liên kết đã thăm sẽ có màu đỏ và các liên kết đang kích hoạt có màu
tím.
Ví dụ 2: Tạo các hiệu ứng tương ứng với trình trạng liên kết: các liên chưa thăm có
màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font
1.2em, hiệu ứng nhấp nháy; liên kết đã thăm sẽ có màu xanh da trời, không có
đường gạch chân; các liên kết đang kích hoạt có màu tím và font dạng small-caps.
Ví dụ 3: Ví dụ này cũng tạo cho liên kết hiệu ứng màu sắc giống ví dụ 2 nhưng sẽ
có thêm 1 số hiệu ứng: các liến kết sẽ có khung viền màu đen, kích cỡ font 14px;
liên kết mouse over có nền light cyan; các liên kết đã thăm có nền light yellow.
Ba ví dụ trên chỉ là một tí gợi ý về khả năng kết hợp các thuộc tính CSS với
pseudo-classes để tạo nên nhiều hiệu ứng hấp dẫn cho trang web. Cũng xin nói
luôn là các ví dụ Pearl trình bày trong bài này cũng như những bài khác thật ra
trông không dễ nhìn, đó là do Pearl không có nhiều thời gian để chăm chút các ví
dụ của mình. Cái mà Pearl muốn nói chỉ là làm thế nào các bạn hiểu tác dụng một
thuộc tính nào đó để có thể vận dụng cho trang web của chính mình.
đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính
định dạng đã học ở 2 bài trước như định font chữ, gạch chân, màu chữ,… cho một
liên kết. Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt được gọi là pseudo-
classes. Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối
tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link),
khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên
kết đang được kích hoạt – đang giữ nhấn chuột (a:active). Với điều khiển pseudo-
classes cùng với các thuộc tính CSS đã học chắc chắn sẽ mang lại rất nhiều ý
tưởng về trang trí liên kết cho trang web.
Sau đây chúng ta sẽ tiến hành một số ví dụ để tìm hiểu thêm về các khả năng trang
trí cho một liên kết dựa trên pseudo-classes.
Ví dụ 1: Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái
liên kết: các liên kết chưa thăm có màu xanh lá; các liên kết mouse over sẽ có màu
đỏ tươi; các liên kết đã thăm sẽ có màu đỏ và các liên kết đang kích hoạt có màu
tím.
HTML Code:
a:link {
color:#00FF00
}
a:hover {
color:#FF00FF
}
a:visited {
color:#FF0000
}
a:active { color:# 662D91 }
màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font
1.2em, hiệu ứng nhấp nháy; liên kết đã thăm sẽ có màu xanh da trời, không có
đường gạch chân; các liên kết đang kích hoạt có màu tím và font dạng small-caps.
HTML Code:
a:link {
color:#00FF00;
font-size:14px
}
a:hover {
color:#FF00FF;
font-size:1.2em;
text-decoration:blink
}
a:visited {
color:#FF0000;
text-decoration:none
}
a:active {
color:# 662D91;
font-variant:small-caps
}
có thêm 1 số hiệu ứng: các liến kết sẽ có khung viền màu đen, kích cỡ font 14px;
liên kết mouse over có nền light cyan; các liên kết đã thăm có nền light yellow.
HTML Code:
a {
border:1px solid #000;
font-size:14px
}
a:link {
color:#00FF00;
}
a:hover {
background-color:#00BFF3;
color:#FF00FF;
font-size:1.2em;
text-decoration:blink
}
a:visited {
background-color:#FFF568;
color:#FF0000;
text-decoration:none
}
a:active { color:#662D91; font-variant:small-caps }
pseudo-classes để tạo nên nhiều hiệu ứng hấp dẫn cho trang web. Cũng xin nói
luôn là các ví dụ Pearl trình bày trong bài này cũng như những bài khác thật ra
trông không dễ nhìn, đó là do Pearl không có nhiều thời gian để chăm chút các ví
dụ của mình. Cái mà Pearl muốn nói chỉ là làm thế nào các bạn hiểu tác dụng một
thuộc tính nào đó để có thể vận dụng cho trang web của chính mình.
Đỗ Thanh Dương @ 16:24 19/03/2011
Số lượt xem: 288
Số lượt thích:
0 người
- Bài 5: Text (19/03/11)
- Bài 4: Font Chữ (19/03/11)
- Bài 3: Background (19/03/11)
- Bài 2: Một Số Quy Ước Về Cách Viết CSS (19/03/11)
- Bài 1: Giới Thiệu CSS (19/03/11)
Ý kiến trao đổi