نحوه تنظیم استایل لینک (Link) در CSS

تعریف لینک (Link) در HTML

همانطور که قبلا گفتیم CSS به خودی خود کاربردی ندارد و در ترکیب با تگ های HTML نقش و قدرت آن مشخص می شود به همین دلیل وقتی صحبت از تنظیم استایل لینک در CSS است باید ابتدا ببینیم که لینک در HTML چگونه تعریف می شود، در آموزش های مقدماتی دیدیم که لینک (Hyperlink یا ابرپیوند) در HTML با تگ a و صفت href تعریف می شود، مثال:

<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>

این مثال نمونه یک لینک متنی عادی در وب است که بدون تعریف استایل CSS به صورت پیش فرض در مرورگر پردازش و نمایش داده خواهد شد.

تنظیم استایل لینک در CSS

در آموزش های قبل دیدیم که برای اعمال خاصیت های CSS بر روی تگ های هدف در HTML از مفهومی تحت عنوان سلکتور (Selector) بهره می بریم به فرض استایل زیر بر روی تمام تگ های p در صفحه اعمال خواهد شد:

<style>
p {
    font-size:16px;
    color:#818181;
}
</style>
<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>
<p>پاراگراف سوم</p>

عبارت p در این مثال یک سلکتور در CSS است که تمام تگ های p را در صفحه HTML جهت اعمال جلوه های ظاهری مورد نظر هدف قرار می دهد، با این توضیح سلکتوری که برای لینک در CSS استفاده می شود مشابه با نمونه بالا سلکتور a است که بر روی تمام تگ های a در صفحه اعمال می شود، البته این سلکتور بر حسب نیاز حالت ها و زیرمجموعه هایی دارد که در ادامه بررسی خواهیم کرد.
لینک در وب به طور معمول در چند حالت مختلف می تواند جلوه ظاهری متفاوتی داشته باشد، به طور مثال در حالت عادی که ماوس را روی آن نبرده ایم ممکن است رنگ لینک به فرض آبی باشد اما پس از اینکه ماوس را به منظور کلیک کردن روی لینک می بریم به رنگ دیگری درآید یا پس از دیدن صفحه ارجاع داده شده رنگ لینک به صورت ثابتی تغییر کند، همچنین موقعی که بر روی لینک کلیک می کنیم و پیش از انتقال به آدرس ارجاعی در لحظه ای کوتاه ظاهری متفاوت داشته باشد، به هر صورت تمام این ویژگی ها در CSS با سلکتورهای مربوط به لینک قابل ایجاد هستند، این سلکتورها عبارتند از:
- a یا a:link برای حالت عادی (زمانی که هنوز بر روی لینک کلیک نکرده ایم و صفحه ارجاعی لینک دیده نشده است).
- a:visited برای حالتی که صفحه مربوط به آن لینک دیده شده است.
- a:hover برای حالتی که ماوس را روی لینک می بریم.
- a:active برای لحظه ای که روی لینک کلیک می کنیم.
به کاربرد این سلکتورها در مثال زیر دقت کنیم:

<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://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>

توضیح:
- سلکتورهای مربوط به لینک باید به صورت ذکر شده در مثال بالا به ترتیب تعریف شوند در غیر اینصورت برخی ویژگی های مورد نظر عمل نخواهند کرد.
- در اغلب موارد به جزء حالت a یا a:link و a:hover استفاده از سایر سلکتورها اختیاری است و بستگی به هدف و سلیقه برنامه نویس دارد.
نکته: در حالت عادی صرفا خاصیت های سلکتور a:visited برای لینکی که محتوای آن قبلا دیده شده باشد اعمال می شود، در صورتی که این سلکتور تعریف نشده یا محتوایی نداشته باشد، خاصیت های سلکتور a یا a:link اعمال خواهند شد.

استفاده از خاصیت text-decoration در تنظیم استایل CSS لینک

