Outline در زبان CSS به خطی گفته می شود که دور تا دور عنصر (البته خارج از هر نوع مرزی مانند حاشیه هایش) کشیده می شود تا عنصر مورد نظر از نظر ظاهری جلب توجه کند. به تصویر زیر نگاه کنید:
تصویر شماره 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 را نامرئی می کند
بیایید این موارد را در قالب یک مثال ببینیم:
هشدار: هیچ کدام از مواردی که از این قسمت به بعد توضیح داده خواهند شد، کار نخواهند کرد مگر آنکه خصوصیت outline-style
را برایشان تعریف کرده باشید!
خصوصیت outline-color
از خصوصیت outline-color
برای تعیین رنگ outline ها استفاده می شود. برای تعیین رنگ این خصوصیت می توانید از یکی از روش های زیر استفاده کنید:
- تعیین رنگ با استفاده از نام تعریف شده ی رنگ ها (مانند red یا orange یا blue و …)
- تعیین رنگ با استفاده از کد های Hex
- تعیین رنگ با استفاده از کد های RGB
- تعیین رنگ با استفاده از invert (رنگ فعلی را معکوس می کند تا دیده شدن outline تضمین شود)
به مثال زیر توجه کنید:
اگر به خروجی بالا دقت کنید متوجه می شوید عناصر ما به علاوه ی outline یک border به رنگ سیاه نیز دارند:
وجود outline و border تفاوت آن ها را حداقل از نظر ظاهری مشخص می کند
تفاوت ظاهری outline و border را می توانید در تصویر بالا (که خروجی کد قبلی است) مشاهده کنید. همچنین می توانید با دستکاری کد بالا ضخامت border را بیشتر کنید و ببینید چه شکلی به دست می آورید.
در مثال بعدی می خواهیم از outline-color: invert
استفاده کنیم تا ببینیم معکوس شدن رنگ ها به چه معنی است:
شاید outline ما به دلیل کوچک بودن، مطلب را واضح نکند. من رنگ های تصویر شماره 1 (در ابتدای مقاله) را invert یا معکوس کرده ام. شما می توانید تفاوت حالت اصلی و حالت invert را مشاهده کنید:
جایگاه outline نسبت به حاشیه ها و margin ها و … (تصویر اصلی)جایگاه outline نسبت به حاشیه ها و margin ها و … (تصویر معکوس شده از نظر رنگی)
تفاوت کاملا واضح و آشکار است!
خصوصیت outline-width
خصوصیت outline-width
عرض outline ما را تعیین می کند. ما می توانیم این ضخامت را در واحد های مشخص (مانند px یا pt یا cm و …) تعیین کرده و یا از مقادیر از پیش تعیین شده ی زیر استفاده کنیم:
- thin (لاغر): معمولا در حدود 1 پیکسل
- medium (متوسط): معمولا در حدود 3 پیکسل
- thick (ضخیم): معمولا در حدود 5 پیکسل
بیایید نگاهی به یک مثال بیندازیم:
خصوصیت outline
خصوصیت outline
یک خصوصیت کوتاه شده برای دستور های زیر است:
outline-width
outline-style
(این مورد ضروری است)outline-color
خصوصیت outline
از یک، دو یا سه مقدار بالا تشکیل می شود و ترتیب آن ها هیچ اهمیتی ندارد. به مثال زیر توجه کنید:
فاصله بین outline و border
اگر بخواهید outline و border این قدر به هم نزدیک نباشند می توانید از خصوصیت outline-offset
استفاده کنید. خصوصیت outline-offset
بین outline و border فضای خالی اضافه می کند تا از هم جدا شوند. به مثال زیر توجه کنید:
حتی اگر پس زمینه ی پاگراف بالا را زرد رنگ کنیم متوجه می شویم که فضای بین outline و border زرد رنگ نمی شود. دلیل آن این است که این قسمت جزو محتوای اصلی عنصر به حساب نمی آید:
معمولا در دنیای امروزی وب کمتر موقعیتی پیش می آید که ما در آن از outline استفاده کنیم اما هنوز هم در شرایط خاص، استفاده ی خاص خودش را دارد. شاید شما بتوانید استفاده ی خوبی از آن بکنید! به هر حال امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو