Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

آموزش تغییر رنگ لینکهای صفحه در حالات مختلف

اگر بخواهید رنگ لینکها را در صفحه خود تغییر دهید مانند تغییر رنگ پیش فرض  متن باید تگ BODY را پیدا کنید. در تگ BODY به دنبال شناسه link بگردید.  مثلاً ممکن است تگ BODY به این صورت باشد:

<body link="blue">

در تگ BODY ممکن است شناسه های دیگری هم وجود داشته باشند، مثلاً شناسه های  مربوط به رنگ متن و یا رنگ زمینه. در این صورت می توانید شناسه رنگ لینک را با  یک فاصله خالی با آخرین فرمان موجود در تگ BODY به این تگ اضافه کنید.

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

برای مشاهده جدول رنگها و معادل هگزادسیمال آنها اینجا را  کلیک کنید.

مثلاً برای تغییر رنگ لینکها به زرد می توانیم مانند زیر عمل کنیم:

1- استفاده از نام رنگ:

<body link="yellow">

2- استفاده از معادل هگزادسیمال رنگ:

<body link="#ffff00">

حالا همه لینکهای موجود در صفحه شما به جای آبی به رنگ زرد در مرورگر ظاهر  می شوند.

همین کار را می توانید برای لینکهای فعال و لینکهای بازدید شده تکرار کنید.  مانند زیر:

<body alink="blue" vlink="violet">

مانند مثال بالا شناسه alink برای  لینکهای فعال و vlink برای  لینکهای بازدید شده استفاده می شود.

برای تغییر دیگر رنگها هم به همین صورت عمل می شود تنها نکتهای که باید مد  نظر قرار گیرد این است که حتماً قبل از وارد کردن فرمان یک فضای خالی با فرمان  قبلی بگذارید.

روش دیگری که برای تغییر رنگ لینکها وجود دارد استفاده از استایل و CSS است.  در صورتی که برای تعیین مشخصات لینکها از استایل استفاده شود امکان افزودن  ویژگیهای دیگری نظیر کادر و رنگ زمینه هم به لینکها وجود دارد. در صورت تمایل  می توانید بخش مربوط به ادامه مطلب را  مطالعه کنید.

 

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

 


نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36624
افراد آنلاین : 4
بازدید امروز : 618
بازدید دیروز : 928
گوگل امروز : 31
گوگل دیروز : 143
بازدید هفته : 5,786
بازدید ماه : 19,106
بازدید سال : 404,729
بازدید کلی : 10,799,205