ثبت نام کنید

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ آدرس ایمیل خود را وارد کنید، یک ایمیل حاوی لینک بازیابی رمز عبور برای شما ارسال می شود.

پرسیدن سوال

برای پرسیدن سوال، باید وارد حساب کاربری خود در سایت شوید.
در بین 697 آموزش و 1260 پرسش به دنبال چه هستید؟

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


آموزش css – قسمت یازدهم(Outline)

سلام

با یازدهیمن قسمت از آموزش های Css در خدمتتون هستیم، در جلسات قبلی با مواردی از جمله Padding, Margin, Border و … به طور کامل آشنا شدیم، حال در این قسمت می پردازیم به خاصیت Outline در Css, در واقع Outline خطی است که اطراف لبه های یک عنصر کشیده میشود، در ادامه همراه بپرسم باشید.

آموزش:

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

توجه داشته باشید که این خاصیت با Border متفاوت است.

تصویر زیر گویای خاصیت Outline است، همچنین فرق Outline نسبت به Border.

Outline Box

Outline Box

مثال:

این div خاصیت Border آن ۱ پیکسل با رنگ سیاه است

و خاصیت Outline آن ۱۰ پیکسل با رنگ سبز است

 

خصوصیات Outline

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

  • dotted: خط رسم شده به صورت “نقطه به نقطه” خواهد بود.
  • dashed: خط رسم شده به صورت “قطعه به قطعه” خواهد بود.
  • soild: خط رسم شده به صورت “ممتد” خواهد بود.
  • double: دو خط رسم میشود.
  • groove: خط رسم شده به صورت “درونی بوده” که خط درون آن کمرنگ تر است.
  • ridge: این حالت مخالف “groove” است.
  • inset: خط رسم شده به صورت “تورفتگی” خواهد بود.
  • outset: این حالت مخالف “outset” است.
  • none: مقدار outline صفر است.
  • hidden: یک outline مخفی را مشخص میکند.

در تصویر زیر مقدار هایی که در بالا توضیح دادیم را میتوانید ببینید:

outline style

outline style

مثال عملی:




رنگ Outline

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

توسط ویژگی outline-color می توانید رنگ outline را تعیین کنید که به روش های زیر میتوانید رنگ را ست کنید:

  • Name
  • RGB
  • HEX
  • invert

برای درک مفاهیم بالا، کار با رنگ ها در Css را مطالعه کنید(کلیک کنید).

مثال:



پهنای Outline

توسط ویژگی outline-width قادر خواهید بود پهنای outline را مشخص کنید، که واحد اندازه گیری پهنا را میتوانید px, pt, cm, em و … مشخص کنید.

مثال:



کوتاه نویسی در Outline

خاصیت outline را نیز میتوانیم مانند مابقی خاصیت ها نظیر border, margin و … به صورت خلاصه بنویسیم، به صورتی که سه ویژگی زیر را در یک ویژگی به کار ببریم.

  • outline-style
  • outline-width
  • outline-color
حتما بخوانید:  آموزش فارسی word - قسمت نوزدهم(کار با استایل ها)

مثال:



کلیه خصوصیات مربوط به Outline:

خصوصیت

توضیحات

outline

کلیه خصوصیات outline را در یک مرحله تنظیم می کند

outline-color

رنگ یک outline را تنظیم می کند

outline-offset

فضا یا مرز بین outline و border را تعریف میکند

outline-style

style یک outline را تنظیم می کند

outline-width

عرض یک outline را تنظیم می کند

این قسمت از آموزش ها نیز به پایان رسید، همراه ما باشید با دیگر آموزش ها …

برای مشاهده دیگر قسمت های آموزش Css، کلیک کنید.

موفق باشید.

درباره احمد آخوندیمدیر

در صورتی که از بپرسم راضی بودید؛ میتوانید حمایت مالی کنید

دنبال کردن من

پاسخ دهید