|
رنگ هاي چهارگانه ي لينك
براي « لينك » ها به چار گونه رنگ نياز است :
1 - رنگ اصلي خود لينك : a يا a:link
2 - رنگ مربوط به ديده شده ها : a:visited ( يعني لينك هايي كه يك بار ديده شده ،
بايد به رنگ ديگري درآيد كه معلوم باشد . )
3 - رنگ مربوط به بردن ِ ماوس ، روي لينك : a:hover
4 - رنگي كه با فشار دادن يك لينك تغيير مي كند ، و همچنان مي ماند تا زمان ِ
فشرده شدن ِ لينك ِ بعدي : a:active
كه بايد اين رنگ ها را به دل خواه ، و متناسب با ساير رنگ هاي صفحه ي خود گزينش كنيم . به طور پيش فرض ، در مرور گر ، تنها رنگ اصلي اعمال شده ( كه معمولاً آبي است ) - با خطّي در زير آن - و نيز رنگ
visited .
براي تنظيم ِ دلخواه هر چهار رنگ ، بايد در بخش Head قالب خود ، كدهاي لازم را وارد
كنيم ، يعني با نوشتن ِ استيل ها ، خواسته هاي خود را اعمال كنيم . در اينجا صورتي
از كدهاي مربوط به اين فقره را مي آورم :
<!-- LINKS STYLES -->
<style>
a:link {
font-weight: none;
background: none;
transparent scroll repeat 0% 0%;
color: #000099;
text-decoration: none;
}
a:visited {
font-weight : none;
text-decoration : none;
color: #006600;
background: transparent;
}
a:hover {
font-weight : bold;
text-decoration : none;
color: #ff0000;
background: transparent;
}
a:active {
font-weight : bold;
text-decoration : none;
color: #993300;
background: transparent;
}
</style>
<!-- END LINKS STYLES -->
و امّا ، گاه در
صفحه اي كه داريم مي خواهيم در دو بخش ِ ناهمرنگ لينك داشته باشيم ؛ و به
ندرت ممكن است بتوانيم يك گروه چهار تايي از رنگ ها ( كه لزوماً بايد شاخص هم باشد)
بيابيم كه در هر چند قسمت فضاي صفحه ي ما درست در بيايد ! مثلاً در يك زمينه ي
روشن و يك زمينه ي تيره . تا آنجا كه من دقت كرده ام ، بسيارند سايت و وبلاگ هايي
كه با اين مشكل كوچك ، امّا نسبةً مهم و بي ترديد آزارنده ، دچارند .
*
رنگ كردن ِ موضعي ِ لينك
ها در متن ، اصلاً كار درستي نيست ؛ ضمن آن كه با اين كار ، ويژگي هاي ديگر كلاً
متوقف مي شود ؛ يعني ديگر رنگ هاي « هاور و ويزيتد و اكتيو » نداريم !
مشكل به گونه اي ساده قابل حل است :
بايد در بخش استيل ها ، يك گروه استيل دوّم ( با ذكر ِ class ) تعريف كنيم ؛ و سپس در هر لينكي كه مي خواهيم از اين گروه رنگ ها استفاده شود ، درون تگ ِ
آن ، اين « class » را ذكر كنيم !
پس در بخش style ها دوباره مي نويسيم :
a:link.text
{
font-weight: none;
background: none;
transparent scroll repeat 0% 0%;
color: #000099;
text-decoration: none;
}
a:visited.text {
font-weight : none;
text-decoration : none;
color: #006600;
background: transparent;
}
a:hover.text {
font-weight : bold;
text-decoration : none;
color: #ff0000;
background: transparent;
}
a:active.text {
font-weight : bold;
text-decoration : none;
color: #993300;
background: transparent;
}
توجّه داشته باشيد كه واژه ي text واژه اي است كه من براي نمونه برگزيده ام و شما
هر واژه يا حرف يا شماره اي مي توانيد بياوريد .
در استيل نويسي ،
نقطه
برابر
class و
#
برابر id يا name است
. رنگ ها را هم بايد به دلخواه و
مناسب با زمينه ي صفحه ي خود بيابيد .
كاري كه باقي مانده اين است كه از اين پس ، هر جا لينكي مي نويسيد كه مي
خواهيد رنگ هاي آن بر اساس « كلاس » مورد نظر باشد ، در تگ ِ لينك ِ مزبور ،
بيفزاييد : "class="text .
<a class="text" href="URL"
target="_blank">link name</a>
استيل
را به صورت ِ ساده تر هم مي توان نوشت ( كه در آن تنها ويژگي ِ « رنگ » تعيين شده باشد ) :
a:link.text {color:#؟; }
a:visited.text {color:#؟; }
a:hover.text {color:#؟; }
a:active.text {color:#؟; }
*
در طراحي و رنگ آميزي « برزين مهر » چندين ساعت از وقتم صرف ِ يافتن رنگ هايي شد كه
در همه ي زمينه ها « آشكارگي » ِ لازم را داشته باشد ؛ و به ناچار به يك سري رنگ
رضايت دادم . مدّتي بعد دوستي در اين باره پرسيد و همين باعث شد كه قدري بيشتر فكر
كردم و راه ِ آن را يافتم . - در كتاب ِ HTML ي كه به دسترس بود اين فقره را نيافته
بودم ! بعد همه ي صفحه هاي « برزين مهر » را اصلاح كردم !
|
1
2
3
4
5
6
7
8
9
10
|
۩ 25 آذر 1383
۩ لينك
|
| 
