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