آموزش ویژگی outline در CSS

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

آموزش ویژگی outline در CSS

Free-Learn

ویژگی outline در CSS

با استفاده از ویژگی outline در CSS میتوان بیرونی ترین ( حاشیه یا بوردر بیرونی یا خط دور لبه بیرونی ) یک عنصر را مشخص و یا تعریف کرد، و بطور کلی با استفاده از این ویژگی میتوان ویژگی های زیر را بصورت خلاصه نوشت :

  • outline-width
  • outline-style ( ضروری )
  • outline-color

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی outline را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : نحوه استفاده از ویژگی outline

امتحان کنید

مثال شماره ۲ : تفاوت بین ویژگی border و outline ، ویژگی border خط دور لبه ی داخلی عنصر را مشخص میکند ولی ویژگی outline خط دور لبه ی بیرونی عنصر را

امتحان کنید

Free-Learn

جدول مشخصات ویژگی outline در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض medium none Color_Element
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی دارد | اطلاعات بیشتر
نسخه CSS2
نحوه استفاده در جاوااسکریپت object.style.outline=”2px solid blue”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی outline در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
outline ۱٫۰ ۱٫۵ ۷٫۰ ۱٫۲ ۸٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی outline در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
outline-width اندازه خط بیرونی را مشخص میکند ( پیش فرض medium )
outline-style استایل یا شکل شمایل خط بیرونی را مشخص میکند ( پیش فرض none )
outline-color رنگ خط بیرونی را مشخص میکند ( پیش فرض رنگ متن خوده عنصر )
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

  • استفاده از outline-style ضروری می باشد، این یعنی اگر مشخص نشود در خروجی هیچ خط بیرونی ایجاد نخواهد شد.
  • اگر outline-color مشخص نشود، بصورت پیش فرض رنگ متن خوده عنصر اعمال میشود.

ویژگی outline بروی قسمت بیرونی یا خارجی یک عنصر تاثیر میگذارد و این یعنی این ویژگی بروی اندازه عرض و ارتفاع یک عنصر هیچ تاثیری ندارد ولی ویژگی border چون بروی قسمت داخلی عنصر تاثیر میگذارد به همین دلیل بروی اندازه عرض و ارتفاع عنصر تاثیر میگذارد. (پیشنهاد میکنم حتما آموزش مدل باکس ModelBox را مشاهده نمایید)

Free-Learn

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