[CSS] Bài 8. Định Dạng Liên Kết Với CSS

Posted by: Rain on 9/06/2013 in HTML và CSS 0

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.

Một liên kết có 4 trạng thái sau:

• a:link – liên kết khi chưa được click.
• a:visited – liên kết đã được click.
• a:hover – khi người dùng di chuyển chuột lên liên kết.
• a:active – khi liên kết được nhấn (nhấn và không thả chuột)

Ví dụ : 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.

a:link {         color:#00FF00
}
a:hover {        color:#FF00FF
}
a:visited {        color:#FF0000
}
a:active { color:# 662D91 } 

Theo đó, chúng ta có thể viết CSS để định dạng cho từng trạng thái này của liên kết.
Trong thiết kế web, đa số chúng ta chỉ viết CSS cho hai trạng thái a:link (tương đương a) và a:hover.
Các định dạng liên kết chủ yếu bao gồm:

• Các thuộc định dạng font chữ, kích cỡ…
• Các thuộc tính định dạng text
• Định dạng màu sắc (color)
• Định dạng đường viền (border)
• Và định dạng background

Ví dụ về cách định dạng liên kết:

1

a {

2	font: 12px arial, tahoma;

3	color: blue;

4	border: 1px solid #e1e1e1;

5	background: #e2e3e4

6

}

Làm sao bỏ đường gạch chân của liên kết

Mặc định, các liên kết luôn có đường gạch chân, nhưng với CSS chúng ta có thể loại bỏ một cách dễ dàng với thuộc tính text-decoration.

1	a {text-decoration:  none}

Tạo hiệu ứng hover cho liên kết

Ví dụ sau ta sẽ định dạng cho liên kết như hình bên dưới

Code HTML:

1	<p><a href="#">HOME</a></p>

2	<p><a href="#">ABOUT EWEBVN</a></p>

3	<p><a href="#">CONTACT ME</a></p>

Định dạng cho các liên kết hiện thị với màu trắng, nền màu cam, ta viết CSS như sau:

1

p a{

2	color: #fff;

3	background: #f77800;

4	width: 150px;

5	display: block;

6	padding: 3px 10px;

7

}

Khi đưa chuột lên liên kết, liên kết hiển thị với nền màu xanh, ta viết CSS cho trạng thái a:hover của liên kết:

1	p a:hover{background: green}

Tương tự ta có thể định dạng cho trạng thái a:visitted và a:active