آموزش کار با ویژگی Outline در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی Outline در CSS با من همراه باشید.

آموزش کار با ویژگی Outline در CSS

Free-Learn

کار با ویژگی Outline در CSS

اگر فری لرن و سری آموزش های قدم به قدم زبان CSS رو دنبال کرده باشید میدونید که در چند جلسه قبلی ما با ویژگی Border آشنا شدیم و باهاش کار کردیم.

میدونیم ویژگی border میاد و یک خط به دور لبه های یک عنصر میکشد، این خط دقیقا دور لبه اصلی یک عنصر کشیده می شود حال ویژگی Outline میاد و یک خط به دور لبه ی خارجی همون عنصر میکشد.

ویژگی Outline چندین حالت دارد که این حالت ها به شرح زیر می باشد :

  • outline-style : استایل یا شکل شمایل خط را مشخص میکند
  • outline-color : رنگ خط را مشخص میکند
  • outline-width : اندازه خط را مشخص میکند
  • outline-offset : میزان فضا یا فاصله بین خط و محتوا را مشخص میکند

Free-Learn

کار با ویژگی Outline-Style در CSS

با استفاده از این ویژگی میتوان استایل یا بطور کلی شکل شمایل خط دور لبه ی بیرونی را مشخص کرد.

این ویژگی دارای مقادیر مختلفی می باشد که این مقادیر به شرح زیر می باشند :

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

مثال : استفاده از تمامی مقادیر بالا

امتحان کنید

Free-Learn

کار با ویژگی Outline-Color در CSS

با استفاده از این ویژگی نیز میتوان رنگ خط دور لبه ی بیرونی را مشخص کرد، که این ویژگی میتواند مقادیر زیر را بپذیرد :

  • Name – استفاده از نام رنگ
  • RGB – استفاده از مقدار آر جی بی رنگ
  • Hex – استفاده از مقدار هگزادسیمال
  • Invert – وارونگی رنگ / گزینه ی پیش فرض می باشد

مثال : استفاده از نام رنگ

امتحان کنید

مثال شماره ۲ : استفاده از کد rgb رنگ و کد هگزادسیمال رنگ

امتحان کنید

Free-Learn

کار با ویژگی Outline-Width در CSS

با استفاده از این ویژگی میتوان اندازه خط دور لبه ی بیرونی یک عنصر را مشخص کرد، مقادیری که این ویژگی میتواند بپذیرد به شرح زیر می باشند :

  • thin (میشه تقریبا ۱ پیکسل)
  • medium (میشه تقریبا ۳ پیکسل)
  • thick (میشه تقریبا ۵ پیکسل)
  • px,pt,cm,em,.. : (با استفاده از واحدهای اندازه گیری)

مثال : از تمامی حالت های بالا

امتحان کنید

Free-Learn

کار با ویژگی Outline-Offset در CSS

با استفاده از این ویژگی میتوان یک فاصله ی دلخواه به خط دور لبه ی بیرونی داد، در واقع یک فاصله بین خط دور لبه بیرونی و لبه خارجی عنصر .

مثال :

امتحان کنید

Free-Learn

خلاصه نویسی ویژگی Outline در CSS

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

شکل کلی خلاصه نویسی ویژگی Outline بصورت زیر می باشد : (استفاده از ویژگی outline-style ضروری است)

مثال :

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب