قالب بندی پیوندها

وردپرسی | طراحی سایت با وردپرس

وردپرسی فیدخوان سایت های مرتبط با سیستم مدیریت محتوای وردپرس می باشد. مطالبی شامل قالب های وردپرس، افزونه های وردپرس، هک های وردپرس و اخبار دنیای وردپرس. تمام مطالب برای رعایت حقوق نویسندگان دارای لینک منبع می باشد. سایت های مرتبط با وردپرس نیز که تمایل به ثبت فید خود در سایت وردپرسی دارند نیز می توانند از بخش ثبت سایت به ما اطلاع رسانی کنند. توجه داشته باشید که لازمه این کار داشتن فید مخصوص مطالب وردپرس می باشد.

قالب بندی پیوندها

  • 114 بازدید
  • ۰۱ بهمن, ۱۳۹۲
لینک ها می توانند توسط هر کدام از ویژگیهای سی اس اس مثل color,font-family,background و غیره قالب بندی شوند

ما می توانیم پیوندها را در هر کدام از شرایط زیر قالب بندی کنیم :

a:link : پیوندی که هنوز روی آن کلیک نشده است
a:visited : پیوند بعد از اینکه کاربر روی آن کلیک کرده است
a:hover : پیوند وقتی اشاره گر ماوس روی آن قرار گرفته است
a:active :پیوند وقتی اشاره گر ماوس روی آن بصورت فشرده است

مثال :

a:link {color:#FF0000;}      /* پیوند کلیک نشده */
a:visited {color:#00FF00;}  /* پیوند بعد از کلیک شدن */
a:hover {color:#FF00FF;}  /* پیوند زمانیکه ماوس روی آن است */
a:active {color:#0000FF;}  /*پیوند وقتی اشاره گر روی ان است و دکمه ماوس فشرده است */

خط اول :

رنگ متن پیوند را تا زمانیکه هنوز روی پیوند کلیک نشده مشخص می کند

خط دوم :

رنگ متن پیوند را بعد از اینکه روی پیوند کلیک شد مشخص می کند

خط سوم :

رنگ متن پیوند را زمانیکه اشاره گر ماوس بدون فشردن هیچ دکمه ای اط ماوس روی پیوند قرار دارد مشخص می کند

خط چهارم :

رنگ متن پیوند را زمانیکه اشاره گر روی متن پیوند قرار دارد و دکمه ماوس بصورت فشرده است مشخص می کند

 مشاهده و اجرای برنامه کامل


زمان نوشتن دستورات قالب بندی  پیوند باید ترتیب زیر را رعایت کنید

ابتدا قالب بندی a:link

سپس قالب بندی a:visited

سپس قالب بندی a:hover

و در نهایت قالب بندیa:active

را مشخص نمائید


مثال ۲:

اگر می خواهید هیچ گاه پیوند شما حالت زیر خط نداشته باشد از ویژگی text-decoration استفاده نمائید

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

در مثال بالا مشخص شده است متن پیوند در شرایطی که هنوز روی آن کلیک نشده یا بعد از اینکه روی ان کلیک شد خط زیر نداشته باشد

و در خط سوم و چهارم مشخص شده زمانیکه ماوس بدون فشردن دکمه روی پیوند قرار گرفته و یا در زمانیکه ماوس روی پیوند قرار گرفته و دکمه ماوس فشرده است متن پیوند زیر خط دار شود .

مشاهده و اجرای برنامه کامل


مثال ۳:

شما می توانید رنگ زمینه پیوند را در شرایط مختلف آن مشخص نمائید

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

مشاهده و اجرای برنامه کامل

ادامه مطلب: آموزش طراحی سایت




ارسال نظر