เราสามารถกำหนดรูปแบบการเชื่อมโยงได้ตามความต้องการของเรา ขอแนะนำให้ลิงก์มีสไตล์ที่แตกต่างจากข้อความปกติ รูปแบบลิงก์เริ่มต้นสำหรับสถานะลิงก์ต่างๆ มีดังนี้ -
| สถานะลิงก์ | สี |
|---|---|
| ใช้งานอยู่ | #EE0000 |
| โฟกัส | #5E9ED6 หรือเฉดสีน้ำเงินที่คล้ายกันในกรณีของ Windows และ Mac #F07746 เค้าร่างสำหรับ Linux ในขณะที่สีข้อความยังคงเหมือนเดิม |
| วางเมาส์เหนือ | #0000EE |
| ลิงค์ | #0000EE |
| เข้าชมแล้ว | #551A8B |
หมายเหตุ − สีข้างต้นอาจเปลี่ยนไปตามเบราว์เซอร์เวอร์ชันใหม่กว่า สำหรับการทำงานที่เหมาะสม ลำดับของตัวเลือกหลอกจะได้รับโดย:- :link, :visited, :hover, :active
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงรูปแบบลิงก์มาตรฐาน
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
}
</style>
</head>
<body>
<h2>Learn JDBC</h2>
<a href="">Click here</a>
<br/><br/>
<a href="#">And here <img src="https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg"></a>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
สถานะลิงก์ที่ใช้งานอยู่จะแสดงในผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
#one {
color: black;
text-decoration: none;
}
#two {
font-style: italic;
box-shadow: inset 0 0 8px coral;
}
table, td {
font-size: 1.4em;
padding: 8px;
text-align: center;
border: thin solid;
}
</style>
</head>
<body>
<table>
<tr>
<td><a id="one" href="#">1</a>(non standard link)</td>
<td id="two"><a href="#">2</a></td>
</tr>
<tr>
<td><a href="">3</a></td>
<td><a href="#">4</a></td>
</tr>
</table>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
เมื่อเราคลิก "2" เราจะได้ผลลัพธ์ดังต่อไปนี้
