جلسه شانزدهم آموزش css : مفهوم outline چیست ؟

با سلام خدمت دوستان عزیز. در خدمت شما هستیم با یکی دیگر از جلسه های آموزش css . در این جلسه می خواهیم شما را با ویژگی outline در css آشنا کنیم.

ویژگی outline شباهت بسیاری به ویژگی border دارد اما در موارد زیر با آن متفاوت است:

ویژگی outline فضایی را اشغال نکرده و هیچ گونه تاثیری بر روی مکان هیچ تگی ندارد.
ویژگی outline باید مستطیلی بوده و امکان گرد کردن لبه های آن وجود ندارد.
ویژگی outline برای چهار طرف تگ به یک صورت رسم می شود.

در ادامه به بررسی بیشتر این ویژگی خواهیم پرداخت. برای انجام تنظیمات مربوط به outline شما چهار ویژگی زیر را در اختیار دارید:

outline-width
outline-style
outline-color
outline

با ما همراه باشید تا در ادامه هر یک از این ویژگی ها را همراه با مثالی به شما آموزش دهیم:

1. ویژگی outline-width

این ویژگی ضخامت خطوط outline را مشخص می کند. برای مقدار دهی به این ویژگی می توان از مقادیر thin ، medium ، thick یا یک مقدار عددی استفاده کرد ، دقیقا همانطور که به ویژگی border-width مقدار دهی می کنید.

نکته: اگر مقدار outline را صفر قرار دهید به این معنی است که هیچ چیزی رسم نمی شود.

به مثال زیر توجه کنید:

<html>
   <head>
   </head>
   
   <body>
      <p style="outline-width:thin; outline-style:solid;">
      This text is having thin outline.
      </p>
      <br />
      
      <p style="outline-width:thick; outline-style:solid;">
      This text is having thick outline.
      </p>
      <br />
      
      <p style="outline-width:5px; outline-style:solid;">
      This text is having 5x outline.
      </p>
   </body>
   
</html>

حالا نتیجه را ببینید:

2. ویژگی outline-style

این ویژگی سبک خطوط outline را مشخص می کند . این ویژگی می تواند یکی از مقادیر زیر را بپذیرد:

none
solid
dotted
dashed
double
groove
ridge
inset
outset
hidden

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

<html>
   <head>
   </head>
   
   <body>
      <p style="outline-width:thin; outline-style:solid;">
      This text is having thin solid  outline.
      </p>
      <br />
      
      <p style="outline-width:thick; outline-style:dashed;">
      This text is having thick dashed outline.
      </p>
      <br />
      
      <p style="outline-width:5px;outline-style:dotted;">
      This text is having 5x dotted outline.
      </p>
   </body>
   
</html>

نتیجه را ببینید:

3. ویژگی outline-color

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

<html>
   <head>
   </head>
   
   <body>
      <p style="outline-width:thin; outline-style:solid;outline-color:red">
      This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style="outline-width:thick; outline-style:dashed;outline-color:#009900">
      This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style="outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
      This text is having 5x dotted blue outline.
      </p>
   </body>
   
</html>

نتیجه را ببینید:

4. ویژگی outline

شما با استفاده از این ویژگی می توانید تمامی سه ویژگی بالا را ، به صورت یکجا مشخص کنید. به مثال زیر توجه کنید:

<html>
   <head>
   </head>
   
   <body>
      <p style="outline:thin solid red;">
      This text is having thin solid red outline.
      </p>
      <br />
       
      <p style="outline:thick dashed #009900;">
      This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style="outline:5px dotted rgb(13,33,232);">
      This text is having 5x dotted blue outline.
      </p>
   </body>
   
</html>

به مثال زیر توجه کنید:

دوستان ، این جلسه هم به پایان رسید. موفق و پیروز باشید.

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

جلسه شانزدهم آموزش css : مفهوم outline چیست ؟

1. ویژگی outline-width

2. ویژگی outline-style

3. ویژگی outline-color

4. ویژگی outline

آیا نیاز به مدرک هم دارید؟