Ngoài những cách thông thường để tạo và trang trí đường link mà bạn đã biết trong HTML, thì trong CSS, bạn sẽ có các thuộc tính đa dạng với nhiều giá trị để giúp được link trong Webpage của bạn trở nên đẹp và chuyên nghiệp hơn.
Nội dung chính
Tạo link style trong CSS
Để tạo Link Style, chẳng hạn như tạo màu, font, … cho các đường link trong CSS, bạn có thể sử dụng nhiều thuộc tính CSS đa dạng, ví dụ như color, font-family, background, …
Ví dụ:
<html>
<head>
<meta charset="UTF-8">
<style>
a {
color: green;
}
</style>
</head>
<body>
<p>
<b><a href="index" target="_blank">Đây là một link</a></b>
</p>
</body>
</html>
Ngoài ra, để thiết lập các trạng thái khác nhau cho link, bạn có thể sử dụng các thuộc tính:
Trạng thái :link – biểu thị rằng trang web này trình duyệt chưa lưu (tức người sử dụng lần đầu tiên click vào đường dẫn này).
Trạng thái :visited – biểu thị rằng đường dẫn tới trang web này đã được lưu bởi trình duyệt (tức là người sử dụng đã click vào đường dẫn này trước đó rồi).
Trạng thái :hover – biểu thị rằng khi người sử dụng di chuyển chuột qua phần tử mà chứa link đó (tức là phần tử đó là một link khi người sử dụng di chuyển chuột qua phần tử đó).
Trạng thái :active – biểu thị đường link là active khi người sử dụng click chuột vào.
Lưu ý: Trạng thái :hover PHẢI theo sau các trạng thái :link và :visited trong định nghĩa CSS thì mới có hoạt động. Nếu thiếu một trong hai trạng thái trên, thì các Style Rule bạn đã định nghĩa cho :hover sẽ không có giá trị.
Trạng thái :active PHẢI theo sau trạng thái :hover trong định nghĩa CSS.
Ví dụ:
<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
Tiếp theo, chúng ta sẽ cùng tìm hiểu cách sử dụng các thuộc tính này để tạo các hiệu ứng khác nhau cho đường link trong CSS.
Thiết lập màu cho Link trong CSS
Để thiết lập màu cho Link, bạn sử dụng thuộc tính color trong CSS. Như đã trình bày trong chương Màu trong CSS, giá trị của thuộc tính color này có thể là tên màu hoặc một giá trị Hex Code, …
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href="">Click vao link nay</a>
</body>
</html>
Kết quả:
Thiết lập màu cho Visited Link trong CSS
Trạng thái :visited chỉ rằng đường link này đã được lưu bởi trình duyệt. Để thiết lập màu cho loại đường này, bạn theo dõi ví dụ sau:
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="#"> Click vào link này </a>
</body>
</html>
Khi bạn click vào đường link này, màu của link sẽ chuyển sang màu xanh lá cây.
Kết quả:
Thay đổi màu cho Link khi di chuyển chuột qua
Với trường hợp này, bạn sử dụng trạng thái :hover. Nên ghi nhớ rằng, trong phần định nghĩa CSS, để đường Link này có thể hoạt động, bạn nên đặt trạng thái này sau hai trạng thái :link và :visited. Tuy nhiên, để cho đơn giản thì trong ví dụ sau mình thực hiện như sau:
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="#">Click vào link này </a>
</body>
</html>
Khi bạn di chuyển chuột qua đường link trên, màu link sẽ chuyển sang màu vàng.
Thay đổi màu cho Actived Link trong CSS
Để biểu thị một link nào đó đang active, bạn có thể thay đổi màu của link đó sang một màu khác chẳng hạn. Để thiết lập trạng thái này, bạn sử dụng :active trong CSS. Ví dụ sau minh họa cách thay đổi màu cho Actived Link bởi sử dụng thuộc tính color trong CSS.
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="">Click vào link này</a>
</body>
</html>
Khi bạn click chuột vào link này, màu của link sẽ chuyển sang màu hồng.
Kết quả:
Sử dụng thuộc tính text-decoration với Link trong CSS
Nếu bạn để ý các ví dụ trên, bạn sẽ thấy rằng các đường link trên đều có dấu gạch chân bên dưới. Vậy làm cách nào để làm biến mất dấu gạch chân này cho đường link, bạn sử dụng thuộc tính text-decoration với giá trị là none. (Bạn tham khảo chương Text trong CSS để có các giá trị cho thuộc tính này)
Ví dụ
<html>
<head>
<meta charset="UTF-8">
<style>
a:link {
text-decoration: none;
}a:visited {
text-decoration: none;
}a:hover {
text-decoration: underline;
}a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p>
<b><a href="#" target="_blank">Đây là một link</a></b>
</p>
<p>
<b>Note:</b> a:hover phải theo sau a:link và a:visited thì mới hiệu lực.
</p>
<p>
<b>Note:</b> a:active phải theo sau a:hover thì mới hiệu lực.
</p>
</body>
</html>
Thiết lập màu nền cho Link trong CSS
Để thiết lập màu nền cho Link, bạn sử dụng thuộc tính background-color trong CSS. Để tìm hiểu các giá trị của thuộc tính này, bạn tham khảo chương Color trong CSS.
Ví dụ
<html>
<head>
<meta charset="UTF-8">
<style>
a:link {
background-color: yellow;
}a:visited {
background-color: cyan;
}a:hover {
background-color: lightgreen;
}a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<p>
<b><a href="#" target="_blank">Đây là một link</a></b>
</p>
<p>
<b>Note:</b> a:hover phải theo sau a:link và a:visited thì mới hiệu lực.
</p>
<p>
<b>Note:</b> a:active phải theo sau a:hover thì mới hiệu lực.
</p>
</body>
</html>
Ngoài ra, bạn có thể kết hợp nhiều thuộc tính khác nhau trong CSS để làm cho Link của bạn giống như một Box, hoặc một Button.
Sử dụng ví dụ trên, bạn chỉ cần thay Style Rule:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}a:hover, a:active {
background-color: red;
}
