آموزش کار با طرح کلی outline در css
طرح کلی outline یکی دیگر از امکانات css است. و در طراحی و زیبا سازی ظاهری سایت کاربرد دارد.
برخلاف مرز(border)،طرح کلی،بیرون از عنصری که در حال کار روی آن هستید قرار می گیرد. و امکان دارد با سایر عناصر موجود در صفحه همپوشانی داشته باشد.
باید توجه داشته باشید که برخلاف padding ،طرح کلی، بخشی از ابعاد عنصر نیستند.در ادامه آموزش با ما همراه باشید.
با سلام خدمت شما همراهان گرامی سایت پرنیان طرح
در آموزش امروز،خصوصیت 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: یک طرح پنهان تعریف می کند.
نمونه ای از طرح های بالا
مثالی از کدنویسی و ایحاد طرح کلی در اطراف یک متن:
ایجاد طرح کلی با سبک نقطه ای در اطراف یک متن
1 | p.dotted {outline-style: dotted;} |
برای ایجاد سایر طرح ها، فقط کافیست در بخش کدهای گفته شده، طرح دلخواه خود را به جای کلمه dotted قرار دهید.
outline-color:
از طریق این ویژگی می توانید رنگ دلخواه خود را برای طرح خود، انتخاب کنید. مقداردهی برای رنگ طرح، عینا مانند مقداردهی برای رنگ در مرزها می باشد.شما می توانید از این لینک آموزش مقدردهی رنگ برای مرزها را مطالعه نمایید.
شما می توانید از طریق این لینک آموزش های سایت پرنیان را درباره رنگ ها مطالعه نمایید.
مقداردهی برای رنگ ها را می توان به سه روش انجام داد.
- نام رنگ: کافیست نام رنگ دلخواه را در بخش کدهای css قرار دهید.مثال:
1 2 3 4 5 | p.ex1 { border: 1px solid black; outline-style: solid; outline-color: red; } |
کد بالا، یک مرز با مقدار۱px ، و طرح کلی ساده تک خطی به رنگ قرمز، دور یک متن رسم خواهد کرد.
یک ویژگی دیگر برای outline
outline-color: invert
به شما این امکان را می دهد که به جای ایجاد طرح کلی در خارج از مرز، یک طرح کلی در داخل مرز تعریف نمایید.
1 2 3 4 5 | p.ex1 { border: 1px solid yellow; outline-style: solid; outline-color: invert; } |
کد بالا، طرح زیر را ایحاد خواهد کرد:
outline-width
برای طرح شما یک عرض تعیین می کند. به این معنا که می توانید طرحی نازک، یا متوسط یا ضخیم بر دور عنصر اعمال کنید.
معمولا عرض را به یکی از سه روش زیر تعیین می کنند:
- نازک : (thin) معمولا ۱px
- متوسط : (medium) معمولا ۳px
- ضخیم : (thick) معمولا ۵px
و یا با مقادیری مانند : px، pt، cm، em، و غیره
مثالی از کدنویسی برای تعیین عرض
ابتدا در بخش کدهای css، کد زیر را وارد کنید:
1 2 3 4 5 6 | p.ex1 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: thin; } |
کد بالا، یک طرح با مرز۱px ،به رنگ مشکی، و طرح ساده تک خطی به رنگ قرمز و عرض نازک تعریف میکند.
و سپس کدهای زیر را در بخش کدهای html وارد کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | در نهایت تصویر زیر ایجاد خواهد شد: <h3><a href="https://www.w3schools.com/css/css_outline.asp"><img class="wp-image-2286 aligncenter" src="https://parniantarh.ir/wp-content/uploads/2019/07/v-fv-vb-300x22.png" alt="نمونه مقداردهی شده" width="845" height="62" /></a></h3> <h3></h3> <h3><span style="color: #339966">outline-offset</span></h3> این ویژگی، یک فضای خالی بین طرح کلی و مرز عنصر ایجاد می کند.مثال زیر نشان می دهد که فضای بین یک عنصر و طرح آن شفاف است. کد زیر را در بخش css وارد کنید: [php] p { margin: 30px; background: yellow; border: 1px solid black; outline: 1px solid red; outline-offset: 15px; } |
این کد طرح زیر را در اطراف یک متن که شما به دلخواه خودتان نوشته اید، ایجاد می کند:
پاسخی بگذارید