آموزش html5 و css3 جلسه ۷ خصوصیات های css

مطالب پیشنهادی برای شما مهمان عزیز

سلام ,

در ادامه  آموزش html5 و css3  در این مقاله در مورد خصوصیت های
text-decoration و visited: ,:active , :focus: , hover  در CSS آموزش خواهیم داد.
این  ویژگیها در کار با متن ها بسیار کاربردی می باشند که در ادامه آموزش با مثال هایی با کاربرد آنها آشنا خواهید شد.

ویژگی text-decoration

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

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

مقادیر ویژگی text-decoration

این ویژگی text-decoration می تواند چهار مقدار زیر را بپذیرد که هر کدام از این چهار مورد را به صورت جداگانه بررسی می کنیم

  • مقادیر  line-through خط را وسط متن قرار میده
  •  مقادیر overline خط را بالا متن قرار میده
  • مقادریر underline به صورت پیش فرص است
  • مقادریر none  خط را حذف می کن

آموزش خصوصیات های css

none

می توان خطوط قرار داده شده را حذف کرد. همانطور که اشاره کردیم تگ a (لینک) بصورت
پیشفرض دارای underline می باشد به همین دلیل مقدار none بیشترین کاربرد را در حذف خط زیر عنصر لینک دارد.

underline

یک خط پایین تمام خطوط عنصر کشیده می شود.

Overline

یک خط بالای سر تمام خطوط عنصر کشیده می شود.

line-through

یک خط روی تمام خطوط عنصر کشیده می شود.

بیشتر بخوانید :
آموزش html و css طراحی باکس نرم افزار های مورد نیاز | پاسخ وردپرس |

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

در ادامه  آموزش html5 و css3 می پردازیم به خصوصیت های

  • visited: در css

  • active: در css

  • focus در css

  • hover: در css

آموزش visited:

visited: در css

visited  در css یک pseudo-class می باشد که برای انتخاب و استایل دهی به عناصر لینکی (<a>) که قبلا بازدید شده اند استفاده می شود.

نکته این که این انتخابگر فقط عنصر لینکی (<a>) که دارای ویژگی href است را انتخاب می کند.

دو نکته مهم:

نکته اول : به دلیل امنیت و حفظ حریم شخصی کاربران, مرورگرهای مدرن استایل های قابل اعمال بر روی لینک از طریق انتخابگر visited: در css  را محدود کردند.
خصوصیت های قابل استفاده شامل color, background-color, border-color, outline-color and, column-rule-color می باشند.

نکته دوم :  یک ناهانجاری در رفتار background-color وجود دارد که زمانی که می خواهیم پس زمینه یک لینک را در حالت visited در css رنگ کنیم حتما باید آن لینک پس زمینه اش رنگ شده باشد. حتی اگر قبلا به آن استایل transparent هم داده شود کار نخواهد کرد, فقط باید یک رنگ به پس زمینه داده شده باشد.

آموزش html و css

آموزش html5 و css3

به این صورت باید عمل کنید مثل کد زیر

active: در css

active: در css  یک pseudo-class می باشد که با استفاده از آن می توان در CSS حالت فعال (active) یک عنصر را انتخاب, و بر روی آن عنصر در حالت فعالش استایل خاصی اعمال کرد.

بیشتر بخوانید :
آموزش html5 و css3 آموزش طراحی بخش محتوا سایت بخش تکمیلی | پاسخ وردپرس |

active: در css

active: در css یک عنصر را از زمان کلیک شدن تا زمان رها شدن مورد هدف قرار می دهد. استایل دهی یک عنصر در حالت فعال آن تجربه کاربری بهتری را به ارمغان می آورد. استایل دادن های اینچنینی باعث می شود تا کاربر مطمئن شود که عمل کلیک با موفقیت انجام شده یا اینکه متوجه می شود چند بار عمل کلیک را پشت سر هم انجام داده است.

active: در css معمولا برای عنصر لینک استفاده می شود اما می توان آن را بر روی هر عنصری در صفحه اعمال کرد. مثال زیر باعث می شود تا زمانی که بر روی هر a در صفحه کلیک شد رنگ پس زمینه آن تا زمان رها کردن کلیک به حالت قرمز  بماند:

focus در css

focus در css یک pseudo-class می باشد که برای انتخاب و استایل دهی به عناصری که در معرض تمرکز عملکرد کاربر قرار می گیرند, می باشد. حال این تمرکز می تواند با استفاده از کلیک کردن و یا با استفاده از صفحه کلید (زدن دکمه tab) باشد. عناصری که حالت focus را دارند معمولا لینک ها و عناصر فرم مثل input , textarea و غیره هستند.

آموزش focus در css

وقتی کاربر با استفاده از کلید tab روی عناصر فرم یا لینک ها تمرکز می کند مرورگرها معمولا به صورت پیشفرض یک خط بیرونی ( outline ) دور آن عناصر ترسیم می کنند که معمولا این استایل در همه مرورگرها یکسان نیست پس شما شاید بخواهید با استفاده از انتخابگر focus یک استایل مخصوص و البته یکسان در همه مرورگرها برای حالت focus آن عناصر در نظر بگیرید.

بیشتر بخوانید :
آموزش HTML5 و CSS3 جلسه 4 خواص یا صفات المان های HTML

ما در کد بالا اول خط بیرونی ( outline ) حذف کردیم و یک استایل جدید بهش اعمال کردیم

توجه داشته باشید که خیلی از کاربران با صفحه کلید بر روی عناصر صفحه حرکت می کنند پس برای آنها حالت focus خیلی با ارزش می باشد پس اگر استایل پیشفرض مرورگر را حذف می کنید حتما استایل جدیدی برای این حالت عناصر برای کاربران فراهم کنید.

hover: در css

از hover برای تعامل بهتر کاربر با عناصر استفاده می شود, به عنوان مثال می توان به کاربر اطمینان داد که عنصری که به آن اشاره می کند واقعا در وضعیت مورد اشاره بودن است. همینطور از این انتخابگر برای نمایش محتواهای مخفی و ثانویه استفاده می شود. به عنوان مثال برای نمایش زیرمنو ها استفاده از hover بسیار کاربردی و معمول است.

نکته : استفاده از hover برای دستگاهای لمسی توصیه نمی شود چون با مشکلاتی همراه خواهد بود.

از این لینک میتوانید به ماهیت hover ها در css پی ببرید

خوب دوستان عزیز این جلسه از آموزش آموزش html5 و css3  در وب سایت پاسخ وردپرس به پایان رسید امید وارد که مورد توجه شما قرار گرفته باشه منتظر نظرات با ارزش شما هستم موفق پیروز باشید توی زندگی

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

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