آموزش CSS

آموزش CSS - تعریف Outline

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

Outline در برابر Border:

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

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

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

خصوصیت outline-width:

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

p {
    outline-width: thick;
}

نکته: اگر مقدار مورد نظر برای خصوصیت 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: سه بعدی خارجی تعریف می کند

p {
    outline-style: double;
}

خصوصیت outline-color:

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

p {
    outline-style: solid;
    outline-color: #0000ff;
}

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

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

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

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

p {
    outline: 5px solid #9acd32;
}

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

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

p {
    color: black;
    outline: 5px solid;
}

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

p {
    outline: 5px #00ff00;
}

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

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

a, a:acive, a:focus {
    outline: none; /* Works in Firefox, Chrome, IE8 and above */
}
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

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

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...