কম্পিউটার

CSS ব্যবহার করে লিঙ্কের রঙ সেট করা


CSS আমাদের লিঙ্কগুলিকে রঙ করার অনুমতি দেয়। রঙের বৈশিষ্ট্যটি একটি উপাদানে পাঠ্যের রঙ সেট করতে ব্যবহৃত হয়।

ছদ্ম নির্বাচকদের ক্রম এর দ্বারা দেওয়া হয়:- :link, :visited, :hover, :active.

সিনট্যাক্স

CSS কালার প্রপার্টির সিনট্যাক্স নিম্নরূপ −

Selector {
   color: /*value*/
}

উদাহরণ

নিম্নলিখিত উদাহরণগুলি CSS রঙের বৈশিষ্ট্য −

চিত্রিত করে
<!DOCTYPE html>
<html>
<head>
<style>
#demo::after {
   content: " (visited) ";
   font-style: italic;
}
a:link {
   color: lime;
}
a:visited {
   color: green;
}
a:hover {
   color: orange;
}
a:active {
   color: gold;
}
</style>
</head>
<body>
<h2>Demo Links</h2>
<a id="demo" href="">This is demo text 1.</a>
<hr>
<p>
<a href="#">This is demo text 2.</a>
</p>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয় -

CSS ব্যবহার করে লিঙ্কের রঙ সেট করা

দ্বিতীয় লিঙ্কটি হোভার করার সময়, আমরা নিম্নলিখিত আউটপুট −

পাই

CSS ব্যবহার করে লিঙ্কের রঙ সেট করা

দ্বিতীয় লিঙ্কে ক্লিক করলে, আমরা নিম্নলিখিত আউটপুট −

পাই

CSS ব্যবহার করে লিঙ্কের রঙ সেট করা

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   font-size: 1.4em;
   background-color: lightseagreen;
   width: 100px;
   text-align: center;
}
a:link {
   color: rebeccapurple;
}
</style>
</head>
<body>
<div>
<a id="demo" href="">Demo link.</a>
</div>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয় -

CSS ব্যবহার করে লিঙ্কের রঙ সেট করা


  1. CSS ব্যবহার করে এলিমেন্টের টেক্সট কালার সেট করা

  2. CSS ব্যবহার করে রেডিয়াল গ্রেডিয়েন্টের আকার নির্ধারণ করা

  3. CSS ব্যবহার করে রেডিয়াল গ্রেডিয়েন্টের আকৃতি নির্ধারণ করা

  4. CSS ব্যবহার করে লোকেশন কালার স্টপ সেট করা