CSS লিঙ্ক

CSS-এর মাধ্যমে, লিঙ্ককে বিভিন্ন পদ্ধতিতে শৈলীকরণ করা যেতে পারে。

টেক্সট লিঙ্ক টেক্সট লিঙ্ক লিঙ্ক বাটন লিঙ্ক বাটন

লিঙ্ক শৈলী নির্ধারণ

লিঙ্ক একক ক্যাস অপরিবর্তনীয় গুণ (যেমন color、font-family、background ইত্যাদি) শৈলী নির্ধারণ করার জন্য ব্যবহৃত হয়。

উদাহরণ

a {
  color: hotpink;
}

亲自试一试

এছাড়া, লিঙ্ককে কী অবস্থাতে থাকছে তার ভিত্তিতে লিঙ্কের ভিন্ন শৈলী নির্ধারণ করা যেতে পারে。

চারটি লিঙ্ক অবস্থা হল:

  • a:link - সাধারণ, অবব্যবহৃত লিঙ্ক
  • a:visited - ব্যবহারকারী যেখানে এসেছে
  • a:hover - ব্যবহারকারী মাউসকে লিঙ্কের উপর স্থানান্তরিত করলে
  • a:active - লিঙ্ক ক্লিক করা হলে

উদাহরণ

/* অবব্যবহৃত লিঙ্ক */
a:link {
  color: red;
}
/* ব্যবহৃত লিঙ্ক */
a:visited {
  color: green;
}
/* মাউস লিঙ্কের উপর স্থানান্তরিত হওয়ার সময় */
a:hover {
  color: hotpink;
}
/* বাছাইকৃত লিঙ্ক */
a:active {
  color: blue;
}

亲自试一试

একাধিক লিঙ্ক অবস্থার জন্য শৈলী নির্ধারণ করার জন্য নিম্নোক্ত ক্রমবর্ধমান নিয়ম অনুসরণ করুন:

  • a:hover অবশ্যই a:link এবং a:visited-এর পরে থাকতে হবে
  • a:active অবশ্যই a:hover-এর পরে থাকতে হবে

টেক্সট ডেকরেশন

text-decoration এই গুণগুলি লিঙ্ক থেকে হাইলাইন বাদ দেওয়ার জন্য মূলত ব্যবহৃত হয়:

উদাহরণ

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

亲自试一试

ব্যাকগ্রাউন্ড কালা

background-color এই গুণগুলি লিঙ্কের ব্যাকগ্রাউন্ড কালার নির্দিষ্ট করার জন্য ব্যবহৃত হয়:

উদাহরণ

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

亲自试一试

লিঙ্ক বাটন

এই উদাহরণে আমরা একটি আরও উচ্চতর উদাহরণ দেখিয়েছি, যেখানে আমরা একাধিক CSS অপরিবর্তনীয় গুণ সম্মিলিত করেছি, যাতে লিঙ্ককে বক্স/বাটন হিসাবে দেখানো হয়:

উদাহরণ

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

亲自试一试

更多实例

为超链接添加不同的样式
本例演示如何向超链接添加其他样式。
高级 - 创建带边框的链接按钮
这是如何创建链接框/按钮的另一个例子。
改变光标
cursor 属性指定要显示的光标类型。本例演示了不同类型的光标（对链接有用）。