یادداشت کن لذت ببر

در 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>

گاهی مواقع در طراحی و برنامه نویسی صفحات وب، نیاز به این داریم که لینک های یک بخش و بلاک را از سایر بخش ها متمایز کنیم، مثلا قسمت لینکدونی یا قسمت لینک دوستان را به رنگی متفاوت نشان دهیم، در این مواقع تعریف لینک ها در حالت عادی و با تگ کلی 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>

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

در زیر، کدی جهت نمونه و پیش نمایشی از آن را می توانید به صورت آنلاین مشاهده کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | تعریف استایل برای لینک در وب</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    color:#666;
    direction:rtl;
}
/*حالت عادی یک لینک*/
.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>
</head>
<body>
<div class="link">
<a href="http://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
</div>
<br />
&radic; برای آشنایی با نحوه تغییر لینک، ماوس را روی آن برده و اندکی صبر کنید.
</body>
</html>

نظرات شما عزیزان:

نام :

آدرس ایمیل:

وب سایت/بلاگ :

متن پیام:

نظر خصوصی

 کد را وارد نمایید:

 

 

 

عکس شما

آپلود عکس دلخواه: