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