خانه / آموزش CSS / بخش یازدهم- آموزش CSS Outline
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
آموزش طرح کلی"

تاریخ بروزرسانی: ۲۱ بهمن ۱۳۹۷ تعداد بازدید : 11 بازدید بدون دیدگاه

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

قدم قبلی >< قدم بعدی
آموزش CSS Outline
آموزش طرح کلی CSS

 

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

مثال:

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

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

یک طرح نقطه نقطه را تعریف می کند

 

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

رنگ outline

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

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

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

مثال:

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

همین حالا ببینید:  بخش ششم- آموزش حاشیه ها (Borders)در CSS

تنظیم رنگ طرح

 

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

مثال:

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

خطی رنگی به عنوان طرح کلی رنگ

 

عرض outline

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

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

مثال:

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

همین حالا ببینید:  بخش سیزدهم- آموزش فونت CSS یا آموزش CSS Fonts

عرض طرح

 

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

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

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

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

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

مثال:

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

خصوصیت قابل مختصر نویسی

 

Outline Offset

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

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

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

مثال:

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

طرح کلی-Offset

 

گام قبلی >< گام بعدی
بخش یازدهم- آموزش CSS Outline
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=15335


کانال تلگرام تیک تم

مطلب پیشنهادی

آموزش فونت CSS در وردپرس

بخش سیزدهم- آموزش فونت CSS یا آموزش CSS Fonts

  فونت CSS خصوصیات فونت CSS ، خانواده فونت، ضخامت، اندازه و سبک متن را …

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

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