• صفحه اصلی
  • هاست حرفه ای
    • هاست مخصوص وردپرس
    • هاست سی پنل آلمان
    • هاست سی پنل ایران
    • هاست نمایندگی
    • هاست دانلود
    • هاست ربات تلگرام
    • هاست آزمایشی
  • سرور مجازی
    • سرور مجازی پر سرعت SSD
    • سرور مجازی با هارد HDD
  • قالب وردپرس vip رایگان
    • فروشگاهی
    • همه منظوره
    • شرکتی
    • مشاهده همه موضوعات
  • گواهی SSL
  • دامنه
    • جستجو و ثبت دامنه
    • هزینه ثبت دامنه ها
  • پشتیبانی
    • ارسال درخواست پشتیبانی
    • ارتباط با ما / درباره ما
    • آموزش هاستینگ
    • آموزش HTML
    • قوانین
    • کسب درآمد در آپ وب
ورود به سایت
✕

تغییر رنگ لینک ها در HTML

اموزش html

تغییر رنگ لینک های HTML

یک پیوند HTML بسته به اینکه آیا از آن بازدید شده است ، بازدید نشده است یا فعال است ، در رنگ های متفاوت نمایش داده می شود.

طراحان سایت برای تغییر رنگ و مشخصه های لینکهای یک وب سایت در بیشتر مواقع از CSS استفاده می کنند بدلیل اینکه راحت تر بوده و دارای انعطاف پذیری بیشتری نسبت به کدهای HTML می باشد .

رنگ لینک ها در HTML

به طور پیش فرض لینک ها با رنگبندی در حالت های زیر ظاهر میشوند:

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

با استفاده از CSS می توانید رنگ وضعیت پیوند را تغییر دهید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
/* حالت عادی لینک */
a:link {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #06C;
    text-decoration: none;
}
/* حالت لینک دیده شده */
a:visited {
    color: #C30;
}
/* حالت لینک فعال */
a:hover {
    color: #008CC7;
}
/* حالت لینک در لحظه ای که روی آن کلیک می کنیم */
a:active {
    background-color: #999;
}
</style>
<a href="https://upweb.ir" title="آپ وب" target="_self">ارائه دهنده هاست پرسرعت وقدرتمند</a>


قبل از کلیک کردن لینک به رنگ قرمز میباشد:

بعد از کلیک کردن لینک به رنگ آبی میباشد:

دکمه های پیوند

پیوند را می توان با استفاده از CSS به عنوان یک دکمه تنظیم کرد:

مثال:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
 
a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>
 
<h2>دکمه های پیوند</h2>
<p>:پیوندی که به عنوان یک دکمه طراحی شده است</p>
<a href="https://upweb.ir" target="_blank">این یک پیوند است</a>
 
</body>
</html>

مطالب مرتبط

اموزش html
3 خرداد 1401

آموزش طرح بندی و تکنیک های چیدمان عناصر HTML


ادامه مطلب
اموزش html
28 اردیبهشت 1401

آموزش استفاده از تگ Head در HTML بصورت جامع


ادامه مطلب
اموزش html
14 اردیبهشت 1401

آموزش آدرس دهی به فایل ها در HTML بصورت جامع


ادامه مطلب

آپ وب خانه امن رویاهای آنلاین شما


خرید هاست و ثبت دامنه پیش نیاز برای ایجاد سایت میباشد. سرعت بارگزاری هاست و اپتایم نقش مهمی در سئو سایت دارد. آپ وب تلاش میکند بهترین کیفیت هاست را برای شما ایجاد کند.

آپ وب با بیش از 8 سال سابقه در کنار شماست.

نماد اعتماد الکترونیکی


خرید هاست



ارسال تیکت

ارتباط با ما


شماره تماس: 33854475-013
info@upweb.ir

نیاز به پشتیبانی دارید؟

اگر سوالی دارید از طریق تیکت به پشتیبان مطرح نمایید.


ارتباط با ما
© 2022 تمام حقوق برای شرکت هاستینگ آپ وب محفوظ می باشد.
ورود به سایت