سلام به همه دوستداران برنامهنویسی! امروز میخواهیم درباره چگونگی ایجاد یک لینک دلخواه با استفاده از CSS صحبت کنیم. یکی از ویژگیهای جالب CSS قابلیتهای فوقالعاده برای کنترل ظاهری و مدل نمایش لینکها است. شما میتوانید با استفاده از CSS لینکی ایجاد کنید که کاملاً با طرحبندی و نیازهای شما هماهنگ باشد.
برای مثال، شاید بخواهید رنگ لینکها، اندازه فونت، یا حتی وضعیتهای تعاملی آنها را تغییر دهید. نوع نمایش لینکها میتواند تجربه کاربری را به طور شگرفی بهبود بخشد.
بسیاری از شما شاید تجربه کردهاید که میخواهید به لینکها استایلای خاص بدهید، به ویژه اگر میخواهید طراحی سایت شما منحصر به فرد باشد. CSS به شما این امکان را میدهد تا بدون افزوده کدنویسی پیچیده، به این هدف برسید.
بیایید بررسی کنیم که چگونه میتوان بخش کوچکی از این خواستهها را با استفاده از CSS برآورده کرد. در ادامه نمونهای از کد CSS را برای شما قرار دادهایم که نحوه ویرایش ویژگیهای اصلی یک لینک را نمایش میدهد.
a {
color: #3498db;
text-decoration: none;
font-size: 18px;
}
a:hover {
color: #2ecc71;
text-decoration: underline;
}
a:visited {
color: #95a5a6;
}
a:active {
color: #e74c3c;
}
توضیحات خط به خط:
a
: استایلدهی به لینکهای عادی
color: تعریف رنگ پیشفرض لینک با مقدار #3498db
text-decoration: حذف خط زیرین پیشفرض لینک
font-size: تعیین اندازه فونت لینک به 18px
a:hover
: استایلدهی زمانی که موس بر روی لینک قرار دارد
color: تغییر رنگ لینک به سبز روشن #2ecc71
text-decoration: اضافه کردن خط زیرین به لینک در هنگام هاور
a:visited
: استایلدهی لینکهای بازدید شده
color: تغییر رنگ لینکهای بازدید شده به #95a5a6
a:active
: استایلدهی لینک در لحظه کلیک شدن
color: تغییر رنگ لینک به قرمز #e74c3c