آموزش کار با لینک ها در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با لینک ها در 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

مثال : نمایش یک لینک در حالت های مختلف

امتحان کنید

Free-Learn

ویژگی Text-Decoration لینک ها در CSS

اگه توجه کرده باشید یک لینک بصورت پیش فرض یک خط مشکی صاف زیرش کشیده شده است، این خط صاف با استفاده از ویژگی text-decoration ایجاد می شود که ما میتوانیم آن را تغییر و یا بطور کلی حذف نماییم.

از مقادیر زیر میتوان در ویژگی text-decoration استفاده نمود :

  • underline : بصورت پیش فرض این گزینه فعال می باشد
  • none : خط زیرلینک را حذف میکند

مثال :

امتحان کنید

Free-Learn

مثال های بیشتر

مثال شماره ۱ : ساخت دکمه با استفاده از دستورات CSS

امتحان کنید

مثال شماره ۲ : ساخت دکمه تمام عرض

امتحان کنید

مثال شماره ۳ : ساخت دکمه بهمراه افکت

امتحان کنید

Free-Learn