50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش CSS – ویژگی Outline در CSS

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با ویژگی Border در CSS آشنا شدید. در این بخش قصد داریم شما را با ویژگی Outline در CSS آشنا کنیم.

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

Outline در برابر Border:

همانطور که در ابتدای مقاله نیز بیان کردیم، Outline برای برجسته کردن یک المان مورد استفاده قرار می گیرد. یک Outline در نگاه کوتاه و اجمالی شبیه حاشیه است اما با آن فرق دارد. به تفاوت های این دو مورد توجه کنید:

  • outline فضایی را پر نمی کند زیرا همیشه بالای جعبه المان قرار می گیرد که ممکن است منجر به همپوشانی آن با سایر المان های موجود در صفحه شود.
  • outline بر خلاف حاشیه یا همان borders به شما اجازه نمی دهد هر لبه را با عرض متفاوتی تنظیم کنید یا رنگ و سبک متفاوتی برای هر لبه از المان داشته باشید. به خاطر بسپارید که outline در کل اطراف و کناره های المان یکسان است.
  • outline هیچ اثری بر روی المان های اطراف ندارد . فقط ممکن است با آن همپوشانی داشته باشد.
  • outline بر خلاف حاشیه اندازه یا موقعیت المان را تغییر نمی دهد.
  • outline ممکن است غیر مستطیلی نیز باشد.
  • outline جز box model نیست و تاثیری در عرض و ارتفاع المان ندارد.

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

خصوصیت outline-width:

خصوصیت outline-width عرض outline را که به یک المان افزوده شده است مشخص می کند. مقدار آن باید بر اساس طول ( پیکسل، Pt، Em) باشد یا یکی از کلمات کلیدی مجاز را در برگیرد. البته به خاطر داشته باشید که نمی توانید از مقادیر درصد یا مقادیر منفی استفاده کنید.

نکته: اگر مقدار مورد نظر برای خصوصیت outline-width وجود نداشته باشد یا اصلا مشخص نشده باشد، مقدار پیش فرض یعنی medium مورد استفاده قرار خواهد گرفت.

خصوصیت outline-style:

خصوصیت outline-style سبک و استایل را برای یک outline مشخص می کند. به عنوان مثال این سبک ممکن است به صورت نقطه ای باشد. این خصوصیت یکی از مقادیر زیر را اتخاذ خواهد کرد.

none, hidden, dashed, dotted, double, groove, inset, outset, ridge و solid.

none: معمولا در این شرایط outline تعریف نمی شود.

hidden: دارای outline پنهان است

dotted: دارای outline نقطه ای است

dashed: دارای outlineخط چین است

solid: در این شرایط outline با خط ممتد تعریف می شود

double: دو outline را تعریف می کند

groove: در این شرایط outline سه بعدی تعریف می شود

ridge: در این حالت خطوط outline به صورت سه بعدی تعریف می شود

outline inset سه بعدی داخلی تعریف می کند

outline outset: سه بعدی خارجی تعریف می کند

خصوصیت outline-color:

این خصوصیت رنگ outline را تعریف می کند. به مثال زیر توجه کنید:

شما می توانید خصوصیت outline-color را بر روی transparent( شفاف) تنظیم کنید.

نکته: خصوصیت outline-color اگر به تنهایی استفاده شود کار نخواهد کرد. ابتدا باید از خصوصیت outline-style برای تنظیم outlines استفاده شود.

خصوصیت مختصر نویسی outline:

خصوصیت outline در زبان CSS یک خصوصیت مختصر نویسی برای تنظیم یک یا چند خصوصیت فردی outline است.

اگر مقدار خصوصیت outline به هنگام تنظیم خصوصیت مختصر نویسی outline حذف شده باشد یا اصلا مشخص نگردد مقدار پیش فرض برای آن خصوصیت مورد استفاده قرار خواهد گرفت.

نکته: اگر مقدار خصوصیت outline-color وجود نداشته باشد یا به هنگام تنظیم outlines برای آن المان مشخص نشده باشد، خصوصیت Color المان برای outline-color مورد استفاده قرار خواهد گرفت.

اما در مورد خصوصیت outline-style، حذف مقدار باعث می شود هیچ outline ای نمایش داده نشود زیرا مقدار خصوصیت outline-style بر روی none تنظیم شده است.

حذف خطوط نقطه چین از اطراف لینک های فعال:

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

 

امیدوارم در این بخش آموزش CSS, از ویژگی Outline در CSS نهایت استفاده را برده باشید.

در بخش بعدی با نشانگر ماوس در CSS آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم
برچسب ها : ,

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link