CSS ช่วยให้เราจัดรูปแบบลิงก์ได้ตามต้องการ เราสามารถจัดรูปแบบข้อความ โดยการเพิ่มสี พื้นหลัง เพิ่มขนาด ฯลฯ นอกจากนี้ยังสามารถเพิ่มแอนิเมชั่นเพื่อสร้างเอฟเฟกต์ภาพที่สวยงามอีกด้วย
สำหรับการทำงานที่เหมาะสม ลำดับของตัวเลือกหลอกจะได้รับโดย:- :link, :visited, :hover, :active
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงสไตล์ของลิงก์ด้วย CSS −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 25px;
}
#mod {
padding: 10px;
color: darkturquoise;
border: thin solid;
background-color: lemonchiffon;
}
#mod:hover {
color: white;
box-shadow: 0 0 0 1px black;
background-color: slateblue;
}
</style>
</head>
<body>
<p>
<a href="mailto:[email protected]">Demo link</a>
</p>
<p>
<a id="mod" href="mailto:[email protected]">Modified demo link</a>
</p>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
เมื่อวางเมาส์เหนือลิงก์ที่สอง เราจะได้ผลลัพธ์ดังต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 25px;
display: flex;
float: left;
border: thin solid;
background-color: snow;
padding: 20px;
}
body * {
border-radius: 5%;
}
#mod {
padding: 10px;
color: royalblue;
text-decoration: none;
}
#mod:hover {
box-shadow: 0 0 10px 2px black;
text-decoration: overline;
font-size: 1.2em;
}
</style>
</head>
<body>
<div>
<button><a href="#">Demo</a></button>
<a id="mod" href="#">Demo</a>
</div>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
เมื่อวางเมาส์เหนือลิงก์ที่สอง เราได้ผลลัพธ์ต่อไปนี้
