| قدم قبلی > | < قدم بعدی |
CSS Outline (طرح کلی CSS)
یکoutline یا طرح کلی، خطی است که در اطراف عناصر بیرون از حاشیه ها (borders) ایجاد می شود تا عنصر “برجسته” شود.
CSS دارای ویژگی های زیر است:
- outline-style
- outline-color
- outline-width
- outline-offset
- outline
نکته: طرح کلی با حاشیه ها متفاوت است! بر خلاف حاشیه ، طرح کلی خارج از حاشیه عنصر کشیده شده و ممکن است با سایر محتوا همپوشانی داشته باشد. همچنین، طرح کلی بخشی از ابعاد عنصر نیست؛ عرض و ارتفاع کلی عنصر توسط عرض طرح کلی تاثیر نمی پذیرد.
سبک outline
خصوصیت سبک outline، سبک طرح کلی را مشخص می کند و می تواند یکی از مقادیر زیر را داشته باشد:
dotted(نقطه نقطه) – یک طرح نقطه نقطه را تعریف می کند
dashed(نقاشی شده) – یک خط نقاشی را تعریف می کند
solid(جامد) – یک طرح جامع را تعریف می کند
double(دوتایی) – یک طرح دو بعدی را تعریف می کند
groove(شیار) – یک طرح سه بعدی را تعریف می کند
ridge ()– یک خط سه بعدی ریاضی را تعریف می کند
inset ()– یک طرح سه بعدی را تعریف می کند
outset(ابتدای) – یک طرح اولیه ۳D را تعریف می کند
none(هیچ کدام) – هیچ نظری را تعریف نمی کند
hidden(پنهان) – یک طرح پنهان را تعریف می کند
مثال زیر نشان می دهد مقادیر سبک های مختلف:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ | <html> <head> <style> p {outline-color:red;} p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;} p.solid {outline-style: solid;} p.double {outline-style: double;} p.groove {outline-style: groove;} p.ridge {outline-style: ridge;} p.inset {outline-style: inset;} p.outset {outline-style: outset;} </style> </head> <body> <h2>The outline-style Property</h2> <p class="dotted">A dotted outline</p> <p class="dashed">A dashed outline</p> <p class="solid">A solid outline</p> <p class="double">A double outline</p> <p class="groove">A groove outline. The effect depends on the outline-color value.</p> <p class="ridge">A ridge outline. The effect depends on the outline-color value.</p> <p class="inset">An inset outline. The effect depends on the outline-color value.</p> <p class="outset">An outset outline. The effect depends on the outline-color value.</p> </body> </html> |
با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:
نکته: هیچ کدام از خواص طرح کلی هیچ اثری نخواهند داشت، مگر اینکه مشخصه سبک طراحی شده باشد!
رنگ outline
برای تنظیم رنگ طرح، از ویژگی outline-color استفاده می شود.
رنگ را می توان توسط عناصر زیر تعیین کرد:
name – یک نام برای رنگ مشخص کنید، مانند “red”
RGB – مقدار RGB را مشخص کنید، مانند“rgb(255,0,0)”
Hex – شماره عدد رنگ را در مبنای شانزده مشخص کنید، مانند “# ff0000”
invert – بکار بردن یک لایه رنگ معکوس (که تضمین می کند که طرح کلی قابل مشاهده است، صرف نظر از پس زمینه رنگی)
مثال زیر چند طرح کلی با رنگ های مختلف را نشان می دهد. همچنین توجه داشته باشید که این عناصر دارای حاشیه نازک سیاه و سفید درون طرح هستند:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ | <html> <head> <style> p.ex1 { border: ۱px solid black; outline-style: solid; outline-color: red; } p.ex2 { border: ۱px solid black; outline-style: double; outline-color: green; } p.ex3 { border: ۱px solid black; outline-style: outset; outline-color: yellow; } </style> </head> <body> <h2>The outline-color Property</h2> <p class="ex1">A solid red outline.</p> <p class="ex2">A double green outline.</p> <p class="ex3">An outset yellow outline.</p> </body> </html> |
مثال زیر از خطی رنگی به عنوان طرح کلی رنگ استفاده می کند انجام این کار تضمین می کند که طرح بدون در نظر گرفتن پس زمینه رنگ قابل مشاهده است.
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ | <html> <head> <style> p.ex1 { border: ۱px solid yellow; outline-style: solid; outline-color: invert; } </style> </head> <body> <h2>Using outline-color:invert</h2> <p class="ex1">A solid invert outline.</p> </body> </html> |
با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:
عرض outline
خصوصیت outline-width عرض طرح را می دهد مشخص می کند و می تواند یکی از مقادیر زیر را داشته باشد:
thin (نازک، معمولا ۱px)
medium (متوسط، معمولا ۳ پیکسل)
thick (ضخیم، به طور معمول ۵px)
A specific size (یک اندازه مشخص، در px، pt، cm، em، و غیره)
مثال زیر نشان می دهد برخی از خطوط با عرض های مختلف:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ | <html> <head> <style> p.ex1 { border: ۱px solid black; outline-style: solid; outline-color: red; outline-width: thin; } p.ex2 { border: ۱px solid black; outline-style: solid; outline-color: red; outline-width: medium; } p.ex3 { border: ۱px solid black; outline-style: solid; outline-color: red; outline-width: thick; } p.ex4 { border: ۱px solid black; outline-style: solid; outline-color: red; outline-width: ۴px; }</style> </head> <body> <h2>The outline-width Property</h2> <p class="ex1">A thin outline.</p> <p class="ex2">A medium outline.</p> <p class="ex3">A thick outline.</p> <p class="ex4">A ۴px thick outline.</p> </body> </html> |
با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:
outline- ویژگی مختصر نویسی
خصوصیت طرح کلی یک خصوصیت قابل مختصر نویسی هست یک شرط کوتاه برای تنظیم ویژگی های زیر است:
- outline-width
- outline-style (required)
- outline-color
خصوصیت طرح به عنوان یک، دو یا سه مقدار از لیست بالا مشخص شده است.
مثال زیر برخی از خطوط مشخص شده با ویژگی مختصات خلاصه را نشان می دهد:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ | <html> <head> <style> p.ex1 {outline: dashed;} p.ex2 {outline: dotted red;} p.ex3 {outline: ۵px solid yellow;} p.ex4 {outline: thick ridge pink;} </style> </head> <body> <h2>The outline Property</h2> <p class="ex1">A dashed outline.</p> <p class="ex2">A dotted red outline.</p> <p class="ex3">A ۵px solid yellow outline.</p> <p class="ex4">A thick ridge pink outline.</p> </body> </html> |
با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:
Outline Offset
ویژگی های طرح کلی-Offset فضای بین یک طرح و لبه / حاشیه یک عنصر را اضافه می کند. فضای بین عنصر و طرح آن شفاف و غیر قابل دیدن است.
مثال زیر یک خط ۱۵px را خارج از لبه حاشیه مشخص می کند:
مثال زیر نشان می دهد که فضای بین یک عنصر و طرح آن شفاف است:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ | <html> <head> <style> p { margin: ۳۰px; border: ۱px solid black; outline: ۱px solid red; outline-offset: ۱۵px; } </style> </head> <body> <h2>The outline-offset Property</h2> <p>This paragraph has an outline ۱۵px outside the border edge.</p> </body> </html> |
با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.