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

[saberi]

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

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

تعریف یک لینک در html

همانطور که قبلا گفتیم، css به خودی خود کاربردی ندارد و در کنار تگ های html است که قدرت آن مشخص می شود، لذا وقتی صحبت از تنظیم لینک در css است، باید ابتدا ببینیم که اصلا لینک در html چگونه تعریف می شود؛ یک لینک (hyperlink) در html با تگ href و a تعریف می شود و با افزودن کلاس (class) یا آی دی (id) به آن، یا قرار دادن لینک، درون یک بلاک دیگر که از (class) و آی دی (id) در css پیروی می کند، با خواص ظاهری تنظیم می شود که در زیر نمونه ای از کاربرد آن را ملاحظه می کنید.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

تعریف خواص لینک در css

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

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

اکثر مرورگرها در حالت پیش فرض، زیر لینک (hyperlink) های وب خطی افقی را ترسیم می کنند که شاید از لحاظ ظاهری جلوه خوبی نداشته باشد، خوشبختانه در css عنصری به نام text-decoration وجود دارد که به کمک آن و با افزودن مقادیر none، می توان لینک هایی با ظاهری بهتر ایجاد کرد، مقادیری که به text-decoration مربوط می شوند عبارتند از: blink برای لینک های چشمک زن، line-through برای ایجاد لینکی که روی آن خط کشیده شده یا خطی از وسط آن گذشته است، none برای حالت عادی، overline برای حالتی که خطی در قسمت بالای لینک ظاهر می شود و underline برای حالتی که خطی در زیر لینک وجود دارد، به مثال زیر توجه کنید.

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

استفاده از color و background-color در تنظیم css لینک

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

استفاده از (class) یا آی دی (id) در تنظیم لینک در css

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

با این کار لینک های موجود در این بلاک از کلاس آن پیروی کرده و ویژگی های آن را به خود می گیرند.

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *