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

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

لینک یا هایپرلینک ارتباطی از یک منبع وب به منبع دیگر است.

استایل دهی لینک ها در CSS

خوب همانطور که می دانید هر لینکی چهار حالت مختلف دارد:

• link (لینک)
• visited( بازدید شده)
• Active( فعال – کلیک و نگه داشتن کلیک ماوس)
•  Hover (نگه داشتن نشانگر ماوس)

این چهار حالت لینک یا هایپرلینک را می توان از طریق خصوصیت ها CSS و به کمک pseudo-classes المان a بسته به حالتی که در آن قرار دارند استایل دهی کرد.

برای تعریف استایل های مختلف حالت های هایپرلینک می توانید از موارد زیر استفاده کنید:

• a:link – سبک لینک های معمولی یا بازدید نشده را تنظیم می کند که هنوز نشانگر موس بر روی آن قرار نگرفته است.
• a:visited – سبک لینک هایی را تعریف می کند که مورد بازدید کاربر قرار گرفته اما نشانگر موس بر روی آن نیست.
• a:hover – این گزینه نیز زمانی مورد استفاده قرار می گیرد که کاربر نشانگر موس را بر روی لینک نگه داشته است.
• a:active – سبک لینک هایی را تعریف می کند که در فرایند کلیک شدن بر روی آن قرار دارند.

شما می توانید هر کدام از خصوصیت های CSS همچون رنگ، خانواده فونت و بک گراند را برای هر کدام از این انتخابگرها تنظیم کنید.

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

نکته: ترتیب pseudo classes باید به صورت زیر باشد تا بتواند به درستی کار کند:
:link, :visited, :hover, :active, :focus

استایل های استاندارد لینک ها در CSS :

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

به عنوان مثال، رنگ پیش فرض لینک برای مرورگرهایی همچون فایرفاکس آبی برای لینک های بازدید نشده، بنفش برای لینک های بازدید شده و قرمز برای لینک های فعال است.

تنظیم رنگ برای لینک ها:

به مثالی که در ادامه بیان می شود دقت کنید:

حذف زیر خط پیش فرض از لینک ها:

خصوصیت text-decoration در زبان CSS به طور کلی برای حذف زیرخط از لینک مورد استفاده قرار می گیرد.

نمونه زیر نحوه حذف این خط ها را به کمک خصوصیت text-decoration نشان می دهد:

امیدوارم در این بخش آموزش CSS, از استایل دهی لینک ها در CSS نهایت استفاده را برده باشید.

در بخش بعدی با انواع خصوصیات استایل دهی لیست ها در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.