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

با استفاده از 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>

نظرات بازدید کنندگان
Fri, 05 Jun 2009 10:47:31 +0430 نویسنده : adel
از آموزش های دقیق تان سپاسگزارم .عادل از اهواز
 
Thu, 04 Jun 2009 14:37:19 +0430 نویسنده : امین
در مورد فیلتر ها در استایل شیت اگر آموزش داشته باشید خیلی خوب می شد.امین از گنبد قابوس
 
Mon, 13 Apr 2009 23:07:00 +0430 نویسنده : yashar
ممنون از سایت خوبی که داری
 
Sun, 29 Mar 2009 13:14:10 +0430 نویسنده : farnaz
سلام. خیلی خیلی از اطلاعات که در سایت قرار دادید متشکرم. خسته نباشید. یه گره بزرگ از کارم باز شد.
 
Fri, 27 Feb 2009 08:50:46 +0330 نویسنده : مجتبی درویشی
سلام واقعا ممنونم ازتون من سی اس اس رو از طریق شما یاد گرفتم واقعا ممنوتون هست
 
Thu, 19 Feb 2009 22:03:17 +0330 نویسنده : الهام
سلام دوست عزیز
واقعا خسته نباشید
خیلی ممنون
سایت پر محتوایی داری
موفق باشی
 
Tue, 27 Jan 2009 16:59:02 +0330 نویسنده : asmail
دستت درد نکنه بهت تبریک میگم سایت خوبی داری          موفق باشی
 
Wed, 24 Dec 2008 16:36:34 +0330 نویسنده : meysam
دستتون درد نكنه .
 
Fri, 03 Oct 2008 14:27:36 +0330 نویسنده : سعیده
آموزشتون خیلی عالی بود
 
Fri, 25 Jul 2008 18:36:20 +0430 نویسنده : fateme
عالیه خسته نباشید
 
Thu, 24 Jul 2008 12:25:32 +0430 نویسنده : مصطفی
از این سایت بهتر و پر سرعت تر با 28 kbs پیدا می شه؟ خیلی ممنون
 
Tue, 22 Jul 2008 00:52:10 +0430 نویسنده : es-hagh moafi
ey val  be site  bahaletun!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
Tue, 22 Jul 2008 00:21:33 +0430 نویسنده : ali asghar
من هم مثل بقیه از شما خیلی متشکرم

نه بابا تو این مملکت هم چیز درست وحسابی هم می شه پیدا کرد

نمونه خیلی خوبش هم این سایت قشنگ

پس هنوز امیدوار باشیم که این سرزمین کاملا نابود نشده
 
Fri, 11 Jul 2008 12:46:43 +0430 نویسنده : علی
با عرض سلام وخسته نباشید خدمت شما
من از این سایت خیلی راضیم ونمی دونم چه طور از شما اقای زینلی تشکر کنم .من مانند سایر دوستانم از خداوند متعال برای شما ارزوی سلامتی و شادکامی در تمامی مراحل زندگیتان را دارم.
خیلی ممنون
 
Tue, 01 Jul 2008 08:58:00 +0430 نویسنده : هادی
من در بدر یک آموزش درست و مختصر و مفید سی اس اس بودم ..
واقعا مطالب شما بدردم خورد .
 
Mon, 30 Jun 2008 23:48:25 +0430 نویسنده : علی اللهویردی زاده
اونقدر ذوق زده شدم که دیگه هیچی نمیگم.فقط دستتون درد نکه.واقعا عالی بودن تمامیه آموزشهاتون..............................
 
Fri, 13 Jun 2008 09:27:18 +0430 نویسنده : ePro
از آموزشهای جالب شما کمال تشکر را دارم موفق باشید
 
Wed, 11 Jun 2008 12:35:36 +0430 نویسنده : Ali
Mr Yaser
Thanks Very much
You Explain Very Nice
Best Regards
 
Wed, 04 Jun 2008 21:14:49 +0430 نویسنده : مهرداد
واقعا عالي بود.
تمام صفحات اين بخش رو save كردم.
ماشاا.. چه قدر هم سايتت بيننده داره.
موفقيت روز افزون رو برات آرزو ميكنم.
 
Sat, 17 May 2008 11:50:09 +0430 نویسنده : sajad
سلام
خدا خیرتون بده.
موفق باشید.