در جلسه قبل از آموزش 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) باشد یا یکی از کلمات کلیدی مجاز را در برگیرد. البته به خاطر داشته باشید که نمی توانید از مقادیر درصد یا مقادیر منفی استفاده کنید.
|
1 2 3 |
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: سه بعدی خارجی تعریف می کند
|
1 2 3 |
p { outline-style: double; } |
خصوصیت outline-color:
این خصوصیت رنگ outline را تعریف می کند. به مثال زیر توجه کنید:
|
1 2 3 4 |
p { outline-style: solid; outline-color: #0000ff; } |
شما می توانید خصوصیت outline-color را بر روی transparent( شفاف) تنظیم کنید.
نکته: خصوصیت outline-color اگر به تنهایی استفاده شود کار نخواهد کرد. ابتدا باید از خصوصیت outline-style برای تنظیم outlines استفاده شود.
خصوصیت مختصر نویسی outline:
خصوصیت outline در زبان CSS یک خصوصیت مختصر نویسی برای تنظیم یک یا چند خصوصیت فردی outline است.
|
1 2 3 |
p { outline: 5px solid #9acd32; } |
اگر مقدار خصوصیت outline به هنگام تنظیم خصوصیت مختصر نویسی outline حذف شده باشد یا اصلا مشخص نگردد مقدار پیش فرض برای آن خصوصیت مورد استفاده قرار خواهد گرفت.
نکته: اگر مقدار خصوصیت outline-color وجود نداشته باشد یا به هنگام تنظیم outlines برای آن المان مشخص نشده باشد، خصوصیت Color المان برای outline-color مورد استفاده قرار خواهد گرفت.
|
1 2 3 4 |
p { color: black; outline: 5px solid; } |
اما در مورد خصوصیت outline-style، حذف مقدار باعث می شود هیچ outline ای نمایش داده نشود زیرا مقدار خصوصیت outline-style بر روی none تنظیم شده است.
|
1 2 3 |
p { outline: 5px #00ff00; } |
حذف خطوط نقطه چین از اطراف لینک های فعال:
خصوصیت outline برای حذف خطوط نقطه چین از اطراف لینک های فعال مورد استفاده قرار می گیرد.
|
1 2 3 |
a, a:acive, a:focus { outline: none; /* Works in Firefox, Chrome, IE8 and above */ } |
امیدوارم در این بخش آموزش CSS, از ویژگی Outline در CSS نهایت استفاده را برده باشید.
در بخش بعدی با نشانگر ماوس در CSS آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
