HTML:رنگ‌های لینک

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷نقشه‌های تصویری
۱۸تصاویر پس‌زمینه
۱۹عنصر Picture
۲۰جداول
۲۱لیست‌ها
۲۲بلوک‌ها
۲۳کلاس‌ها
۲۴شناسه
۲۵Iframeها
۲۶جاوا اسکریپت
۲۷مسیرهای فایل
۲۸Head
۲۹چیدمان‌ها
۳۰واکنش‌گرا
۳۱کد کامپیوتری
۳۲معنایی‌ها
۳۳موجودیت‌ها
۳۴نماد‌ها
۳۵ایموجی‌ها
۳۶مجموعه کاراکترها
۳۷رمزگذاری URL
۳۸HTML X
۳۹راهنمای استایل
فرم‌های 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 ما بازدید کنید.


منابع آموزشی