رنگ‌های لینک

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

بطور پیش‌فرض، لینک (در همه مرورگرها) به شکل زیر ظاهر می‌شود:[۱]

  • یک لینک دیده نشده، زیر آن خط کشیده شده و آبی رنگ است
  • یک لینک دیده شده، زیر آن خط کشیده شده و به رنگ بنفش است
  • یک لینک فعال، زیر آن خط کشیده شده و قرمز است

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

مثال

 1 <style>
 2 a:link {
 3   color: green;
 4   background-color: transparent;
 5   text-decoration: none;
 6 }
 7 
 8 a:visited {
 9   color: pink;
10   background-color: transparent;
11   text-decoration: none;
12 }
13 
14 a:hover {
15   color: red;
16   background-color: transparent;
17   text-decoration: underline;
18 }
19 
20 a:active {
21   color: yellow;
22   background-color: transparent;
23   text-decoration: underline;
24 }
25 </style>

مشاهدهٔ نتیجه

کلید‌های لینک

همچنین می‌توان لینک را با استفاده از CSS بصورت یک کلید طراحی کرد:

This is a link

مثال

 1 <style>
 2 a:link, a:visited {
 3   background-color: #f44336;
 4   color: white;
 5   padding: 15px 25px;
 6   text-align: center;
 7   text-decoration: none;
 8   display: inline-block;
 9 }
10 
11 a:hover, a:active {
12   background-color: red;
13 }
14 </style>

مشاهدهٔ نتیجه

برای کسب اطلاعات بیشتر در مورد CSS، به آموزش CSS ما بروید.

تگ های لینک HTML

تگ تعریف
<a> یک ابر لینک تعریف می‌کند

برای دستیابی به لیست کامل همه تگ‌های HTML، از مرجع تگ‌های HTML ما بازدید کنید.


منابع آموزشی