استایل‌بندی لینک و پیوندها در صفحات وب با css

[ آخرین بازنگری ۲۱ آبان ۱۳۹۵ ] [ نسخه چاپی ]

اگر از ابتدا در آموزش css با ما همراه بوده باشید به خاطر میارید که در درس های گذشته اصول اولیه و اصلی css رو با هم یاد گرفتیم و سپس به تصاویر زمینه، قالب بندی متن و انتخاب فونت ها پرداختیم.در ادامه ی این سری آموزشی امروز به نحوه ی قالب بندی لینک ها و پیوند هایی که در واقع با تگ a در html مشخص میشوند خواهیم پرداخت.

قالب بندی لینک ها

در css برای قالب بندی لینک ها از هر مشخصه ای میتونید استفاده کنید مثلا background , color , font-family و خیلی از مشخصه دیگه.ولی به صورت اختصاصی برای لینک ها ۴ انتخابگر داریم که به قرار زیر هستند:

  1. a:link که نشان دهنده لینک هایی که کلیک نشده اند
  2. a:visited برای لینک هایی که کاربر روی اونها کلیک کرده
  3. a:hover برای نمایش لینک زمانی که نشانگر ماوس روی لینک قرار میگیره
  4. a:active برای لحظه ای که روی لینک کلیک میشه

البته مورد چهارم زیاد در قالب بندی لینک دخیل نیست و اصلا به چشم نمیاد ولی برای خزنده های موتورهای جستجو و دستگاه های متن خوان اهمیت زیادی داره و در کل یک امتیاز مثبت از نظر سئو هست.به مثال زیر دقت کنید:

a:link { color:#FF0000;}
a:visited {color:#000000;}
a:hover {color:#c7c7c7;}
a:active { color:#0000FF;}

در مثال بالا لینک های صفحه به رنگ قرمز دیده خواهند شد ، لینک هایی که کاربر بر روی اونها کلیک کرده مشکی رنگ دیده میشوند و وقتی نشانگر ماوس بر روی لینک (که قرمز هست) قرار بگیره رنگ لینک به رنگ نقره ای دیده میشه و اگر روی لینک کلیک کنید ، تا زمانی که کلیک رو ول نکردید! رنگ لینک آبی خواهد بود.

نکته مهم:

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

Text Decoration

خوب این مشخصه یکی از پر طرفدار ترین مشخصه ها در نمایش لینک هاست.با استفاده از این مشخصه میتونید تعیین کنید که خط زیر لینک ها نمایش داده بشه؟ چطور نمایش داده بشه و مقادیر زیر رو دریافت خواهد کرد:

text-decoration:blink که باعث میشه لینک به صورت چشمک زن دیده بشه . (البته در مرورگر اینترنت اکسپلورر عمل نخواهد کرد!).

a:link{text-decoration:blink;} / e.g : لینک چشمکزن /

اگر مرورگر شما فایرفاکس باشه لینک بالا رو به صورت چشمکزن خواهید دید.

text-decoration:line-through که یک خط رو بر روی خود لینک میکشه.

a:link{text-decoration:line-through;} /e.g : لینک line-through /

text-decoration:none شاید مقدار none برای مشخصه text-decoration یکی از محبوب ترین مقادیر باشه چرا که امروزه در طراحی صفحات وب کمتر طراحی هست که علاقه داشته باشه لینک ها به صورت معمولی (یعنی زیرشون خط داشته باشه) دیده بشن و با استفاده از این مقدار خطی که زیر لینک ها هست رو برمیدارند:

a:link{text-decoration:none;} /e.g : لینک بدون خط زیر /

text-decoration:overline که من خودم تاحالا صفحه ای رو ندیدم که لینکی داشته باشه و از این مقدار استفاده کرده باشه ولی به هر حال میتونید با این مقدار یک خط بالای لینک ایجاد کنید:

a:link{text-decoration: overline;} /e.g : لینک با خط بالای آن /

و در نهایت text-decoration:underline که در واقع حالت پیشفرض لینک هست و یک خط زیر لینک نمایش داده میشه.من خودم وقتی صفحه ای رو طراحی میکنم سعی میکنم برای a:hover این مقدار رو در نظر بگیرم !

a:link{text-decoration: underline;} /e.g : لینک معمولی با خط زیر /

تعیین رنگ زمینه برای لینک

خوب برای اینکه بتونم رنگ زمینه یک لینک رو تعیین کنیم از مشخصه ای که قبلا  هم باهاش آشنا شده اید یعنی background-color استفاده میکنیم.از این کار میتونید برای ساخت منو ها استفاده کنید و بدون استفاده از عناصر گرافیکی و تنها با استفاده از رنگ بندی css منوهای رنگی و در عین حال سبک و جذاب ایجاد کنید که آموزش این کار رو در دروس بعدی با هم مرور خواهیم کرد:

a:link{background-color:#ccc;} / e.g : لینک با رنگ زمینه طوسی /

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

مثال های نهایی

خوب حالا که کار با لینک ها و قالب بندی اونها رو یادگرفتیم بیایید یک مثال کلی بزنیم و یک لینک کامل رو طراحی کنیم!

a.example:link{text-decoration:none;padding:5px 10px;}
a.example:visited{text-decoration:line-through;color:#fff;background-color:#999;}
a.example:hover{text-decoration:underline;font-weight:bold;background-color:#69f;}
a.example:active{color:#ccc;}

 

مشاهده نمونه ی کدهای بالا

 

در واقع برای اینکه کد بالا با کد لینک های خود سایت تداخلی ایجاد نکنند به این کد ها یک کلاس دادم به نام example ، با این کار شما یاد گرفتید که چطور برای لینک ها هم کلاس css در نظر بگیرید.

اگه سوالی داشتید یا فکر میکنید نکته ای گفته نشده یا کم توضیح داده شده در بخش دیدگاه ها با ما درمیون بگذارید ، مطمئن باشید بی پاسخ نخواهد موند.

احتمالا این مطالب برای شما جالب هستند

آموزش css – درس بیست و یکم – انتخاب کردن عناصر از طریق صفت آنها
ساخت دکمه rollover با استفاده از فتوشاپ و css
متحرک سازی و چرخش عناصر (rotate) در css
آموزشcss – درس سوم – ID و Class
آموزش css – درس چهارم – نحوه استفاده از css
آموزش css – درس بیستم – انواع واسطه ها و رسانه ها (Media Types)

گفتگو پیرامون استایل‌بندی لینک و پیوندها در صفحات وب با css

(منتشر شده: 14 | در انتظار تایید: 0)
بدو بوسه دات کام

داداش دمت گرم اموزش را به صورت احسن میدی فقط اگه میشه یکم از نحوه استایل های مختلف بزارید … دکمه های مختلف و اموزش ساخت ان ها با css3

پاسخ دهید
آرنگ

با سلام
کاربردی و مفید بود
با احترام

پاسخ دهید
siavash-k

آقا دمت گرم کاملا درست شد
خیلی خیلی آقایی

پاسخ دهید
عصرعلم

در پاسخ به siavash-k

خب، برای همون ماژولی که فرمودید b-user1 یا b-user2 در کد قالب اینطور داریم:

<?php if($this->countModules('b-user2')): ?>
<div id="b-user2">
<jdoc:include type="modules" name="b-user2" style="xhtml" />
</div><!--End b-user2-->

وقتی میگیم این ماژول رو درون یک کلاس قرار بدید باید کد html رو خودتون وارد کنید یعنی:

<?php if($this->countModules('b-user2')): ?>
<div id="b-user2" class="b-user2">
<jdoc:include type="modules" name="b-user2" style="xhtml" />
</div><!--End b-user2-->

و بعد در css کلاس b-user2 رو ویرایش میکنیم.
کار دیگری هم که میتونیم انجام بدیم این هست که کلاسی رو وارد نکنیم چون خود ماژول یک id با نام b-user2 داره و ما میتونیم تغییرات رو روی همین id اعمال کنیم. مثلا میخواهیم لینک ها به رنگ سفید نمایش داده بشوند:

در حالتی که بخواهیم کلاس b-user2 رو داشته باشیم:
.b-user2 a:link{color:#fff;}

در صورتی که کلاسی تعریف نکنیم و بخواهیم بر روی id کار بکنیم:
#b-user2 a:link{color:#fff;}

پاسخ دهید
siavash-k

countModules(‘b-user1’)): ?>

در index من این دستور هست اما class نداره به کجای این دستور ، دستور class باید اضافه کنم ؟

پاسخ دهید
siavash-k

ببخشید من سردر نیاوردم
میشه یکم واضح تر توضیح بدین
چطوری براش کلاس بدم
من ماژول b-user1 دارم که یک بار براش تعریف کردم این کلاس و تا فعال بشه
حالا چطوری دوباره بهش کلاس بدم 😀
ببخشین تازه کارم دیگه

پاسخ دهید
عصرعلم

در پاسخ به siavash-k

اگر این کلاس رو تعریف کردید پس یعنی اینکه در کد html اینطور دارید:
class="b-user1"

خوب حالا بیایید برای این کلاس، لینکها رو ساماندهی کنیم:

.b-user1 a:link{color:#fff; text-decoration:none;}

پاسخ دهید
siavash-k

ببخشین
من یه مشکل دارم خیلیم باهاش کلنجار رفتم حل نشد
اونم اینه که میخوام رنگ لینکهام در هر موقعیت ماژول تعریف شده با ماژول دیگم فرق کنه
برای مثال من فوترم مشکیه ( 4 تا موقعیت ماژول ) میخوام تو فوتر رنگ لینکام سفید باشه اما در سایر ماژول ها و موقعیت ها رنگش آبی باشه
میشه یه کمکی بکنین
البته شما استاد مایی و خیلی خیلی کمک کردین تا حالا
🙂

پاسخ دهید
عصرعلم

در پاسخ به siavash-k

سلام
ممنون از تعریف، شما لطف دارید ولی بدون تعریف کردن هم تاجایی که بدونیم به شما و سایر دوستان و کاربران کمک خواهیم کرد 🙂

برای اینکه به مقصودتون برسید باید برای هر ماژول یک کلاس تعریف کنید. مثلا 4 ماژول داریم به نامهای A تا D که میخواهیم رنگ لینکها در هرکدام متفاوت باشه.
کد html یا php ماژول رو درون یک کلاس قرار میدیم :

<div class="module-a">
کد ماژول مورد نظر
</div>

بعد در css میاییم تعریف میکنیم تمام لینکهایی که درون کلاس module-a قرار دارند چه حالتی داشته باشند:

.module-a a:link{
color:#fff;
text-decoration:none;
}

به همین ترتیب برای سایر ماژولها هم عمل خواهیم کرد.

پاسخ دهید
آرش

اگه بخواهیم 1 لینک رنگش با بقیه فرق کنه باید چی کار کنیم

پاسخ دهید
عصرعلم

در پاسخ به آرش

به اون لینک یک کلاس متفاوت نسبت بدید و در css رنگ مورد نظر رو برای اون کلاس اعمال کنید . مثلا اگر میخواهید یکی از لینکها رنگش قرمز باشه :
<a class="red-link">Text</a>
و css این لینک هم میشه

a.red-link
{
color:#ff0000;
}

پاسخ دهید
hannaneh

سلام میشه ی دیکشنری کشاورزی برا موبایل هم بذارین؟ممنون

پاسخ دهید
سجاد

در پاسخ به hannaneh

پیگیری میکنم اگه موجود باشه (ساخته شده باشه) براتون در سایت قرار میدم

پاسخ دهید

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)