আমরা লিংকগুলোকে প্রয়োজনমতো স্টাইল করতে পারি। সুপারিশ করা হয় যে লিংকগুলো এমন স্টাইল থাকা উচিত যাতে সেগুলো সাধারণ টেক্সট থেকে আলাদা দেখা যায়। বিভিন্ন লিংক স্টেটের ডিফল্ট লিংক স্টাইল নিচে দেওয়া হলো:
| Link State | Color |
|---|---|
| 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"-এ ক্লিক করলে নিচের আউটপুট:
