Một liên kết có thể được tạo kiểu với các thuộc tính khác nhau trong CSS chẳng hạn như color, font-family, background … Ngoài ra một liên kết còn có các trạng thái liên kết và cách tạo nút liên kết mà tôi sẽ viết trong bài này.
1. Các trạng thái liên kết
Một liên kết có 04 trạng thái:
+ Trạng thái link – một liên kết mà người dùng chưa từng truy cập
+ Trạng thái visited – một liên kết mà người dùng đã từng truy cập
+ Trạng thái hover – khi người dùng rê chuột vào liên kết
+ Trạng thái active – ngay khi người dùng bấm chuột vào liên kết
Lưu ý: Khi ta định dạng cho liên kết theo trạng thái, thì các trạng thái phải được sắp xếp theo đúng thứ tự từ trên xuống dưới là: link, visited, hover, active
2. Cách tạo nút liên kết (Link Button)
Chúng ta có thể sử dụng các thuộc tính đã học như: background-color, color, margin, padding, border,…. kết hợp với các trạng thái của liên kết để tạo ra nút liên kết (link button)
3. Các bài tập
3.1 Bài tập 1
Thiết lập màu cho liên kết bên dưới thành màu xanh lá (green)
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn</p> <p><a href="http://binhnet.com">Trang chủ</a></p> </body> </html>
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: green;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
<p><a href="http://binhnet.com">Trang chủ</a></p>
</body>
</html>
3.2 Bài tập 2
Cũng như bài tập 1 nhưng thiết lập trạng thái link là màu đỏ (red) và trạng thái visited là màu xanh da trời (blue)
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: blue;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
<p><a href="http://binhnet.com">Trang chủ</a></p>
</body>
</html>
4. Lời cuối bài
Đến đây là kết thúc bài viết về các trạng thái liên kết và cách tạo nút liên kết. Ở bài sau tôi sẽ viết về các thuộc tính định dạng danh sách (list)
The post [CSS bài 17] Các trạng thái liên kết và cách tạo nút liên kết appeared first on Học online.
from WordPress http://ift.tt/2ewOPN2
via IFTTT
Không có nhận xét nào:
Đăng nhận xét