Đường liên kết và các dạng liên kết - Duong lien ket va cac dang lien ket

Đường liên kết và các dạng liên kết (10/05/2008 8:56:50 SA)

Đường liên kết và các dạng liên kết

Cho nên khi bạn mở trang đó ra, cứ chỗ nào là đường link thì sẽ thành màu đỏ và khi bạn click vào đó hoặc di chuột qua nó bạn sẽ không thấy có thay đổi gì.

Bởi vì tất cả các đường link đã được định dạng thành màu đỏ. Chúng ta bắt đầu bằng đoạn code dưới đây:

---------------------------------------------------
<..style type="text/css">

<..!--

a:link { color: red; }

a:visited { color: red; }

a:hover { color: red; }

a:active { color: red; }

-->

-------------------------------------------------------

2. 2. Nếu bạn muốn làm đường link của bạn không có gạch chân khi ai đó di chuột qua bạn chỉ cần thêm một trạng thái là Text-decoration: none vào chỗ a:hover vào giữa hai dấu ngoặc {}

------------------------------------------------------
a : h o v e r { c o l o r: r e d; t e x t-d ecor ation: non e; }
------------------------------------------------------
(Viết liền)

Do vậy nếu bạn không muốn có đường gạch chân ở trên những đường link, bạn chỉ việc thêm dòng Text-decoration: none vào tất cả 4 trạng thái và những đường liên kết sẽ không có đường gạch chân nữa.

3. Bạn cũng có thể thêm hình nền vào đường link của bạn khi ai đó di chuột qua nó. Để làm được vậy bạn phải thêm màu nền là background-color: vào trạng thái di chuột của nó như sau:

-----------------------------------------------------
a:hover {
color: red;
text-decoration: none;
background-color: #CCCCCC;
}
-----------------------------------------------------

4. Bạn cũng có thể thay đổi con trỏ khi ai đó di chuột qua đường link. Bạn thử đổi con trỏ thành dấu chấm hỏi biểu tượng của giúp đỡ.

-----------------------------------------------------
a:hover {
color: red;
text-decoration: none;
cursor: help;
}
----------------------------------------------------

Một vài trạng thái con trỏ khác bạn cũng có thể dùng:

----------------------------------------------------
auto
crosshair
help
move
pointer
text
wait
e-resize
ne-resize
n-resize
nw-resize
s-resize
se-resize
----------------------------------------------------

Bạn nên cẩn thận khi sử dụng những trạng thái của con trỏ trên trang web bởi vì nếu bạn dùng không đúng cách có thể làm cho người đọc nhầm lẫn và khó hiểu.

© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo

Author:Ades Tynyshov