اکثر مرورگرها در حالت پیش فرض عبارات متنی لینک شده را به صورت زیرخط نمایش می دهند که شاید از لحاظ ظاهری جلوه خوبی نداشته باشد، خوشبختانه در CSS خاصیتی تحت عنوان text-decoration وجود دارد که به کمک آن و با افزودن مقادیر می توانیم لینک هایی با ظاهری بهتر و سفارشی شده تعریف کنیم، در خصوص text-decoration در آموزش قبل به صورت مفصل صحبت کردیم، گفتیم مقادیر اصلی که برای خاصیت text-decoration قابل استفاده هستند عبارتند از:
- none: برای حالت عادی (بدون خط).
- overline: برای حالتی که خط در قسمت بالای لینک ترسیم می شود.
- underline: برای حالتی که خط در زیر لینک ترسیم می شود.
- line-through: برای ایجاد لینکی که روی آن خط کشیده شده یا خطی از وسط آن گذشته است.
- blink: برای ایجاد لینک های چشمک زن (این خاصیت در حال حاضر منسوخ شده و در اغلب مرورگرها پشتیبانی نمی شود، در ادامه آموزش حاضر در خصوص شیوه جایگزین ایجاد جلوه لینک چشمک زن و استفاده از انیمیشن در CSS صحبت خواهیم کرد).
برای خاصیت هایی که شامل خط (line) می شوند می توانیم از مقادیر استایل زیر در کنار مقادیر اصلی برای تعیین جلوه ظاهری خط ترسیم شده استفاده کنیم:
- solid: خط عادی (حالت پیش فرض).
- double: خط دوتایی.
- dotted: خط نقطه چین.
- dashed: خط تیره (فاصله).
- wavy: خط موج دار.
علاوه بر این در حالت ترسیم خط می توانیم از مقادیر رنگی مجاز CSS (کدهای Hex، RGB، HSL و رنگ های با نام مانند red، green، blue، lime و...) نیز برای تعیین رنگ خط استفاده کنیم، مثال:

<style>
/* حالت عادی لینک */
a:link {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #06C;
    text-decoration: dotted underline #C110D9;
}
/* حالت لینک دیده شده */
a:visited {
    color: #C30;
}
/* حالت لینک فعال */
a:hover {
    color: #008CC7;
    text-decoration: dashed overline underline #4910D3;
}
/* حالت لینک در لحظه ای که روی آن کلیک می کنیم */
a:active {
    background-color: #999;
}
</style>
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>

نکته: همانطور که در نمونه کد مشخص است برخی از خواص لینک ها در سلکتور اول یعنی a یا a:link تعریف می شوند و در سلکتورهای بعدی نیازی به تعریف مجدد آنها نیست و از همان تنظیمات پیروی می کنند یا به اصطلاح ارث می برند، مانند font-family یا font-size در مثال بالا.

ایجاد لینک چمک زن با استفاده از خاصیت animation در CSS

گفتیم که خاصیت blink به دلایلی توسط کنسرسیوم جهانی وب W3C منسوخ شده و در اغلب مرورگرهای امروزی پشتیبانی نمی شود، برای ایجاد این حالت می توانیم از شیوه جایگزین و خاصیت animation در CSS استفاده کنیم، مثال:

