آموزش CSSآموزش طراحی سایت

جلسه ۱۷ – outline در CSS

آشنایی کامل با کادر outline

ویژگی outline چیست؟ چگونه از کادر outline در Css استفاده کنیم؟

دومین نوع از کادرهای قابل مشاهده که در آموزش css به آنها می‌پردازیم، outline ها هستن.

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

اما تفاوت های بسیار بسیار اساسی و مهمی هم دارن که در مقاله تفاوت کادر های مختلف CSS، اون ها رو به صورت کامل بررسی کردیم.

outline ها، پشت سر border ها قرار می‌گیرن. به شکل زیر توجه کنین:

آشنایی با اوت لاین در سی اس اس
آشنایی با اوت لاین در سی اس اس

پس تا الان با نحوه کار با outline در css آشنا شدیم.

خاصیت های outline در CSS

برای تعریف کردن outline دور یک عنصر، کافیه از خاصیت های outline استفاده کنیم.

نحوه تعریف کردن outline، کاملا شبیه به نحوه تعریف کردن border هست.

این خاصیت ها عبارتند از:

  1. ‌outline-style: نوع حاشیه رو مشخص می‌کنه.
  2. outline-color: رنگ حاشیه رو مشخص می‌کنه.
  3. outline-width: ضخامت حاشیه رو مشخص می‌کنه.
  4. outline: خاصیت کوتاه شده یا shorthand property. تمام کار ها رو در یک خاصیت انجام می‌ده.

نوع حاشیه (outline-style) در ویژگی outline

  • None: هیچ حاشیه ای تعریف نمیشه. ( فرقی با فرانخوندن outline-style نداره )
  •  Dotted: حاشیه به شکل نقطه چین تعریف می‌کنه.
  •  Dashed: حاشیه به شکل خط چین تعریف می‌کنه.
  •  Solid: حاشیه به شکل خط ممتد تعریف می‌کنه.
  • Double: حاشیه به شکل دو خط موازی و روی هم تعریف می‌کنه.
  •  Groove: یک خط حاشیه ی سه بعدی نمایش می‌ده که در اونن خطوط بالایی و سمت چپ پررنگ تر از خطوط دیگه هستن.
  •  Ridge: در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شن.
  •  Inset: این مقدار یک حاشیه ی داخلی سه بعدی تعریف می‌کنه که در اون معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگه هستن.
  •  Outset: حاشیه ی سه بعدی خارجی تعریف می‌کنه که در اون خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگه هستن.

نکته: همونطور که در مقاله border گفته شد، شرط برقراری دستور border، اینه که خاصیت border-style فراخونی شه. در ویژگی outline هم این شرط رو داریم و بدون فراخونی خاصیت outline-style، دستور outline برقرار نمیشه.

 

ضخامت حاشیه (outline-width)

در این خاصیت، می‌تونیم ضخامت حاشیه ایجاد شده توسط صفت outline رو تعریف کنیم. مانند border ها، این خاصیت می‌تونه یا برحسب پیکسل و واحدهای دیگه باشه، یا برحسب سه مقدار thin، medium و thick.

p.one {
   outline-style: solid;
   outline-width: 5px;
}

p.two {
   outline-style: solid;
   outline-width: medium;
}

در اینجا قطعه کد دوم میگه:

در عناصر p، عنصری با کلاس two پیدا کن، به آن حاشیه ای ( از نژاد outline! ) از نوع solid (خط ممتد) و با ضخامت متوسط اضافه کن.

قطعه کد اول رو به خودتون می‌سپارم.

رنگ خط حاشیه (outline-color)

توسط این خاصیت می‌تونیم رنگ outline خودمون رو تعیین کنیم. مقادیر مورد قبول این خاصیت، از مقادیری تشکیل می‌شن که در مقاله های رنگ های CSS خوندیم، که عموما شامل سه مقدار زیر هستن:

نام پیش فرض – اسم رنگ دلخواه رو مشخص می‌کنه، مثل ” red”

()rgb – یک مقدار red blue green) rgb )  تعریف می‌کنه.

Hex – یک مقدار شانزده شانزدهی(hex) مثل “#ff0000” مشخص می‌کنه.

p.one {
   border-style: solid;
   border-color: red;
}

p.two {
   border-style: solid;
   border-color: #98bf21;
}

خاصیت outline یا outline shorthand property

توسط این خاصیت، می‌تونیم بدون تعریف کردن outline-style ،outline-width و outline-color، تنها با خاصیت outline، یک حاشیه کامل برای عنصرمون تعریف کنیم.

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

p {
   outline: 5px solid red;
}

تو کد بالا، برای عناصر p، حاشیه ای رو تعریف می‌کنیم که دارای ضخامت ۵ پیکسل، رنگ قرمز و از نوع ممتد هست.

مثال های ویژگی outline

تو این بخش، دو مثال کلی از دستور outline در css رو بررسی می‌کنیم.

مثال ۱:

در این مثال، برای عنصر p، یک حاشیه با استفاده از تمامی خاصیت های outline تعریف می‌کنیم.

نمونه حاشیه اوت لاین
نمونه حاشیه اوت لاین

دستورات outline به کار رفته در مثال بالا، عبارتند از:

p{
   outline-style: solid;
   outline-color:#23282d;
   outline-width: 3px;
}

در کد بالا، نوع outline رو ممتد، ضخامت اون رو ۳ پیکسل، و رنگ اون رو توسط کد رنگ 23282d# تعیین کردیم.

مثال ۲:

تو این مثال، از خاصیت کوتاه شده outline (اوت لاین – اوتلاین) استفاده کردیم تا بتونیم حاشیه مناسبی برای عنصرمون تعریف کنیم.

نمونه کادر outline
نمونه کادر outline
p{
   outline: thick double rgb(83,104,114);
}

تو کد فوق، ضخامت رو با مقدار thick، رنگ رو با یک مقدار ()rgb و نوع حاشیه رو double تعیین کردیم.

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

پایان ترم

سوال:

دور یک عنصر، توسط outline حاشیه ای رو بسازید که ضلع بالای اون dotted، و اضلاع دیگه اون solid باشن.

نکته: این سوال، بیشتر جنبه آموزشی داره تا تست، پس انتظار هر پاسخی رو داشته باشین 🙂

به ایمیل کسانی که پاسخ درست و کامل در در نظرات بگن ۲ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه.

نتیجه گیری

تو این مقاله، با مفهوم outline آشنا شدیم و فهمیدیم که چطور می‌تونیم برای عناصرمون، یک حاشیه از نوع outline تعریف کنیم و به طور کلی آموزش کار با ویژگی Outline در CSS را بررسی کردیم.

یاد گرفتیم که تعریف outline، به دو روش، یکی توسط چند خاصیت و دیگری توسط یک خاصیت shorthand انجام می‌شه.

امیدوارم که تمامی مطالب براتون روشن و واضح بوده باشه و مطالب مفید و جدیدی رو به دونسته هاتون در مورد CSS اضافه کرده باشین.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌ها ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

پاسخی بگذارید

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


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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر