عضویت در سایت

ورود

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

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

کد امنیتی برای بروزرسانی کد امنیتی روی تصویر کلیک کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1075 آموزش و 1875 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

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

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

آموزش 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 و … مشخص کنید.

مثال:



مطلب پیشنهادی:  آموزش ارتباط با سرور آنلاین در B4A - قسمت هشتم(جستجو)

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

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

  • outline-style
  • outline-width
  • outline-color

مثال:



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

خصوصیت

توضیحات

outline

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

outline-color

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

outline-offset

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

outline-style

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

outline-width

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

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

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

موفق باشید.

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

طراح و برنامه نویس وب| تعمیرکار کامپیوتر و ماشین های اداری | علاقه مند یادگیری و یاددادن ... :)

دنبال کردن

ارسال نظر

رفتن به بالا

سامانه آموزشی و خدماتی بپرسم

اولین وب سایت آموزشی و پرسش و پاسخ در ایران

بپرسم را میتوان به عنوان مرجعی برای آموزش و حل مشکلات دانست، در بپرسم سعی کرده ایم آموزش های برنامه نویسی، طراحی سایت، کار با نرم افزارها ها و… را آموزش دهیم. همچنین محیطی فراهم کرده ایم تا کاربران بتوانند در این محیط سوالات خود را بپرسند و مشکل خود را حل کنند.