<style>
blink, .blink {
    animation: blink 1s step-end infinite;
    -webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-moz-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-o-keyframes blink {
    80% {
        opacity: 0;
    }
}
@keyframes blink {
    80% {
        opacity: 0;
    }
}
</style>
<a class="blink" href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>

جزئیات خاصیت animation باید در جای خود آموزش داده شود اما در گام فعلی در این حد بدانیم که می توانیم با نمونه استایل بالا در صفحات HTML لینک چمک زن ایجاد نمود.

استفاده از خاصیت color و background در تنظیم استایل CSS لینک

از جمله خاصیت های CSS دیگری که می توانیم بر روی تگ a اعمال کنیم خاصیت های مرتبط با رنگ و پس زمینه لینک های متنی است، در رابطه با این خاصیت ها در آموزش های گذشته به صورت مفصل صحبت کردیم، در اینجا به ذکر یک مثال بسنده می کنیم:

<style>
/* حالت عادی لینک */
a:link {
    color: #FFFFFF;
    background: #234AB5;
}
/* حالت لینک دیده شده */
a:visited {
    color: #FFFFFF;
}
/* حالت لینک فعال */
a:hover {
    color: #000000;
    background: #DAE3FF;
}
</style>
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>

این خاصیت ها صرفا بر روی لینک های متنی (نه تصویر) قابل اعمال هستند.

استفاده از آی دی (ID) و کلاس (Class) در تنظیم استایل لینک در CSS

گاهی در طراحی و برنامه نویسی صفحات وب نیاز است که استایل لینک های یک بخش و بلاک را از سایر بخش ها متمایز کنیم یا الگویی را به دفعات در سایت خود استفاده کنیم به طور مثال قسمت لینک باکس یا قسمت لینک دوستان را به رنگ و ظاهری متفاوت نشان دهیم، در این مواقع تعریف لینک ها در حالت عادی و با سلکتور کلی a کاربرد ندارد، این سلکتور فقط حالتی کلی و پیش فرض برای لینک هایی که آی دی و کلاس برایشان تعریف نشده است را نشان می دهد، بر اساس قانون اولویت ها در CSS سلکتور آی دی و کلاس مقدم بر سلکتور عمومی نام تگ است، به این ترتیب برای هر آی دی یا کلاس در CSS باید عناصر مربوط به سلکتور a:link و زیر مجموعه های مورد نیاز آن را اضافه کنیم، مثال زیر گویا است.
ابتدا استایلی برای کلاس تعریف می کنیم:

<style>
/* حالت عادی لینک */
a:link {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #06C;
    background: #CCCCCC;
    text-decoration: none;
}
/* حالت لینک دیده شده */
a:visited {
    color: #C30;
    background: #C0C0C0;
}
/* حالت عادی لینک در بلاک مورد نظر */
.link a:link {
    font-size: 16px;
    color: #06C;
    text-decoration: underline wavy #FF311C;
}
/* حالت لینک دیده شده در بلاک مورد نظر */
.link a:visited {
    text-decoration: underline wavy #8C0011;    
}
</style>

سپس کلاس را به بلاکی نسبت داده و لینک را درون آن درج می کنیم:

<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
<div class="link">
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
</div>

با این کار لینک های موجود در بلاک div فرضی link از سلکتور ترکیبی کلاس تعیین شده پیروی کرده و ویژگی های آن را به خود می گیرند اما سایر لینک های موجود در صفحه صرفا از خاصیت های سلکتور کلی a و زیرمجموعه های آن پیروی می کنند.

پیش نمایش آنلاین

برای جمع بندی آموزش نحوه تنظیم استایل لینک (Link) در CSS نمونه کد زیر را به همراه پیش نمایش آنلاین آن بررسی می کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از CSS برای تنظیم استایل لینک</title>
<!-- Webgoo.ir -->
</head>
<body>
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 22px;    
}
/* حالت عادی لینک */
a:link {
    color: #06C;
    text-decoration: dotted underline #C110D9;
}
/* حالت لینک دیده شده */
a:visited {
    color: #C30;
}
/* حالت لینک فعال */
a:hover {
    color: #008CC7;
    text-decoration: dashed overline underline #4910D3;
}
/* حالت لینک در لحظه ای که روی آن کلیک می کنیم */
a:active {
    background-color: #999;
}
blink, .blink {
    animation: blink 1s step-end infinite;
    -webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-moz-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-o-keyframes blink {
    80% {
        opacity: 0;
    }
}
@keyframes blink {
    80% {
        opacity: 0;
    }
}
/* حالت عادی لینک در بلاک مورد نظر */
.link a:link {
    font-size: 16px;
    color: #06C;
    text-decoration: underline wavy #FF311C;
    padding: 4px;
    background: #E7E7E7;
}
/* حالت لینک دیده شده در بلاک مورد نظر */
.link a:visited {
    text-decoration: underline wavy #8C0011;    
}
</style>
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a><br>
استایل این لینک از خاصیت های سلکتور a پیروی می کند.
<hr>
<a class="blink" href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a><br>
استایل این لینک علاوه بر سلکتور a از خاصیت های کلاس تعریف شده blink پیروی می کند، برای ایجاد حالت لینک چمک زن از خاصیت animation در CSS بهره برده ایم.
<hr>
<div class="link">
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a><br>
</div>
استایل این لینک در بلاک div با کلاس فرضی link درج شده و از خاصیت های این کلاس در کنار سلکتور a پیروی می کند.
</body>
</html>

پیش نمایش آنلاین