akofaraji.ir
Outline ها در زبان CSS
نوشته شده در تاریخ 30 خرداد 1403
نظرات: 0 امتیاز: 9 زمان مطالعه: 14 دقیقه
 
 
outline ها در CSS
 

Outline چیست؟

 

Outline در زبان CSS به خطی گفته می شود که دور تا دور عنصر (البته خارج از هر نوع مرزی مانند حاشیه هایش) کشیده می شود تا عنصر مورد نظر از نظر ظاهری جلب توجه کند. به تصویر زیر نگاه کنید:

جایگاه outline نسبت به حاشیه ها و margin ها و ...
تصویر شماره 1 – جایگاه outline نسبت به حاشیه ها و margin ها و …

 

نکته ی مهم این تصویر آن است که شما متوجه شوید outline ها کاملا بیرون از مرز ها و حاشیه های یک عنصر قرار می گیرند.

 

زبان CSS برای کار با outline ها دارای دستورات زیر است:

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

 

سوال: با این توصیفات تفاوت outline و border چیست؟

 

پاسخ: تفاوت outline و border هر چند جزئی است اما مهم است. حاشیه و outline از دو جهت اصلی با هم تفاوت دارند:

  • outline ها خارج از border های یک عنصر کشیده می شوند و ممکن است با عناصر خارجی دیگر تداخل داشته باشند و روی آن ها قرار بگیرند اما در border ها چنین مسئله ای صحیح نیست.
  • outline به هیچ عنوان جزو ابعاد (طول و عرض) یک عنصر حساب نمی شود و برخلاف border ها با تغییر دادن outline اندازه ی کلی عنصر ما تغییری نمی کند.

 

خصوصیت outline-style

 

خصوصیت outline-style استایل و ظاهر outline را مشخص کرده و می تواند مقادیر زیر را بگیرد:

  • dotted این گزینه outline را به صورت نقطه چین نمایش می دهد
  • dashed این گزینه outline را به صورت خط چین نمایش می دهد
  • solid این گزینه outline را به صورت عادی و خط صاف نمایش می دهد
  • double این گزینه outline را دو خطی می کند
  • groove سعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع شیاری) بدهد
  • ridge سعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع لبه دار) بدهد
  • inset سعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع فرو رفته) بدهد
  • outset سعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع برآمده) بدهد
  • none عنصر را بدون outline می کند
  • hidden این گزینه outline را نامرئی می کند

 

بیایید این موارد را در قالب یک مثال ببینیم:

 

مشاهده ی خروجی در JSBin

 

هشدار: هیچ کدام از مواردی که از این قسمت به بعد توضیح داده خواهند شد، کار نخواهند کرد مگر آنکه خصوصیت outline-style را برایشان تعریف کرده باشید!

 

خصوصیت outline-color

 

از خصوصیت outline-color برای تعیین رنگ outline ها استفاده می شود. برای تعیین رنگ این خصوصیت می توانید از یکی از روش های زیر استفاده کنید:

  • تعیین رنگ با استفاده از نام تعریف شده ی رنگ ها (مانند red یا orange یا blue و …)
  • تعیین رنگ با استفاده از کد های Hex
  • تعیین رنگ با استفاده از کد های RGB
  • تعیین رنگ با استفاده از invert (رنگ فعلی را معکوس می کند تا دیده شدن outline تضمین شود)

 

به مثال زیر توجه کنید:

 

مشاهده ی خروجی در JSBin

 

اگر به خروجی بالا دقت کنید متوجه می شوید عناصر ما به علاوه ی outline یک border به رنگ سیاه نیز دارند:

 

وجود outline و border تفاوت آن ها را حداقل از نظر ظاهری مشخص می کند
وجود outline و border تفاوت آن ها را حداقل از نظر ظاهری مشخص می کند

 

تفاوت ظاهری outline و border را می توانید در تصویر بالا (که خروجی کد قبلی است) مشاهده کنید. همچنین می توانید با دستکاری کد بالا ضخامت border را بیشتر کنید و ببینید چه شکلی به دست می آورید.

 

در مثال بعدی می خواهیم از outline-color: invert استفاده کنیم تا ببینیم معکوس شدن رنگ ها به چه معنی است:

 

مشاهده ی خروجی در JSBin

 

شاید outline ما به دلیل کوچک بودن، مطلب را واضح نکند. من رنگ های تصویر شماره 1 (در ابتدای مقاله) را invert یا معکوس کرده ام. شما می توانید تفاوت حالت اصلی و حالت invert را مشاهده کنید:

جایگاه outline نسبت به حاشیه ها و margin ها و ... (تصویر اصلی)

جایگاه outline نسبت به حاشیه ها و margin ها و … (تصویر اصلی)

جایگاه outline نسبت به حاشیه ها و margin ها و ... (تصویر معکوس شده از نظر رنگی)

جایگاه outline نسبت به حاشیه ها و margin ها و … (تصویر معکوس شده از نظر رنگی)

 

تفاوت کاملا واضح و آشکار است!

 

خصوصیت outline-width

 

خصوصیت outline-width عرض outline ما را تعیین می کند. ما می توانیم این ضخامت را در واحد های مشخص (مانند px یا pt یا cm و …) تعیین کرده و یا از مقادیر از پیش تعیین شده ی زیر استفاده کنیم:

  • thin (لاغر): معمولا در حدود 1 پیکسل
  • medium (متوسط): معمولا در حدود 3 پیکسل
  • thick (ضخیم): معمولا در حدود 5 پیکسل

 

بیایید نگاهی به یک مثال بیندازیم:

 

مشاهده ی خروجی در JSBin

 

خصوصیت outline

 

خصوصیت outline یک خصوصیت کوتاه شده برای دستور های زیر است:

  • outline-width
  • outline-style (این مورد ضروری است)
  • outline-color

 

خصوصیت outline از یک، دو یا سه مقدار بالا تشکیل می شود و ترتیب آن ها هیچ اهمیتی ندارد. به مثال زیر توجه کنید:

 

مشاهده ی خروجی در JSBin

 

فاصله بین outline و border

 

اگر بخواهید outline و border این قدر به هم نزدیک نباشند می توانید از خصوصیت outline-offset استفاده کنید. خصوصیت outline-offset بین outline و border فضای خالی اضافه می کند تا از هم جدا شوند. به مثال زیر توجه کنید:

 

مشاهده ی خروجی در JSBin

 

حتی اگر پس زمینه ی پاگراف بالا را زرد رنگ کنیم متوجه می شویم که فضای بین outline و border زرد رنگ نمی شود. دلیل آن این است که این قسمت جزو محتوای اصلی عنصر به حساب نمی آید:

 

مشاهده ی خروجی در JSBin

 

معمولا در دنیای امروزی وب کمتر موقعیتی پیش می آید که ما در آن از outline استفاده کنیم اما هنوز هم در شرایط خاص، استفاده ی خاص خودش را دارد. شاید شما بتوانید استفاده ی خوبی از آن بکنید! به هر حال امیدوارم از این قسمت لذت برده باشید.

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید