جلسه 17 آموزش CSS: لینک ها (link) در CSS

سلام به رفیق گل خودم! 👋 خوش اومدی به یه جلسه دیگه از آموزش CSS رایا وردپرس. امروز می‌خوام تو رو با دنیای لینک‌ها تو CSS آشنا کنم؛ همون پل‌ های کوچولویی که وب‌سایت‌ها رو به هم وصل می‌کنن و بدونشون انگار تو یه جزیره گم‌شده‌ای! 🌴 تو این مقاله، می‌خوام بهت نشون بدم چطور می‌تونی با CSS به لینک‌هات استایل بدی، خوشگلشون کنی و یه تجربه کاربری فوق‌العاده بسازی. 🎨 پس تا آخر با من باش، چون قراره حسابی بهت خوش بگذره و کلی نکته کاربردی یاد بگیری! 😊

🧐 چرا لینک‌ها اینقدر مهم هستن؟

لینک‌ها قلب تپنده هر وب‌سایتی هستن! بدون اونا، کاربرات نمی‌تونن بین صفحات جابه‌جا بشن و توی یه صفحه زندونی میشن😬 . تو HTML، لینک‌ها با تگ <a> ساخته می‌شن و به طور پیش‌فرض یه ظاهر ساده دارن: آبی رنگن و زیرشون خط داره. ولی تو که نمی‌خوای به همین سادگی بذاریشون، درسته؟ 😉 با CSS می‌تونی این لینک‌ها رو هر جوری که دلت خواست تغییر بدی و با طراحی سایتت هماهنگشون کنی. حالا بریم ببینیم چطور می‌تونی این کار رو انجام بدی!

حالت‌ های مختلف لینک در CSS

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

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

• لینکی که هنوز روش کلیک نشده (a:link): این همون لینک تازه ای هست که کاربر هنوز نرفته سراغش.
• لینکی که روش کلیک شده (a:visited): وقتی کاربر یه بار روش کلیک کرده، این حالت فعال می‌شه.
• وقتی ماوس می‌ره روی لینک (a:hover): لحظه‌ای که ماوس رو کاربر میبره روی لینک، می‌تونی یه افکت باحال بهش بدی.
• لحظه کلیک روی لینک (a:active): دقیقاً همون لحظه‌ای که دکمه ماوس رو فشار میده کاربر!

حالا بیایم هر کدوم از اینا رو با جزئیات و مثال برات توضیح بدم تا دیگه هیچ سوالی تو ذهنت نمونه! 😄

نکته خیلی مهم: برای اینکه این حالت‌ها درست کار کنن و همدیگه رو نپوشونن، باید اون‌ها رو با یه ترتیب خاص توی کدهای CSS‌ات بنویسی! ترتیب جادویی و به‌یادموندنی اینه: L-V-H-A یا اگه بخوای راحت‌تر حفظ کنی: LoVe HAte (Link, Visited, Hover, Active). ❤️‍🔥💔

چرا ترتیب مهمه؟ اگه این ترتیب رو رعایت نکنی مثلا اگه a:hover رو قبل از a:visited بنویسی، استایل hover روی لینک‌هایی که قبلاً بازدید شدن اعمال نمی‌شه.. پس حتماً یادت باشه: a:link, a:visited, a:hover, a:active.

a:link { color: blue; text-decoration: none; } a:visited { color: purple; } a:hover { color: red; text-decoration: underline; } a:active { color: green; }

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

خداحافظی با خط زیر لینک‌ها: ویژگی text-decoration 👋

قبل از اینکه برم سراغ حالت های مختلف لینک ها یه نکته رو باید بهت بگم: به طور پیش‌فرض، لینک‌ها زیرشون خط دارن، یه خط صاف مشکی ولی تو می‌تونی این خط رو برداری، یا حتی خط رو بالای متن یا وسطش بذاری! با ویژگی text-decoration میتونی اینکارو انجام بدی.

فرض کن می‌خوای استایل لینک‌هات رو تغییر بدی. می‌تونی اینجوری این کار رو بکنی:

a { text-decoration: none; /* خط زیر لینک رو برمی‌داره */ } a:hover { text-decoration: overline; /* خط بالای لینک وقتی ماوس می‌ره روش */ } a:active { text-decoration: line-through; /* خط وسط لینک وقتی کلیک می‌کنی */ }

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

• text-decoration: none: خط زیر لینک رو کامل حذف می‌کنه.
• text-decoration: overline: یه خط بالای لینک می‌ذاره (اینجا برای حالت هاور استفاده شده).
• text-decoration: line-through: یه خط وسط متن لینک می‌کشه (اینجا برای حالت کلیک فعاله).

با این روش می‌تونی ظاهر لینک‌ها رو هر جوری که دوست داری تغییر بدی!

1. حالت a:link – لینکی که هنوز روش کلیک نشده

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

تو این کد، لینک‌هایی که هنوز کلیک نشدن، نارنجی می‌شن، زیرشون خط نداره و متنشون پررنگه. چطوره؟ 😎

2. حالت a:visited – لینک دیده‌ شده

این حالت برای لینک‌هایی هست که کاربر قبلاً روی اون‌ها کلیک کرده و صفحه مقصد رو دیده. رنگ پیش‌فرضش معمولاً بنفشه. می‌تونی این رنگ رو عوض کنی تا کاربر بدونه قبلاً کجاها رفته:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

اینجا لینک‌هایی که کلیک شدن، بنفش می‌شن و زیرشون خط می‌افته. اینجوری کاربر می‌فهمه قبلاً این لینک رو دیده!

3. حالت a:hover – وقتی ماوس می‌ره روی لینک

این یکی از باحال‌ترین حالتهاست! وقتی ماوس میره روی لینک، می‌تونی با یه افکت جذاب به کاربر نشون بدی که این المان قابل کلیکه. مثلاً رنگش رو عوض کن یا یه پس‌زمینه بذار.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

تو این مثال، وقتی ماوس می‌ره روی لینک، رنگش قرمز می‌شه، زیرش خط می‌افته و پس‌زمینه‌ش زرد می‌شه. خیلی خفنه، نه؟ 😍

4. حالت a:active – لحظه کلیک روی لینک

این حالت برای اون لحظه خیلی کوتاهه که کاربر روی لینک کلیک می‌کنه. شاید خیلی به چشم نیاد ولی می‌تونه یه فیدبک بصری سریع به کاربر بده.

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

اینجا لحظه کلیک، لینک آبی می‌شه و فونتش یه کم بزرگ‌تر می‌شه. حس خوبی به کاربر می‌ده! 😊

چرا استایل دادن به لینک‌ها برای سئو و کاربر مهمه؟ 🤔

شاید بپرسی این همه کار برای چی؟ استایل دادن درست به لینک‌ها خیلی خیلی مهمه:

1. تجربه کاربری (UX): کاربر راحت‌تر لینک‌ها رو پیدا می‌کنه، می‌فهمه روی چی کلیک کرده یا نکرده و وقتی ماوس رو روشون می‌بره، یه فیدبک بصری می‌بینه. این باعث می‌شه کار با سایتت لذت‌بخش‌تر باشه.
2. طراحی و زیبایی: لینک‌ها بخش مهمی از ظاهر سایت تو هستن. استایل مناسب به اون‌ها کمک می‌کنه سایتت حرفه‌ای‌تر و جذاب‌تر به نظر بیاد.
3. سئو (SEO): گوگل عاشق سایت‌هایی هست که کاربرهاش رو دوست داره و تجربه‌ی خوبی بهشون می‌ده. وقتی لینک‌های سایتت واضح و قابل کلیک باشن، کاربرها بیشتر توی سایتت می‌مونن و راحت‌تر بین صفحات جابه‌جا می‌شن . این سیگنال‌های مثبت برای گوگل خیلی مهمن و می‌تونه به بالا رفتن رتبه‌ات کمک کنه. حتی با استایل‌های مناسب، می‌تونی کاری کنی که لینک‌های مهم بیشتر به چشم بیان.

پایان داستان لینک‌ ها 😊

خب دوست من، دیگه به پایان این جلسه رسیدیم! امیدوارم حسابی از این جلسه لذت برده باشی و حالا دیگه استاد استایل‌دهی به لینک‌ها تو CSS شده باشی. 😎 با این چیزایی که یاد گرفتی، می‌تونی لینک‌هات رو جوری طراحی کنی که کاربرات عاشقش بشن و تجربه وب‌سایتت رو بهتر کنی.

اگه سوالی داری یا چیزی رو نفهمیدی، تو کامنت‌ها برام بنویس. قول می‌دم سریع جواب بدم و کمکت کنم! 🌈 مرسی که تا اینجا با من بودی، موفق باشی و تا جلسه بعدی، مراقب خودت باش! 👋

جلسه 4 آموزش CSS: انتخابگرها یا Selectors در CSS

مطالعه

جلسه 14 آموزش CSS: ویژگی Outline در CSS

مطالعه

جلسه 3 آموزش CSS: کامنت گذاری در CSS

مطالعه