हम अपनी आवश्यकताओं के अनुसार लिंक को स्टाइल कर सकते हैं। यह अनुशंसा की जाती है कि लिंक में ऐसी शैलियाँ हों जो उन्हें सामान्य पाठ से अलग करती हैं। विभिन्न लिंक राज्यों के लिए डिफ़ॉल्ट लिंक शैलियाँ इस प्रकार हैं -
| लिंक स्टेट | <थ>रंग|
|---|---|
| सक्रिय | #EE0000 |
| फोकस करें | #5E9ED6 या विंडोज और मैक के मामले में नीले रंग की रूपरेखा की एक समान छाया, #F07746 Linux के लिए रूपरेखा जबकि पाठ का रंग समान रहता है |
| होवर करें | #0000EE |
| लिंक | #0000EE |
| विज़िट किया | #551A8B |
नोट -उपरोक्त रंग ब्राउज़र के नए संस्करणों के साथ बदल सकते हैं। उचित कार्यक्षमता के लिए, छद्म चयनकर्ताओं का क्रम निम्नलिखित द्वारा दिया जाता है:- :लिंक, :विजिटेड, :होवर, :सक्रिय।
उदाहरण
निम्नलिखित उदाहरण मानक लिंक शैलियों को दर्शाते हैं
<!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" पर क्लिक करते हैं, हमें निम्न आउटपुट मिलता है
