استایل لینک در CSS آموزش کامل link در CSS

یکی از پرکاربردترین موارد در صفحات وب ، لینک ها هستند آموزش کامل link.
از اینرو در این مقاله به رابطه لینک ها و CSS و همچنین نحوه تنظیم استایل های CSS لینک ها می پردازیم.
چگونه می توان به لینک ها در طراحی صفحات وب ، استایل خاصی بخشید؟

آموزش کامل link

استایل لینک در CSS – آموزش کامل link در CSS

در صفحات مختلف فضای وب با لینک (Hyperlink یا ابرپیوند) آشنا هستیم
که با بردن نشانه گر (ماوس) روی آنها به فرض رنگ متن تغییر می کند و یا پس از بازدید از صفحه ارجاع داده شده
متن لینک به رنگ دیگری نشان داده می شود، جالب است که تمام این ویژگی ها با کمک خواص CSS خلق می شوند
که در ادامه آموزش کامل link پیش رو به آن خواهیم پرداخت،
یادآور می شویم آموزش های CSS و HTML به هم مرتبط هستند لذا اگر نکته ای در خصوص نحوه تعریف لینک ها به نظر مبهم است
لطفا جهت جلوگیری از سردرگمی ابتدا به آموزش های مقدماتی HTML مراجعه شود.

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

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

آموزش کامل link

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

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

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

<style>
p {
    font-size:18px;
    color:#aaa;
}
</style>
<p>پاراگراف سون ریپلای</p>
<p>پاراگراف </p>
<p>پاراگراف وبسایت سون ریپلای</p>

<style>

p {

font-size:18px;

color:#aaa;

}

</style>

<p>پاراگراف سون ریپلای</p>

<p>پاراگراف </p>

<p>پاراگراف وبسایت سون ریپلای</p>

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

دوست عزیز پیشنهاد میشه این مطلب را هم ببینید

آموزش border در css

بررسی برخی لینک‌ها در css

در بخش «ایجاد هایپرلینک در HTML — راهنمای کاربردی» با شیوه پیاده‌سازی لینک‌ها در HTML آشنا شدیم.
در این مقاله می‌خواهیم بر مبنای آن دانش، بهترین روش‌های استایل‌بندی لینک‌ها را مورد بررسی قرار دهیم.

آموزش لینک ها در css

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

نخستین چیزی که باید درک کنیم، مفهوم حالت لینک است.

شما میتوانید رنگ(color)،فونت (font-family) ،و پس زمینه (background) را برای لینک ها در css شخصی سازی کنید.

همچنین میتوانید تنظیمات زیر را در بخش کدهای css روی لینک هایتان اعمال کنید. این تغییرات مربوط به ظاهر لینک و عملکرد آنها در هنگام حرکت و کلیک ماوس است.

لینک می‌تواند حالت‌های مختلفی داشته باشد که می‌توان با استفاده از شبه‌کلاس‌های مختلف آن را استایل‌بندی کرد:

Link (لینک بازدید نشده) – حالت پیش‌فرض لینک است و زمانی که حالت دیگری وجود نداشته باشد از این حالت استفاده می‌شود. این حالت را می‌توان به صورت اختصاصی با استفاده از شبه‌کلاس ‎:link استایل‌بندی کرد.
Visited (‌بازدید شده) – لینکی است که قبلاً از آن بازدید کرده‌ایم و سوابق آن در تاریخچه مرورگر وجود دارد. این حالت با استفاده از شبه‌کلاس ‎:visited استایل‌بندی می‌شود.
Hover‌ (قرار گرفتن ماوس روی لینک) – این حالت زمانی استفاده می‌شود که اشاره‌گر ماوس کاربر روی لینک برود و با استفاده از شبه‌کلاس ‎:hover استایل‌بندی می‌شود.
Focus (فوکوس) – حالتی است که لینک فوکوس صفحه وب را می‌گیرد. برای نمونه ممکن است کاربر با زدن کلید Tab یا هر کلید دیگری روی لینک برسد و یا به صورت برنامه‌نویسی‌شده با استفاده از دستور HTMLElement.focus()‎ فوکوس بگیرد. این حالت با استفاده از شبه‌کلاس ‎:focus استایل‌بندی می‌شود.
Active (فعال) – لینکی است که فعال شده، یعنی روی آن کلیک شده است و با استفاده از شبه‌کلاس ‎: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 {
    color: #999;
}
</style>
<a href="https://7reply.com" title="سون ریپلای" target="_self">آموزش رایگان اکسل | آموزش رایگان وردپرس | آموزش طراحی سایت</a>

<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 {

color: #999;

}

</style>

<a href="https://7reply.com" title="سون ریپلای" target="_self">آموزش رایگان اکسل | آموزش رایگان وردپرس | آموزش طراحی سایت</a>

میتوانید نمونه ها را از اینجا مشاهده کنید.

دوست عزیز پیشنهاد میشه این مطلب را هم ببینید

آموزش ویژگی border-radius در css

اگر بخواهید از چند استایل به طور همزمان برای یک لینک استفاده کنید. باید این قوانین را رعایت کنید:

۱- a: hover باید بعد از a:link و a:visited کدنویسی شود.
۲- a:active باید بعد از a:hover کدنویسی شود.

به کاربرد این سلکتورها

