نحوه تعیین استایل لینک ها در CSS

در بخش قبلی با وضعیت لینک ها و استایل پیشفرض آن‌ها در CSS آشنا شدید. در این قسمت از مجموعه آموزشی CSS با نحوه تعیین استایل لینک ها در CSS و جزئیات آن آشنا می‌شوید.

تعیین استایل لینک ها در وضعیت های مختلف با یک مثال ساده

به عنوان یک نمونه ساده برای تعیین استایل لینک ها در وضعیت های مختلف، مثال زیر را در نظر بگیرید:

a {
  outline-color: transparent;
}

a:link {
  color: red;
}

a:visited {
  color: gray;
}

a:focus {
  text-decoration: none;
  background: green;
  color: white;
}

a:hover {
  text-decoration: none;
  background: brown;
  color: white;
}

a:active {
  background: purple;
}

در این مثال، ابتدا برای تمام لینک ها (یا المان های <a>) ویژگی outline-color روی مقدار transparent تنظیم می‌شود. به این ترتیب خط پیرامون لینک (که معمولا هنگام فوکس نمایان می‌شود) پنهان می‌شود.

سپس با کمک سلکتور a:link استایل لینک های ملاقات نشده را مشخص می‌کنیم. در این مثال، رنگ متن این لینک ها روی قرمز (یا red) تنظیم می‌شود.

با کمک سلکتور a:visited نیز استایل لینک های ملاقات شده را مشخص می‌کنیم. در این مثال، رنگ متن این لینک ها روی خاکستری (یا gray) تنظیم می‌شود.

پس از آن با استفاده از سلکتور a:focus استایل لینک ها هنگام قرار گرفتن در وضعیت فوکس را مشخص می‌کنیم. در این مثال خط تزئین لینک ها در وضعیت فوکس را حذف می‌کنیم، رنگ زمینه را روی سبز (یا green) و رنگ متن را روی سفید (یا white) تنظیم می‌کنیم.

از سلکتور a:hover هم برای تعیین استایل لینک هنگامی که نشانگر ماوس روی آن قرار می‌گیرد (وضعیت شناور یا هاور) استفاده می‌کنیم. در این مثال خط تزئین این لینک ها را حذف می‌کنیم، رنگ زمینه را روی قهوه ای (یا brown) و رنگ متن را روی سفید (یا white) تنظیم می‌کنیم.

همچنین از سلکتور a:active برای تعیین استایل لینک هنگام کلیک روی آن (وضعیت فعال یا اکتیو) کمک می‌گیریم. در این مثال رنگ زمینه لینک در وضعیت فعال را روی بنفش (یا purple) تنظیم می‌کنیم.

نتیجه این مثال را در ادامه مشاهده می‌کنید:

See the Pen Styling links in different states by techdic (@techdic) on CodePen.

ترتیب تعیین استایل لینک ها

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

با توجه به این موضوع، استایل لینک‌ها هم بر پایه یکدیگر شکل می‌گیرند. بنابراین ترتیب تعیین استایل لینک ها در وضعیت های مختلف یکی از مهم‌ترین مسائلی است که باید مورد توجه قرار بگیرد.

در صورت عدم رعایت ترتیب مناسب برای تعیین استایل ها و استفاده از ویژگی های یکسان در قانون های مختلف، ممکن است چیزی که مدنظر شماست رخ ندهد. فرض کنید در مثال قبل قانون مربوط به سلکتور a:hover قبل از قانون مربوط به سلکتور a:visited قرار بگیرد. در چنین حالتی، هنگام قرارگیری نشانگر ماوس روی لینک های ملاقات شده متن لینک همچنان خاکستری باقی می‌ماند.

با توجه به موارد فوق رعایت نکته های زیر ضروری است:

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

بازگشت به فهرست مجموعه آموزشی CSS