میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

outline در CSS

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

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

همچنین عرض outline جزو ابعاد عنصر محسوب نمی شود.

به این خصوصیت می توان style، رنگ و عرض اختصاص داد.

outline خطی است که دور عناصر ، خارج از لبه ها کشیده می شود تا عنصر “برجسته” شود.

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

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

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

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

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

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

 

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

 


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

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

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

 

 

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, ۱۰۰%, ۵۰%); /* red */
}

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, ۰, ۰); /* red */
}
p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* red */
}
p.ex1 {
  border: ۱px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

 


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

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

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

 

 

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}


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

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

 

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

 


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

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

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


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

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssoutline در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfتگ outline در cssخاصیت outline در cssخصوصیت outline در cssدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهدستور outline در cssساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