Đầu tiên là hiệu ứng cho đường link lúc bình thường có cú pháp như sau
- Code:
-
a{properties:value;}
Trong code trên các bạn có thể thay
properties:value bằng nhiều thuộc tính khác nhau. Ví dụ như thay màu sắc cho link thì thêm color, thêm nền cho link thì thêm background... và nên nhớ mỗi thuộc tính phải cách nhau bởi dấu ";" nhé. Sau đây là một số hiệu ứng:
- Code:
-
color:#FFFFFF
Chỉnh màu sắc cho link, có thể thay #FFFFFF bằng mã màu khác.
- Code:
-
background-image:url(link)
Thay link bằng link hình bạn muốn, có thể tìm ở
http://www.poqbum.com/animated_hover/ hoặc
http://glitter-graphics.net/ - Code:
-
font-size:Apx
Thay đổi độ lớn của tên link, thay A bằng số thích hợp
- Code:
-
font-family:Tahoma
Thay đổi kiểu font, có thể thay Tahoma bằng tên font bạn muốn
- Code:
-
font-style:italic
Chỉnh font chữ nghiêng
- Code:
-
font-weight:bold
Chỉnh font chữ đậm
- Code:
-
text-decoration:underline
Thay đổi thuộc tính cho link, có thể thay underline (gạch dưới) bằng none (không gạch), overline (gạch đầu), line-through (gạch giữa), blink (nhấp nháy). Lưu ý blink không hiển thị trên IE
- Code:
-
border:1px dashed #fff;
Hiệu ứng đường viền. Trong toàn bộ code trên thì 1px là độ "dày" của đường viền, có thể thay 1 bằng số khác. dashed là kiểu đường viền có thể thay bằng dotted, solid, double, groove, ridge, inset, outset, inherit. Còn #fff là màu đường viền, có thể thay bằng mã màu khác
Ở phần trên là hiệu ứng cho đường link lúc bình thường. Ngoài ra còn hiệu ứng cho link ở nhiều trạng thái
Hiệu ứng đã click vào link và quay trở lại xem trang đó, visited nghĩa là được viếng thăm. Code này có tác dụng đánh dấu các link đã xem khi ta quay lại trang chủ.
- Code:
-
a:visited{properties:value;}
Hiệu ứng khi di chuột vào link
- Code:
-
a:hover{properties:value;}
Hiệu ứng khi click vào link và chưa buông ra
- Code:
-
a:active{properties:value;}
Trong các code trên ở phần properties:value các bạn thay tương tự như phần cho link lúc bình thường.
Ví dụ code hiệu ứng link hình trái tim hồng bay lên
- Code:
-
a:hover, a.link:hover, a.navbar:hover {background-image:url(http://i10.glitter-graphics.org/pub/7/7300hpyshmxute.gif); text-decoration:none;}
Tùy vào từng hiệu ứng và thuộc tính mà các bạn có thể tự sáng tạo cho đường link blog của mình. Và điều cuối cùng mình nhắc các bạn nên nhớ là các thuộc tính phải ngăn cách nhau bởi dấu ";"