آموزش پیوندهای CSS

11 جولای 2021

با CSS ، پیوندها را می توان به روش های مختلفی استایل داد.



پیوندهای یک ظاهر طراحی شده

لینک ها می تواند با هر ویژگی CSS (مثال مدل دهید color، font-family، background، و غیره).

مثال

a {
  color: hotpink;
}

علاوه بر این ، بسته به اینکه در چه وضعیتی قرار دارند ، پیوندها می توانند به گونه ای متفاوت طراحی شوند.

چهار حالت پیوند عبارتند از:

  • a:link – یک لینک عادی و بازدید نشده
  • a:visited – پیوندی که کاربر از آن بازدید کرده است
  • a:hover – یک لینک وقتی کاربر روی آن موشک می زند
  • a:active – پیوند لحظه کلیک روی آن

مثال

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

هنگام تنظیم سبک برای چندین حالت پیوند ، برخی از قوانین ترتیب وجود دارد:

  • a: hover باید بعد از a: link and a: بازدید شده بیاید
  • a: فعال باید بعد از a: شناور بیاید

تزیین متن

این 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;
}

مثالهای بیشتر

مثال

این مثال نحوه افزودن سبک های دیگر به پیوندها را نشان می دهد:

a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}

مثال

مثال دیگری از نحوه ایجاد جعبه ها / دکمه های لینک:

a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}

مثال

این مثال انواع مختلف نشانگرها را نشان می دهد (می تواند برای لینک ها مفید باشد):

<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.