میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

لینک Link در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش لینک Link در CSS با من همراه باشید.

با استفاده از CSS می توان لینک ها را به روش های مختلفی استایل دهی کرد. در این فصل با انواع صفاتی که برای فرمت بندی یک لینک استفاده می شود آشنا خواهیم شد.

 


فرمت دهی به لینک ها

لینک ها با هر صفتی از زبان CSS می توانند فرمت دهی شوند (مانند color،font-family،background و …)

 

a {
    color: hotpink;
}

به علاوه ، لینک ها بسته به وضعیت های مختلفی که در آن قرار می گیرند  می توانند فرمت دهی شوند.

چهار وضعیتی که لینک ها در آن قرار می گیرند عبارت است از :

  • a:link – یک لینک در وضعیت عادی و ملاقات نشده
  • a:visited – لینکی که کاربر آن را ملاقات کرده است
  • a:hover – یک لینک در موقعی که نشانگر موس روی آن قرار می گیرد
  • a:active – لحظه ای که لینک کلیک می شود

 

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

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

  • a:hover باید بعد از a:link و a:visited قرار بگیرد
  • a:active باید بعد از a:hover قرار بگیرد

 


صفت text-decoration

از صفت text-decoration اغلب برای حذف زیر خط از لینک ها استفاده میشود :

 

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}


صفت background-color

از صفت background-color برای مشخص کردن رنگ پس زمینه ی یک لینک استفاده می شود :

 

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}


استفاده از CSS برای ساخت یک دکمه ی لینک

با ترکیب چندین صفت از زبان CSS می توان یک لینک را همچون یک دکمه طراحی کرد. نمونه مثال زیر نحوه ی ایجاد یک دکمه ی لینک را نشان میدهد :

 

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

 

 


امیدواریم آموزش لینک Link در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
csslink csslink css w3schoolslink در cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاستایل لینک ها در cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfبرداشتن خط زیر لینک در cssپیوند css به htmlتغییر رنگ لینک در cssتگ link در cssتگ لینک در cssتنظیمات لینک در cssحذف خط زیر لینک در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهدستور لینک در cssساختار دستورات CSSساختن لینک در cssسی اس اسفارسی w3schoolsکتاب آموزش css فارسیکد link در cssکد لینک در cssلینک css به htmlلینک css در htmlلینک به cssلینک دادن css به htmlلینک در cssلینک فایل cssلینک فایل css به htmlلینک ها در css
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