آموزش جامع و كاربردي كدنويسي استايل شت,css - قسمت پانزدهم - ظاهر لینک ها
با استفاده از CSS می توانیم نحوه نمایش دادن لینکها را در صفحه تنظیمکنیم. به صورتی که استفاده از جاوا اسکرپت در صفحه تا حد زیادی کم می شود. از طریق استفاده از استایل می توانیم رنگ لینکها، اندازه فونت آنها، زیرخط لینکها، رنگ زمینه هر لینک و بسیاری دیگر از خواص لینکها را تغییردهیم.
برای اینکه بتوانیم از همه خواصی که برای لینکها در CSS وجود دارداستفاده کنیم بهتر است تا استایل را در بخش HEAD متن خود یا در فایلهای CSS خارجی که به صفحه پیوند می شوند استفاده کنیم. در هر دو صورت مراحلانجام کار شبیه هم است. ما در اینجا به استایل را در بخش HEAD متن تعریفمی کنیم.
برای کار با لینکها در CSS می توانیم از مشخصات یک لینک را به چهار بخش تقسیم کنیم که در زیر می توانید آنها را مشاهده کنید:
a:link
و a
این مشخصه ها نحوه نمایش لینکهایی را که در صفحه وجود دارند و هنوز روی آنها کلیک نشده است تنظیم می کنند.
a:hover
این مشخصه وضعیت لینک را وقتی که نشانگر ماوس روی آن قرار دارن تنظیم می کند.
a:active
این قسمت مشخص کننده وضعیت لینکی است که بر روی آن کلیک می شود.
a:visited
این مشخصه برای لینکهایی که در بازدیدهای قبلی مورد استفاده قرار گرفته اند استفاده می شود.
برای کار کردن با لینکها ما در قسمت HEAD متن از مشخصه های بالااستفاده می کنیم. یعنی کد زیر را در بخش HEAD متن وارد می کنیم . همچنینمیتوانیم از Style خارجی استفاده کنیم که قبلا توضیح داده شده است
کد:
<
کد:
style type=”text/css”>
<!–
a:link { attributes }
a:hover { attributes }
a:active { attributes }
a:visited { attributes }
–>
</style>
برای هر ویژگی بالا می توانید مشخصات خاص خود را تعریف کنید برای مثالمی تواند رنگ از مشخصه bachkground-color برای تعیین رنگ زمینه لینک وقتیکه ماوس روی ان قرار می گیرد استفاده کنید یا از color برای تعیین رنگ متنلینکها. به طور کلی می توانید از بیشتر مشخصه هایی که برای متن ها کاراییدارند در مورد لینکها هم استفاده کنید برای مثال font-family و font-size و border و …
در اینجا یک مثال مطرح می کنیم که در آن لینکهای صفحه به رنگ سبزنمایش داده می شوند با اندازه فونت ۱۲pt و بدون زیرخط، وقتی که ماوس رویآنها قرار می گیرد رنگ آنها قرمز می شود و رنگ زمینه متفاوتی پیدا می کنندهمچنین یک کادر نیز اطراف آنها به وجود می آید. در موقع کلیک کردن رنگلینک سفید می شود و لینکهایی که در دفعات قبلی کلیک شده اند با زیر خطنمایش داده می شوند. برای ساختن لینکهایی با مشخصاتی که بیان شد می توانیماز کد زیر در قسمت HEAD متن یا استایل خارجی استفاده کنیم:
کد:
کد:
<style type=”text/css”>
<!–
a:link { color:green; font-size:۱۲pt; text-decoration:none }
a:hover { color:red; background-color:#۶۶۹۹CC; border:#۰۰۶۶۹۹ ۲px solid }
a:active { color: white }
a:visited { text-decoration: underline }
–>
</style>
ما میتوانیم برای اینکه تنها لینک های قسمت خاصی از صفحه به شکل مورد نظر باشد از ID استفاده کنیم
کد:
کد:
#pre a:link,#pre a { color:green; font-size:۱۰pt; text-decoration:none }
#pre a:hover { color:red; background-color:#۶۶۹۹CC; border:#۰۰۶۶۹۹ ۲px solid; text-decoration:none }
#pre a:active { color: White }
#pre a:visited { text-decoration: underline; color:#۰۰۳۳۹۹ }
در این کد ها ما از ID استفاده کرده ایم . حال برای اینکه لینک هامثلا یک Div در صفحه به این صورت باشند باید ID مورد نظر را برای Div خودتعریف کنیم
کد:
کد:
<div align=”center” id=”pre”>
کدهای مربوط به لینکها
</div>
