وضعیت لینک ها و استایل پیشفرض آن ها در CSS
لینک ها یکی از اجزای مهم و پرکاربرد در صفحات وب و اسناد HTML هستند. از همین رو آشنایی با نحوه تعیین استایل لینک ها با کمک CSS ضروری است. قدم اول در یادگیری نحوه تعیین استایل برای لینک ها، آشنایی با وضعیت های مختلف لینک هاست. شما می‌توانید براساس وضعیت لینک ها، استایل آن‌ها را با کمک سلکتورهای شبه کلاس مشخص کنید.
وضعیت لینک ها
لینک های موجود در صفحات وب می‌توانند وضعیت های زیر را داشته باشند:
- ملاقات نشده: یک لینک عادی که هنوز ملاقات نشده است در این وضعیت قرار دارد. استایل لینک هایی در این وضعیت با شبه کلاس :link قابل تعیین است.
- ملاقات شده: لینکی که در گذشته ملاقات شده است و صفحه مقصد آن در سابقه وبگردی مرورگر وب موجود باشد در وضعیت ملاقات شده (یا Visited) قرار دارد. استایل لینک هایی در این وضعیت با شبه کلاس :visited قابل تعیین است.
- شناور: لینکی که نشانگر ماوس روی آن قرار می‌گیرد در وضعیت شناور یا هاور (Hover) قرار دارد. استایل لینک هایی در این وضعیت با شبه کلاس :hover قابل تعیین است.
- فوکس: لینکی که در حال حاضر دارای فوکس است در وضعیت فوکس (Focus) قرار دارد. کاربر می‌تواند با کمک کلید Tab (و روش‌های دیگر) فوکس را به یک لینک مشخص در صفحه وب منتقل کند. استایل لینک هایی در این وضعیت با شبه کلاس :focus قابل تعیین است.
- فعال: لینک هنگام کلیک یا ضربه زدن روی آن در وضعیت فعال (Active) قرار دارد و پس از اینکه فرایند کلیک یا ضربه روی لینک پایان می‌یابد لینک از وضعیت فعال خارج می‌شود. استایل لینک هایی در این وضعیت با شبه کلاس :active قابل تعیین است.
استایل و ظاهر پیشفرض لینک ها در CSS
لینک ها نیز مشابه با سایر المان ها دارای استایل پیشفرضی هستند که توسط عامل کاربری (مانند مرورگر وب) مشخص می‌شود. این ظاهر پیشفرض معمولا شامل موارد زیر است:
- لینک ها دارای خط زیر به صورت ساده و یکپارچه هستند.
- متن و خط زیر لینک های ملاقات نشده به صورت آبی رنگ است و متن و خط زیر لینک های ملاقات شده به صورت بنفش رنگ است.
- با قرار گرفتن نشانگر ماوس روی لینک، آیکن نشانگر ماوس به آیکن دست تغییر پیدا می‌کند.
- لینک دارای فوکس با یک خط دور یا آوتلاین همراه است.
- متن و خط زیر لینک فعال به صورت قرمز رنگ است.
تصویر زیر نمایی از استایل پیشفرض لینک ها در وضعیت های مختلف را نمایش می‌دهد:
بازگشت به فهرست مجموعه آموزشی CSS
