خانه / آموزش CSS / بخش پانزدهم- آموزش لینک ها در css یا آموزش CSS Links
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
آموزش CSS Links"

تاریخ بروزرسانی: ۲۴ بهمن ۱۳۹۷ تعداد بازدید : 6 بازدید بدون دیدگاه

بخش پانزدهم- آموزش لینک ها در css یا آموزش CSS Links

قدم قبلی >< قدم بعدی

 

 لینک ها در css
آموزش لینک ها در css

CSS Links (لینک ها در css

با استفاده از CSS، لینک ها می توانند به طرق مختلف طراحی شوند.

Styling Links (طراحی ظاهریلینک ها

ظاهر لینک ها را می توان با هر ویژگی CSS (به عنوان مثال رنگ، فونت خانواده، پس زمینه و غیره) طراحی کرد.

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

 

ظاهر لینک ها در css را می توان با توجه به state (وضعیت) موجود در آن به صورت متفاوتی، طراحی کرد. به این معنی که می توان در css به نحوی برنامه نویسی کرد که یک لینک قبل از اینکه کاربر روی آن کلیک کند یک رنگ داشته باشد و بعد از اینکه کاربر روی آن کلیک کرد رنگ دیگری داشته باشد و…

لینک ها دارای چهار state (وضعیت) هستند که عبارتند از:

a: link – یک پیوند معمولی، بازدید نشده.
a:visited  – یک پیوند که کاربری از آن بازدید کرده.
a:hover  – یک پیوند زمانی که کاربر موس را روی آن می برد.
a: active – یک پیوند زمانی که کلیک شده است.

مثال:

با اجرا کردن کد بالا در صفحه خروجی ابتدا تصویر زیر را که درآن لینک به رنگ قرمز هست خواهید دید:

 

اما وقتی ماوس را روی آن ببرید رنگش صورتی خواهد شد و وقتی که روی آن کلیک کنید آبی رنگ می شود و در انتها بعد از بازدید خواهید دید که رنگش به سبز تغییر کرده است.

هنگام تنظیم سبک برای چند حالت لینک توجه داشته باشید که، چند قانون برای نظم بخشیدن به کار وجود دارد:

  • a:hover باید بعداز a:link و a:visited قرار بگیرد.
  • a:active باید بعد از a:hover قرار بگیرد.

Text Decoration(دکوراسیون متن)

خصوصیت دکوراسیون متن عمدتا برای حذف خط زیر متن یا همان underlines برای لینک ها استفاده می شود.

همین حالا ببینید:  بخش ششم- آموزش حاشیه ها (Borders)در CSS

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

 

رنگ پس زمینه

خصوصیت پس زمینه ممکن است برای تعیین یک رنگ پس زمینه برای پیوندها استفاده شود:

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

 

پیشرفته – دکمه های لینک

مثال زیر نمونه پیشرفته ای را نمایش می دهد، که ما در آن چندین ویژگی CSS را با هم ترکیب می کنیم تا لینکها را به عنوان جعبه/دکمه نشان دهیم:

مثال:

با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:

 

 

 

گام قبلی >< گام بعدی

 

بخش پانزدهم- آموزش لینک ها در css یا آموزش CSS Links
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=15582


کانال تلگرام تیک تم

مطلب پیشنهادی

آموزش CSS Text

بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS

  CSS Text در این درس به بررسی خصوصیات متن در CSS می پردازم. این خصوصیات …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *