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

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

 

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

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

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

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

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

مثال:

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

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

 

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

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

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

مثال:

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

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

 

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

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

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

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

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

مثال:

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

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

 

رنگ پس زمینه

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

مثال:

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

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

 

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

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

مثال:

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

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

 

 

 

 

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

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

CSS Layout – عرض و حداکثر عرض  استفاده از width, max-width and margin: auto همانطور …

پاسخی بگذارید

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