اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل

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

برای اینکه بتوانیم از همه خواصی که برای لینکها در CSS وجود دارد استفاده کنیم بهتر است تا استایل را در بخش HEAD متن خود یا در فایلهای CSS خارجی که به صفحه پیوند می شوند استفاده کنیم. در هر دو صورت مراحل انجام کار شبیه هم است. ما در اینجا به استایل را در بخش HEAD متن تعریف می کنیم.

برای کار با لینکها در CSS می توانیم از مشخصات یک لینک را به چهار بخش تقسیم کنیم که در زیر می توانید آنها را مشاهده کنید:

  • a:link و a
    این مشخصه ها نحوه نمایش لینکهایی را که در صفحه وجود دارند و هنوز روی آنها کلیک نشده است تنظیم می کنند.
  • a:hover
    این مشخصه وضعیت لینک را وقتی که نشانگر ماوس روی آن قرار دارن تنظیم می کند.
  • a:active
    این قسمت مشخص کننده وضعیت لینکی است که بر روی آن کلیک می شود.
  • a:visited
    این مشخصه برای لینکهایی که در بازدیدهای قبلی مورد استفاده قرار گرفته اند استفاده می شود.

برای کار کردن با لینکها ما در قسمت HEAD متن از مشخصه های بالا استفاده می کنیم. یعنی کد زیر را در بخش HEAD متن وارد می کنیم اگر می خواهید از استایل خارجی استفاده کنید می توانید نحوه فرا خوانی استایل خارجی به صفحه را مطالعه کنید.

<style type="text/css">
<!--
a:link { مشخصات مورد نظر }
a:hover { مشخصات مورد نظر }
a:active { مشخصات مورد نظر }
a:visited { مشخصات مورد نظر }
-->
</style>

برای هر ویژگی بالا می توانید مشخصات خاص خود را تعریف کنید برای مثال می تواند رنگ از مشخصه bachkground-color برای تعیین رنگ زمینه لینک وقتی که ماوس روی ان قرار می گیرد استفاده کنید یا از color برای تعیین رنگ متن لینکها. به طور کلی می توانید از بیشتر مشخصه هایی که برای متن ها کارایی دارند در مورد لینکها هم استفاده کنید برای مثال font-family و font-size و border و ...

در اینجا یک مثال مطرح می کنیم که در آن لینکهای صفحه به رنگ سبز نمایش داده می شوند با اندازه فونت 12pt و بدون زیرخط، وقتی که ماوس روی آنها قرار می گیرد رنگ آنها قرمز می شود و رنگ زمینه متفاوتی پیدا می کنند همچنین یک کادر نیز اطراف آنها به وجود می آید. در موقع کلیک کردن رنگ لینک سفید می شود و لینکهایی که در دفعات قبلی کلیک شده اند با زیر خط نمایش داده می شوند. برای ساختن لینکهایی با مشخصاتی که بیان شد می توانیم از کد زیر در قسمت HEAD متن یا استایل خارجی استفاده کنیم:

<style type="text/css">
<!--
a:link { color:green; font-size:12pt; text-decoration:none }
a:hover { color:red; background-color:#6699CC; border:#006699 2px solid }
a:active { color: white }
a:visited { text-decoration: underline }
-->
</style>

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

همانطور که می بینید کدهایی که در قسمت HEAD این صفحه قرار دارند بر روی لینکهای بالا تأثیر گذاشته اند اما لینکها در سایر نقاط صفحه ویژگیهای متفاوتی دارند. دلیل این تفاوت این است که ما لینکهای بالا را در یک DIV قرار دادیم و برای آن یک ID در بخش HEAD صفحه تعریف کردیم و ویژگیهای مربوط به لینکهای بالا در قالب ID مشخص کردیم. در اینجا می توانید کدی را که ما مورد استفاده قرار داده ایم ببینید:

#pre a:link,#pre a { color:green; font-size:10pt; text-decoration:none }
#pre a:hover { color:red; background-color:#6699CC; border:#006699 2px solid; text-decoration:none }
#pre a:active { color: White }
#pre a:visited { text-decoration: underline; color:#003399 }

کد مربوط به DIV را نیز به صورت زیر نوشتیم:

<div align="center" id="pre">
کدهای مربوط به لینکها
</div>

نظرات بازدید کنندگان
Wed, 30 Apr 2008 22:47:24 +0430 نویسنده : مریم
با سلام و تشکر به خاطر مطالب بسیار خوب و مفیدتون.
اگه می تونید آموزش asp رو هم بزارید.
ممنون.
موفق باشید.
 
Wed, 02 Apr 2008 12:17:02 +0330 نویسنده : محمد
سلام.خسته نباشد.ممنون از اطلاعاتي كه در اختيار ديگران قرار ميديد.

يك سؤال واسه من پيش اومد.اگه نخوايم رنگ لينك سايتايي كه باز شده تغيير كنه بايد چي كار بكنيم؟
 
Sat, 29 Mar 2008 22:56:01 +0330 نویسنده : ali hazara
it was nooorband(nice and maqboool)
 
Sun, 23 Mar 2008 14:20:18 +0330 نویسنده : سید عابدین "محبت زاده"
اموزش سی اس اس در سایت شما واقعاً عالی بود مرسی.
از افغانستان
 
Fri, 07 Mar 2008 12:02:09 +0330 نویسنده : ehsan
kheyli ali boooooooood
 
ساعت: 14:33 - تاریخ: 8 بهمن 1386 نویسنده : محمد رضا
ممنونم از اطلاعاتی که در اختیارمان قرار دادی.
واقعا آموزنده و مفیدند.
در ادامه مسیر موفق باشید
یا حق
 
ساعت: 15:47 - تاریخ: 27 دی 1386 نویسنده : مريم _ سين
سلام
به خاطر زحمت هاتون واسه اين سايت نهليت تشكر رو دارم
اميدوارم هميشه اينطور بمونه.
 
ساعت: 05:36 - تاریخ: 1386 نویسنده : mohammad
با كمال تشكر
 
ساعت: 12:46 - تاریخ: 1386 نویسنده : سارا
خیلی عالی بود دستتون درد نکنه
 
ساعت: 00:46 - تاریخ: 1386 نویسنده : amir
az web site khob va mofedetan nahayate tashakor daram .
Besyar mofid va ghabele estefade bood
Moteshakeram
 
ساعت: 17:52 - تاریخ: 1386 نویسنده : عهدیه
مرسی خیلی خوب بود
 
ساعت: 14:58 - تاریخ: 1386 نویسنده : مريم
خيلي خوب بود.واقعا خسته نباشيد.اگه مثال ها رو بيشتر كنيد عالي ميشه.
 
ساعت: 08:43 - تاریخ: 1386 نویسنده : NAVID
مرسی وخسته نباشی
 
ساعت: 08:06 - تاریخ: 1386 نویسنده : خلیل
سلام
خیلی خوب بود.
فقط اگر میشه تعداد مثالاشو بیشتر کنید
 
ساعت: 17:49 - تاریخ: 1386 نویسنده : امین
عالی بودف خسته نباشید.....
 
ساعت: 11:30 - تاریخ: 1386 نویسنده : farhad
mamnoon - matalebet khoban - movafagh bashi.
 
ساعت: 15:16 - تاریخ: 22 مهر 1386 نویسنده : سعید
عالی بود
 
ساعت: 17:10 - تاریخ: 20 مهر 1386 نویسنده : مهرداد
درود بر شما
ممنون از سایت زیبا و پر مهتواتون
خیلی بهره بردم
                                                                                        سالم باشید
                                                                                            مهرداد
 
ساعت: 18:06 - تاریخ: 19 مهر 1386 نویسنده : ناشناس
ممنونم از اطلاعاتی که در سایتت قرار دادی.
واقعا آموزنده و مفیدند.
موفق باشید
یا علی