سلکتورهای مربوط به لینک باید به صورت ذکر شده در مثال بالا به ترتیب تعریف شوند در غیر اینصورت برخی ویژگی های مورد نظر عمل نخواهند کرد.

در اغلب موارد به جزء حالت a یا a:link و a:hover استفاده از سایر سلکتورها اختیاری است و بستگی به هدف و سلیقه برنامه نویس دارد.

نکته: در حالت عادی صرفا خاصیت های سلکتور a:visited برای لینکی که محتوای آن قبلا دیده شده باشد اعمال می شود،
در صورتی که این سلکتور تعریف نشده یا محتوایی نداشته باشد، خاصیت های سلکتور a یا a:link اعمال خواهند شد.

لینک در CSS

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

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

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}

none: برای حالت عادی (بدون خط).
overline: برای حالتی که خط در قسمت بالای لینک ترسیم می شود.
underline: برای حالتی که خط در زیر لینک ترسیم می شود.
line-through: برای ایجاد لینکی که روی آن خط کشیده شده یا خطی از وسط آن گذشته است.

صفت background-color

از صفت background-color برای مشخص کردن رنگ پس زمینه ی یک لینک استفاده میشود :

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

a:link {

background-color: yellow;

}

a:visited {

background-color: cyan;

}

a:hover {

background-color: lightgreen;

}

a:active {

background-color: hotpink;

}

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

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

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

دوست عزیز پیشنهاد میشه این مطلب را هم ببینید

آموزش کار با ویژگی margin و padding در CSS

<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-7repy a:link {
        font-size: 16px;
        color: #06C;
        text-decoration: underline wavy #FF311C;
    }
    /* حالت لینک دیده شده در بلاک مورد نظر */
    .link-7repy a:visited {
        text-decoration: underline wavy #8C0011;
    }
</style>
<a href="https://7reply.com" title="سون ریپلای" target="_blank">آموزش رایگان اکسل | آموزش رایگان وردپرس | آموزش طراحی سایت</a>
<div class="link-7reply">
    <a href="https://7reply.com" title="سون ریپلای" target="_blank">آموزش رایگان اکسل | آموزش رایگان وردپرس | آموزش طراحی سایت</a>
</div>

<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-7repy a:link {

font-size: 16px;

color: #06C;

text-decoration: underline wavy #FF311C;

}

/* حالت لینک دیده شده در بلاک مورد نظر */

.link-7repy a:visited {

text-decoration: underline wavy #8C0011;

}

</style>

<a href="https://7reply.com" title="سون ریپلای" target="_blank">آموزش رایگان اکسل | آموزش رایگان وردپرس | آموزش طراحی سایت</a>

<a href="https://7reply.com" title="سون ریپلای" target="_blank">آموزش رایگان اکسل | آموزش رایگان وردپرس | آموزش طراحی سایت</a>

</div>

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

سخن پایانی

امیدواریم در این مقاله هر آن چه برای یادگیری استایل‌بندی لینک‌ها لازم است را آموخته باشید.

میانگین امتیازات ۴ از ۵

از مجموع ۶ رای

نظر یا سوال شما در این مورد چیست؟ انصراف

پژوهشگر 2021/05/09

سلام من میخواهم کلاس navigation رو وقتی یک url مشخص لود شده تغییر بدم.
مثلا محتوای navigation در صفحه ی index.php نمایش داده نشه !
خیلی تو اینترنت گشتم چیزی پیدا نکردم.

پاسخ

زمان الله ابراهیمی 2021/05/09

سلام خدمت شما دوست گرامی برای این کار گه از زبان html استفاده می کنید از جاوا اسکریپت کمک بگیرید
در غیر این صورت اگه از php استفاده می کنید از کد های شرطی php استفاده نمایید موفق باشید

پژوهشگر 2021/06/09

سلام شما خیلی راحت میگین که همچین کدی نداریم و با css نمیشه
اما من خیلی سخت بهش رسیدم و با اینکه برنامه نویس نیستم راحش رو پیدا کردم
فقط کافیه تو صفحه ای که نمی خواهیم اون المنت یا بلوک نمایش داده بشه و در قسمت این کد رو بذاریم :

.navigation {display: none;}

مثال در مورد کلاس navigation در صفحه ی index.php

{$mybb->settings[‘bbname’]}
{$headerinclude}

no_new_posts}”;
lang.click_mark_read = “{$lang->click_mark_read}”;
// –>

{$header}
{$boardstats}
{$quicksearch}
{$forums}
{$sidebar}

{$footer}

من کد css رو در قسمت head نوشتم ولی بعد از ارسال پاسخ نمی دونم چرا ادیتور سایت شما اون رو این شکلی نوشته ؟!
فقط کافیه کلاس مورد نظر رو در قسمت head بنویسید.
style شروع
.navigation display: none; کلاس یا آیدی مورد نظر
style پایان

zhr 2021/29/07

من روی لینکم ک کلیک میکنم رنگش تغییر میکنه چیکار کنم تغییر نکنه یعنی همون رنگ اول خودشو داشته باشه

ftmlh 2021/29/07

وقتی روی لینکم کلیک میکنم رنگش تغییر میکنه چیکار کنم تا تغییر نکنه

زمان الله ابراهیمی 2021/29/07

سلام خدمت شما دوست گرامی hover را کترل فرمایید