آموزش کار با طرح کلی outline در css

با سلام خدمت شما همراهان گرامی سایت پرنیان طرح

در آموزش امروز،خصوصیت outline و نحوه کار با طرح کلی را آموزش خواهیم داد. طرح کلی ، فراتر از مرزها border است. تصویر زیر شما را در درک بهتر طرح کلی (outline) کمک می کند:

ویژگی های طرح کلی outline

css به شما این امکان را می دهد که مقادیر زیر را برای outline تنظیم کنید:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

outline-style

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

• dotted : یک طرح نقطه نقطه ای را تعریف می کند.
• dashed: یک طرح با خط های کوتاه تعریف میک ند.
• solid: یک طرح شامل یک خط ممتد را تعریف می کند.
• double: یک طرح با خط دوگانه را تعریف می کند.
• groove ; ridge ; inset ; outset : طرح های سه بعدی را تعریف می کنند. تفاوت این طرح ها در شدت تاثیررنگ و جهت قرارگیری آن در طرح خواهد بود.
• none: هیچ طرحی قرار نمی گیرد.
• hidden: یک طرح پنهان تعریف می کند.

نمونه ای از طرح های بالا

مثالی از کدنویسی و ایحاد طرح کلی در اطراف یک متن:

ایجاد طرح کلی با سبک نقطه ای در اطراف یک متن

[php]
p.dotted {outline-style: dotted;}
[/php]

برای ایجاد سایر طرح ها، فقط کافیست در بخش کدهای گفته شده، طرح دلخواه خود را به جای کلمه dotted قرار دهید.

outline-color:

از طریق این ویژگی می توانید رنگ دلخواه خود را برای طرح خود، انتخاب کنید. مقداردهی برای رنگ طرح، عینا مانند مقداردهی برای رنگ در مرزها می باشد.شما می توانید از این لینک آموزش مقدردهی رنگ برای مرزها را مطالعه نمایید.

شما می توانید از طریق این لینک آموزش های سایت پرنیان را درباره رنگ ها مطالعه نمایید.

مقداردهی برای رنگ ها را می توان به سه روش انجام داد.

• نام رنگ: کافیست نام رنگ دلخواه را  در بخش کدهای css قرار دهید.مثال:

[php]
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}
[/php]

کد بالا، یک مرز با مقدار1px ، و طرح کلی ساده تک خطی به رنگ قرمز، دور یک متن رسم خواهد کرد.

یک ویژگی دیگر برای outline

outline-color: invert

به شما این امکان را می دهد که به جای ایجاد طرح کلی در خارج از مرز، یک طرح کلی در داخل مرز تعریف نمایید.

[php]
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}
[/php]

کد بالا، طرح زیر را ایحاد خواهد کرد:

outline-width

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

معمولا عرض را به یکی از سه روش زیر تعیین می کنند:

• نازک : (thin) معمولا 1px
• متوسط : (medium) معمولا 3px
• ضخیم : (thick) معمولا 5px

و یا با مقادیری مانند : px، pt، cm، em، و غیره

مثالی از کدنویسی برای تعیین عرض

ابتدا در بخش کدهای css، کد زیر را وارد کنید:

[php]
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
[/php]

کد بالا، یک طرح با مرز1px ،به رنگ مشکی، و طرح ساده تک خطی به رنگ قرمز و عرض نازک تعریف میکند.

و سپس کدهای زیر را در بخش کدهای html وارد کنید.

[php]

در نهایت تصویر زیر ایجاد خواهد شد:

outline-offset

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

کد زیر را در بخش css وارد کنید:
[php]
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
[/php]

این کد طرح زیر را در اطراف یک متن که شما به دلخواه خودتان نوشته اید، ایجاد می کند:

میخواهم بیشتر بدانم.