صفحه اصلی / آموزش CSS / بخش یازدهم- آموزش CSS Outline

بخش یازدهم- آموزش CSS Outline

 

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(پنهان) – یک طرح پنهان را تعریف می کند
مثال زیر نشان می دهد مقادیر سبک های مختلف:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

 

نکته: هیچ کدام از خواص طرح کلی(outline) هیچ اثری نخواهند داشت، مگر اینکه مشخصه سبک طراحی شده باشد!

رنگ outline

برای تنظیم رنگ طرح، از ویژگی outline-color استفاده می شود.

رنگ را می توان توسط عناصر زیر تعیین کرد:

name – یک نام برای رنگ مشخص کنید، مانند “red”
RGB – مقدار RGB را مشخص کنید، مانند“rgb(255,0,0)”
Hex – شماره عدد رنگ را در مبنای شانزده مشخص کنید، مانند “# ff0000”
invert – انجام یک معکوس رنگ (که تضمین می کند که طرح کلی قابل مشاهده است، صرف نظر از پس زمینه رنگی)
مثال زیر برخی از خطوط مختلف با رنگ های مختلف را نشان می دهد. همچنین توجه داشته باشید که این عناصر دارای مرز نازک سیاه و سفید درون طرح هستند:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

 

مثال زیر از خطی رنگی استفاده می کند: invert، که یک معکوس رنگ را انجام می دهد. این تضمین می کند که طرح بدون در نظر گرفتن پس زمینه رنگ قابل مشاهده است.

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

 

عرض outline

خصوصیات outline-width مشخص عرض طرح را می دهد و می تواند یکی از مقادیر زیر را داشته باشد:

نازک (معمولا ۱px)
متوسط ​​(معمولا ۳ پیکسل)
ضخیم (به طور معمول ۵px)
یک اندازه مشخص (در px، pt، cm، em، و غیره)
مثال زیر نشان می دهد برخی از خطوط با عرض های مختلف:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

 

 

outline – ویژگی مختصر نویسی

خصوصیت طرح کلی یک خصوصیت قابل مختصر نویسی هست یک شرط کوتاه برای تنظیم ویژگی های زیر است:

  • outline-width
  • outline-style (required)
  • outline-color

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

مثال زیر نشان می دهد برخی از خطوط مشخص شده با ویژگی مختصات خلاصه:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

 

Outline Offset

ویژگی های outline-offset فضای بین یک طرح و لبه / حاشیه یک عنصر را اضافه می کند. فضای بین عنصر و طرح آن شفاف و غیر قابل دیدن است.

مثال زیر یک خط ۱۵px را خارج از لبه حاشیه مشخص می کند:

مثال زیر نشان می دهد که فضای بین یک عنصر و طرح آن شفاف است:

مثال:

با اجرا کردن کد بالا باید تصویر زیر را در خروجی ببینید:

 

بخش یازدهم- آموزش CSS Outline

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

متن در CSS/بخش دوازدهم- آموزش CSS Text یا آموزش متن در CSS

  آموزش متن در CSS CSS Text در این درس به بررسی خصوصیات متن در CSS …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *