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

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


همانطور که قبلا گفتیم، css به خودی خود کاربردی ندارد و در کنار تگ های html است که قدرت آن مشخص می شود، لذا وقتی صحبت از تنظیم لینک در css است، باید ابتدا ببینیم که اصلا لینک در html چگونه تعریف می شود؛ یک لینک (hyperlink) در html با تگ href و a تعریف می شود و با افزودن کلاس (class) یا آی دی (id) به آن، یا قرار دادن لینک، درون یک بلاک دیگر که از (class) و آی دی (id) در css پیروی می کند، با خواص ظاهری تنظیم می شود که در زیر نمونه ای از کاربرد آن را ملاحظه می کنید.
<a href="http://webgoo.ir" title="وبگو" target="_self" class="your-css-class" id="your-css-id">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>

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


در css خواص لینک را درون کلاس ها یا آی دی ها تعریف می کنند، یک لینک در وب به طور معمول درچند حالت مختلف می تواند عملکرد مختلف داشته باشد، مثلا در حالت عادی که ماوس را روی آن نبرده اید، ممکن است رنگ آن به فرض آبی باشد، اما پس از اینکه ماوس را برای کلیک کردن روی آن می برید به رنگ دیگری درآید، یا پس از دیدن صفحه مربوط به آن لینک، رنگ آن به صورت ثابتی تغییر کند، همچنین در لحظه ای که بر روی یک لینک کلیک می کنید، ظاهری متفاوت داشته باشد، به هر صورت تمام این ویژگی ها در css با عناصر مربوط به لینک های به اصطلاح اینتراکتیو قابل ایجاد شدن هستند، این عناصر عبارتند از: a یا a:link برای حالت عادی، a:visited برای حالتی که صفحه مربوط به آن لینک دیده شده است، a:hover برای حالتی که ماوس را روی لینک می برید و a:active برای لحظه ای که روی آن لینک کلیک می کنید، به کاربرد این ویژگی ها در مثال زیر دقت کنید.
<style type="text/css">
/*حالت عادی یک لینک*/
a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#06C;
    text-decoration:none;
}
/*حالت یک لینک دیده شده*/
a:visited{
    color:#C30;
}
/*حالت یک لینک فعال*/
a:hover{
    color:#990;
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
a:active{
    background-color:#999;
}
</style>
توضیح:
- دقت کنید که عناصر مربوط به لینک باید به ترتیب ذکر شده در مثال بالا پشت سر هم و به ترتیب تعریف شوند، در غیر اینصورت ویژگی های مورد نظر عمل نخواهند کرد.
- به جزء حالت a:link، استفاده از سایر ویژگی ها اختیاری است و بستگی به هدف و سلیقه شما دارد.

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


اکثر مرورگرها در حالت پیش فرض، زیر لینک (hyperlink) های وب خطی افقی را ترسیم می کنند که شاید از لحاظ ظاهری جلوه خوبی نداشته باشد، خوشبختانه در css عنصری به نام text-decoration وجود دارد که به کمک آن و با افزودن مقادیر none، می توان لینک هایی با ظاهری بهتر ایجاد کرد، مقادیری که به text-decoration مربوط می شوند عبارتند از: blink برای لینک های چشمک زن، line-through برای ایجاد لینکی که روی آن خط کشیده شده یا خطی از وسط آن گذشته است، none برای حالت عادی، overline برای حالتی که خطی در قسمت بالای لینک ظاهر می شود و underline برای حالتی که خطی در زیر لینک وجود دارد، به مثال زیر توجه کنید.
<style type="text/css">
/*حالت عادی یک لینک*/
a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#06C;
    text-decoration:underline;
}
/*حالت یک لینک دیده شده*/
a:visited{
    color:#C30;
}
/*حالت یک لینک فعال*/
a:hover{
    color:#990;
    text-decoration:blink;
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
a:active{
    background-color:#999;
}
</style>
توضیح:
- اگر از استایل بالا در صفحه خود استفاده کنید، با نگه داشتن ماوس روی لینک، علاوه بر اینکه رنگ آن تغییر می کند، پس از اندک زمانی شروع به چشمک زدن می نماید.
- همانطور که ملاحظه می کنید، برخی خواص لینک ها در قسمت اول یعنی a:link تعریف می شوند و در عناصر بعدی نیازی به تعریف مجدد آنها نیست (و از همان تنظیمات پیروی می کنند)، مانند font-family یا font-size در مثال بالا.

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


مثل کلاس ها و آی دی ها در css، تگ های خاصی مانند a و href نیز می توانند با ویژگی های مربوط به رنگ و پس زمینه تنظیم شوند و این نمودی از انعطاف پذیری بالای css است، به دلیل اینکه در این رابطه پیش تر و در آموزش های گذشته به طور مفصل صحبت کرده ایم، در اینجا به ذکر یک مثال بسنده می کنیم.
<style type="text/css">
/*حالت عادی یک لینک*/
a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#06C;
    text-decoration:none;
    background-color:#F90;
    padding:4px;
}
/*حالت یک لینک دیده شده*/
a:visited{
    color:#C30;
}
/*حالت یک لینک فعال*/
a:hover{
    color:#FFF;
    text-decoration:blink;
    background-color:#999;
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
a:active{
    background-color:#999;
}
</style>

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


گاهی مواقع در طراحی و برنامه نویسی صفحات وب، نیاز به این داریم که لینک های یک بخش و بلاک را از سایر بخش ها متمایز کنیم، مثلا قسمت لینکدونی یا قسمت لینک دوستان را به رنگی متفاوت نشان دهیم، در این مواقع تعریف لینک ها در حالت عادی و با تگ کلی a و href کاربرد ندارد، چون این تگ ها فقط حالتی کلی و پیش فرض برای لینک هایی که هیچ کلاس یا آی دی برایشان تعریف نشده است را نشان می دهند، لذا برای هر کلاس یا آی دی در css باید عناصر مربوط به a:link و زیر مجموعه آن را اضافه کنیم، در زیر با مثالی می توانید به نحوه انجام این کار پی ببرید.
ابتدا استایلی برای کلاس تعریف می کنیم:
<style type="text/css">
/*حالت عادی یک لینک*/
.link a:link{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#06C;
    text-decoration:none;
    background-color:#F90;
    padding:4px;
}
/*حالت یک لینک دیده شده*/
.link a:visited{
    color:#C30;
}
/*حالت یک لینک فعال*/
.link a:hover{
    color:#FFF;
    text-decoration:blink;
    background-color:#999;
}
/*حالت یک لینک در لحظه ای که روی آن کلیک می کنید*/
.link a:active{
    background-color:#999;
}
</style>
سپس آن کلاس را به بلاکی نسبت داده و لینک را درون آن قرار می دهیم: 
<div class="link">
<a href="http://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
</div>
با این کار لینک های موجود در این بلاک از کلاس آن پیروی کرده و ویژگی های آن را به خود می گیرند.


1394/05/30 4:38:02 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما