آموزش CSS پیشرفته : استایلدهی به لینکها
هنگام استایلدهی به لینکها، درک این نکته مهم است که چرا استایلهای پیشفرض لینک مهم هستند، چگونه میتوان از شبهکلاسها برای استایلدهی مؤثر به حالتهای لینک استفاده کرد و چگونه میتوان لینکها را برای استفاده در ویژگیهای رابط کاربری رایج و متنوع مانند منوها و تبهای ناوبری استایلدهی کرد. در این مقاله به همه این مباحث خواهیم پرداخت.
اولین چیزی که باید درک شود، مفهوم حالتهای لینک است - حالتهای مختلفی که لینکها میتوانند در آنها وجود داشته باشند. این حالتها را میتوان با استفاده از شبه کلاسهای مختلف استایلبندی کرد:
لینک: لینکی که مقصدی دارد (یعنی فقط یک لنگر نامگذاری شده نیست)، با استفاده از شبه کلاس استایلبندی میشود.
بازدید شده: لینکی که قبلاً بازدید شده است (در تاریخچه مرورگر وجود دارد)، با استفاده از شبه کلاس استایلبندی میشود.
هاور: لینکی که نشانگر ماوس کاربر روی آن قرار میگیرد، با استفاده از شبه کلاس استایلبندی میشود.
تمرکز: لینکی که فوکوس شده است (مثلاً توسط کاربر صفحه کلید با استفاده از کلید Tab یا چیزی مشابه به آن منتقل میشود، یا با استفاده از به صورت برنامهنویسی فوکوس شده است) - این با استفاده از شبه کلاس استایلبندی میشود.
فعال: لینکی که فعال شده است (مثلاً روی آن کلیک شده است)، با استفاده از شبه کلاس استایلبندی میشود.
مثال زیر نشان میدهد که یک لینک به طور پیشفرض چگونه به نظر میرسد و چگونه رفتار میکند، اگرچه CSS متن را بزرگ و در مرکز قرار میدهد تا برجستهتر شود. میتوانید ظاهر و رفتار سبک پیشفرض در این مثال را با سایر لینکهای این صفحه که سبکهای CSS بیشتری اعمال کردهاند، مقایسه کنید. لینکهای پیشفرض دارای ویژگیهای زیر هستند:
لینکها زیرخطدار هستند.
لینکهای بازدید نشده آبی هستند.
لینکهای بازدید شده بنفش هستند.
با نگه داشتن ماوس روی یک لینک، نشانگر ماوس به یک نماد دست کوچک تبدیل میشود.
لینکهای متمرکز دارای یک طرح کلی در اطراف خود هستند - باید بتوانید با فشار دادن کلید Tab با صفحه کلید روی لینکهای این صفحه تمرکز کنید.
لینکهای فعال قرمز هستند. هنگام کلیک روی لینک، دکمه ماوس را نگه دارید.
تمام نمونههای لینک در این صفحه به بالای پنجرهی تعبیهشدهی خود لینک میدهند. قطعهی خالی برای ایجاد نمونههای ساده و اطمینان از عدم خرابی نمونههای زنده، که هر کدام در یک قرار دارند، استفاده میشود.
جالب توجه است که سبکهای پیشفرض تقریباً مشابه همانهایی هستند که در اوایل مرورگرها در اواسط دههی 1990 وجود داشتند. دلیل این امر این است که کاربران این رفتار را میدانند و انتظار دارند - اگر لینکها به طور متفاوتی استایلبندی میشدند، افراد را گیج میکردند. این بدان معنا نیست که شما اصلاً نباید به لینکها استایل بدهید. این فقط به این معنی است که نباید خیلی از رفتار مورد انتظار منحرف شوید. شما حداقل باید:
برای لینکها از زیرخط استفاده کنید، اما برای موارد دیگر نه. اگر نمیخواهید زیر لینکها خط بکشید، حداقل آنها را به روش دیگری برجسته کنید.
کاری کنید که هنگام قرار گرفتن موس/فوکوس، به نوعی واکنش نشان دهند و هنگام فعال شدن، کمی متفاوت باشند.
سبکهای پیشفرض را میتوان با استفاده از ویژگیهای CSS زیر خاموش/تغییر داد:
رنگ برای رنگ متن. مکاننما برای سبک اشارهگر ماوس - نباید این را خاموش کنید مگر اینکه دلیل خیلی خوبی داشته باشید.
outline برای طرح کلی متن. یک outline شبیه به یک حاشیه است. تنها تفاوت این است که یک حاشیه فضای داخل کادر را اشغال میکند و outline اینطور نیست: outlineها روی پسزمینه قرار میگیرند. outline یک کمک دسترسی مفید است، بنابراین نباید بدون اضافه کردن روش دیگری برای نشان دادن لینک متمرکز، حذف شود.
شما فقط به ویژگیهای بالا برای استایلدهی به لینکهایتان محدود نیستید - میتوانید از هر ویژگی که دوست دارید استفاده کنید.
حالا که حالتهای پیشفرض را با جزئیات بررسی کردیم، بیایید به مجموعهای از سبکهای پیوند معمول نگاهی بیندازیم.
برای شروع، مجموعه قوانین خالی خود را مینویسیم:
این ترتیب مهم است زیرا سبکهای پیوند بر اساس یکدیگر ساخته میشوند. برای مثال، سبکهای موجود در قانون اول برای تمام سبکهای بعدی نیز اعمال میشوند. وقتی یک پیوند فعال میشود، معمولاً ماوس روی آن نیز قرار میگیرد. اگر این موارد را به ترتیب اشتباه قرار دهید و ویژگیهای یکسانی را در هر مجموعه قانون تغییر دهید، همه چیز آنطور که انتظار دارید کار نخواهد کرد. برای به خاطر سپردن ترتیب، میتوانید از یک یادآور مانند LoVe Fears HAte استفاده کنید.
حالا بیایید اطلاعات بیشتری اضافه کنیم تا این سبک به درستی تنظیم شود:
ما همچنین چند نمونه HTML برای اعمال CSS به موارد زیر ارائه خواهیم داد:
خب، اینجا چه کار کردیم؟ این قطعاً با استایل پیشفرض متفاوت به نظر میرسد، اما همچنان تجربهای آشنا برای کاربران فراهم میکند تا بدانند چه اتفاقی میافتد:
دو قانون اول برای این بحث چندان جالب نیستند.
قانون سوم از انتخابگر a برای حذف خطوط فوکوس (که به هر حال در مرورگرهای مختلف متفاوت است) استفاده میکند.
در مرحله بعد، از انتخابگرهای و برای تنظیم چند تغییر رنگ روی لینکهای بازدید نشده و بازدید شده استفاده میکنیم تا آنها متمایز باشند.
دو قانون بعدی از و برای تنظیم لینکهای فوکوس شده و معلق به گونهای که زیرخط نداشته باشند و رنگ پسزمینه آنها متفاوت باشد، استفاده میکنند.
در نهایت، از برای دادن طرح رنگی معکوس به لینکها در حین فعال شدن استفاده میشود تا مشخص شود اتفاق مهمی در حال رخ دادن است!
لینکهای خودتان را استایلدهی کنید
برای این کار، از شما میخواهیم که مجموعه قوانین خالی ما را بردارید و تعریفهای خودتان را اضافه کنید تا لینکها واقعاً جذاب به نظر برسند. از تخیل خود استفاده کنید، دیوانهوار پیش بروید. مطمئنیم که میتوانید چیزی جذابتر و به همان اندازه کاربردی که مثال بالا ارائه داد، ارائه دهید.
به لینکها یک سبک پیشفرض بدهید که همیشه روی آنها اعمال شود. لازم نیست فقط به رنگ متن پایبند باشید، بلکه مطمئن شوید که لینکها همچنان به عنوان لینک قابل تشخیص هستند.
به لینکهای بازدید شده رنگی کمی متفاوت از سبکهای پیشفرض لینکی که تنظیم کردهاید، بدهید.
به حالتهای فوکوس و هاور لینک، سبکی متمایز بدهید که آنها را نسبت به سایر لینکها برجسته کند. همچنین، وقتی لینکها در حال فوکوس/هاور هستند، خط زیرین پیشفرض را حذف کنید.
به حالت فعال، دوباره سبک متفاوتی بدهید.
اگر اشتباه کردید، میتوانید کار خود را با استفاده از دکمه تنظیم مجدد در playground پاک کنید. اگر واقعاً گیر کردید، میتوانید یک راهحل نمونه را در زیر خروجی مثال مشاهده کنید.
قرار دادن آیکون روی لینکها
یک روش معمول، اضافه کردن آیکون به لینکها برای نشان دادن نوع محتوایی است که لینک به آن اشاره میکند. بیایید به یک مثال ساده نگاهی بیندازیم که یک آیکون به لینکهای خارجی (لینکهایی که به سایتهای دیگر منتهی میشوند) اضافه میکند. آیکونهای لینک خارجی معمولاً فلشهایی هستند که از کادرها بیرون زدهاند. برای این مثال، از آیکون لینک خارجی از icons8.com استفاده خواهیم کرد.
ابتدا، چند کد HTML ساده برای استایلدهی:
در مرحله بعد، در اینجا چند CSS وجود دارد که جلوه مورد نظر ما را به ما میدهد:
خب، اینجا چه اتفاقی میافتد؟ از بیشتر CSS صرف نظر میکنیم، چون مثل مثالهای قبلی است. با این حال، قانون آخر جالب است: ما از انتخابگر شبه عنصر استفاده میکنیم. شبه عنصر 0.8em x 0.8em بعد از متن لنگر به عنوان یک بلوک درونخطی رندر میشود و آیکونی که در ویژگی background-image آن ارجاع داده شده است در پسزمینه شبه عنصر قرار میگیرد. ما همچنین مقداری margin-left برای ایجاد فاصله بین آیکون و کلمه قبل از آن اضافه کردهایم.
ما از یک واحد نسبی استفاده کردهایم: em. این واحد، آیکون را متناسب با اندازه متن لنگر اندازه میدهد. اگر اندازه متن لنگر تغییر کند، اندازه آیکون نیز متناسب با آن تنظیم میشود.
کلمه آخر: چگونه فقط لینکهای خارجی را انتخاب کردیم؟ خب، اگر لینکهای HTML خود را به درستی مینویسید، فقط باید از URLهای مطلق برای لینکهای خارجی استفاده کنید - استفاده از لینکهای نسبی برای لینک دادن به سایر قسمتهای سایت خودتان (مانند لینک اول) کارآمدتر است. بنابراین متن "http" فقط باید در لینکهای خارجی (مانند لینکهای دوم و سوم) ظاهر شود و میتوانیم این را با یک انتخابگر ویژگی انتخاب کنیم: عناصر را انتخاب میکند، اما فقط در صورتی که دارای ویژگی href با مقداری باشند که با "http" شروع شود.
خب، همین. سعی کنید بخش وظیفه بالا را دوباره مرور کنید و این تکنیک جدید را امتحان کنید!
اگر هنوز با پسزمینهها و طراحی وب واکنشگرا آشنا نیستید، نگران نباشید؛ این موارد در جاهای دیگر توضیح داده شدهاند.
استایلدهی به لینکها به عنوان دکمه
ابزارهایی که تاکنون در این مقاله بررسی کردهاید، میتوانند به روشهای دیگری نیز مورد استفاده قرار گیرند. به عنوان مثال، حالتهایی مانند شناور شدن میتوانند برای استایلدهی به عناصر مختلف، نه فقط لینکها، استفاده شوند - ممکن است بخواهید حالت شناور شدن پاراگرافها، موارد لیست یا موارد دیگر را استایلدهی کنید.
علاوه بر این، لینکها معمولاً طوری استایلبندی میشوند که مانند دکمهها رفتار کنند. یک منوی ناوبری وبسایت میتواند به عنوان مجموعهای از لینکها علامتگذاری شود و این میتواند به گونهای استایلبندی شود که مانند مجموعهای از دکمههای کنترل یا تبها به نظر برسد که به کاربر امکان دسترسی به سایر قسمتهای سایت را میدهد. بیایید نحوهی انجام این کار را بررسی کنیم.
ابتدا، کمی HTML:
HTML یک عنصر شامل لینکهای ما است.
CSS شامل استایلبندی برای کانتینر و لینکهای موجود در آن است.
قانون دوم میگوید: را با کلاس "container" تعریف میکند.
کانتینر یک flexbox است. آیتمهایی که در آن قرار دارند - در این مورد لینکها - آیتمهای flex خواهند بود.
فاصله بین آیتمهای flex برابر با 0.625٪ از عرض کانتینر خواهد بود.
قانون سوم لینکها را استایلبندی میکند:
اولین تعریف، flex: 1، به این معنی است که عرض آیتمها طوری تنظیم میشود که از تمام فضای موجود در کانتینر استفاده کنند.
در مرحله بعد، text-decoration و outline پیشفرض را غیرفعال میکنیم - نمیخواهیم ظاهر ما را خراب کنند.
سه تعریف آخر این است که متن را درون هر لینک در مرکز قرار دهیم، line-height را روی 3 تنظیم کنیم تا به دکمهها ارتفاع بدهیم (که مزیت قرار دادن متن در مرکز به صورت عمودی را نیز دارد) و رنگ متن را روی سیاه تنظیم کنیم.
