این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با لینک ها در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با لینک ها در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با لینک ها در CSS
اگه یادتون باشه در آموزش زبان HTML ما با لینک ها کار کردیم و خب میدونید که ما با استفاده از تگ a میتونیم یک لینک رو درون یک صفحه وب ایجاد نماییم.
پیشنهاد میکنم آموزش کار با لینک ها را در HTML مشاهده نمایید.
همچنین میدونیم که لینک ها دارای چندین حالت مختلف می باشند، یعنی مثلا حالتی که ماوس میاد روش یا حالتی که کلیک میشه روش و یا مثلا حالتی که مشخص باشه فلان لینک از قبل روش کلیک شده.
پس بطور کلی یک لینک دارای حالت های مختلف زیر می باشد :
- لینکی که هنوز روش کلیک نشده
- لینکی که روش کلیک شده
- لحظه ی کلیک روی لینک
- وقتی ماوس میره روی لینک
حالت های بالارو در CSS به نام های زیر میشناسیم ، یعنی اگه بخوایم حالت های بالارو تغییر بدیم باید از دستورات زیر که مربوط به لینک ها است استفاده نماییم :
a:link: هنوز روش کلیک نشدهa:visited: روش کلیک شدهa:hover: وقتی ماوس میره روشa:active: لحظه کلیک روی لینک
طبق استانداردی که در این مورد وجود داره ، میگه باید a:hover بعد از a:link و a:visited نوشته شود و a:active باید بعد از a:hover نوشته شود.
مثال : نمایش یک لینک در حالت های مختلف
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> a:link{ color:blue; } a:visited{ color:green; } a:hover{ color:red; } a:active{ color:yellow; } </style> |
Free-Learn
ویژگی Text-Decoration لینک ها در CSS
اگه توجه کرده باشید یک لینک بصورت پیش فرض یک خط مشکی صاف زیرش کشیده شده است، این خط صاف با استفاده از ویژگی text-decoration ایجاد می شود که ما میتوانیم آن را تغییر و یا بطور کلی حذف نماییم.
مثال : کاری کردیم که وقتی ماوس میره روی لینک زیرش خط کشیده شه
|
1 2 3 4 |
a:hover{ color:red; text-decoration:underline; } |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : ایجاد یک دکمه لینک دار
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> a:link, a:visited{ text-decoration:none; background-color:#2196f3; color:#fff; padding:10px; text-align:center; transition:0.4s; border-radius:6px; } a:hover{ background-color:#00b185; color:#fff; border-radius:30px; } </style> |
مثال شماره ۲ : دکمه تمام عرض ( عرض %۱۰۰ )
|
1 2 3 |
a.MyLink{ display:block; } |
