لینک در CSS
لینک همان چیزی است که آدم‌ها با آن بین صفحه‌ها جابه‌جا می‌شوند. در CSS عنصر a و حالت‌هایش را استایل می‌کنید — بازدیدنشده، بازدیدشده، هاور، و فشردن — تا لینک کلیک‌پذیر به نظر برسد، با تعامل عوض شود، و خوانا بماند.
حالت‌های لینک یک‌نگاهه
📊 جعبهٔ ابزار حالت لینک
| حالت | کی اعمال می‌شود |
|---|---|
a / a:link |
لینک پیش‌فرض / بازدیدنشده |
a:visited |
لینکی که بازدیدکننده قبلاً باز کرده |
a:hover |
اشاره‌گر روی لینک است |
a:active |
لینک در حال فشردن است (mousedown) |
text-decoration |
زیرخط روشن یا خاموش — کنترل رایج لینک |
مرورگرها اغلب ترتیبی به‌نام LVHA را دوست دارند: :link، :visited، :hover، :active. اگر قواعد را به همین ترتیب بنویسید، کمتر پیش می‌آید حالت بعدی ناخواسته ببازد.
استایل پایهٔ لینک
از رنگ و زیرخط شروع کنید. خیلی از طرح‌های امروزی زیرخط پیش‌فرض را برمی‌دارند و موقع هاور برمی‌گردانند.
استایل پایهٔ لینک
cssa {
color: #0b5fff;
text-decoration: none;
}لینک‌های بازدیدشده
:visited می‌تواند رنگ را کمی جابه‌جا کند تا مسیرهای آشنا دیده شوند. تغییر را ملایم نگه دارید — حریم خصوصی محدودیت می‌گذارد چه چیزهایی روی visited قابل استایل است.
تن رنگ visited
cssa:visited {
color: #5b4b8a;
}بازخورد هاور
:hover واضح‌ترین نشانهٔ روزمره است. کمی تغییر رنگ، زیرخط، یا هر دو، می‌گوید «این تعامل‌پذیر است» بدون داد و فریاد.
زیرخط در هاور
cssa:hover {
color: #0842b8;
text-decoration: underline;
}active — لحظهٔ فشردن
:active وقتی لینک فشرده می‌شود روشن است. رنگ کمی تیره‌تر حس کوتاه «کلیک» می‌دهد.
فشردن active
cssa:active {
color: #062e80;
}عادت آرام لینک‌های ناوبری
حالت‌های LVHA را با هم بچینید، هاور را واضح نگه دارید، و فقط برای «تخت» به نظر رسیدن، حلقهٔ فوکوس را پاک نکنید. کاربر صفحه‌کلید به نشانهٔ دیدنی نیاز دارد.
لینک‌های آرام ناوبری
cssnav a:link,
nav a:visited {
color: #1a1a1a;
text-decoration: none;
}
nav a:hover,
nav a:active {
color: #0b5fff;
text-decoration: underline;
}
nav a:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}خودتان امتحان کنید
- برای
aرنگ پایه وtext-decoration: noneبگذارید. a:visitedبا رنگ کمی متفاوت اضافه کنید.- در
a:hoverزیرخط و رنگ تیره‌تر بگذارید. - روی
a:activeکمی بیشتر تیره کنید. nav aرا با ترتیب LVHA استایل کنید و:focus-visibleرا نگه دارید.
اشتباهات رایج
- نوشتن
:hoverقبل از:link/:visitedطوری که بعضی حالت‌ها هرگز برنده نشوند - برداشتن زیرخط و هر نشانهٔ دیگری که بگوید این متن لینک است
- هاور رنگین‌کمانی روی تک‌تک واژه‌های پاراگراف
outline: noneروی لینک بدون استایل جایگزین فوکوس- قاطی کردن این درس با text-shadow و سه‌نقطه (درس قبلی)
خلاصه
- لینک را با
aو حالت‌های:link،:visited،:hover،:activeاستایل کنید - ترتیب LVHA به cascade کمک می‌کند همان‌طور که انتظار دارید رفتار کند
- رنگ و
text-decorationکنترل‌های روزمره‌اند - هاور باید واضح باشد؛ تغییر visited ملایم بماند
- برای ناوبری با صفحه‌کلید، استایل فوکوس دیدنی نگه دارید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود