رنگ Outline

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی outline-color برای تنظیم رنگ outline استفاده می‌شود.[۱]

رنگ را می‌توان به وسیله مقادیر زیر تنظیم کرد:

  • نام رنگ - نام یک رنگ را مشخص می‌کند، مانند "red" (قرمز)
  • HEX - یک مقدار هگز را مشخص می‌کند، مانند "#ff0000"
  • RGB - یک مقدار RGB را مشخص می‌کند، مانند "rgb(255,0,0)"
  • HSL - یک مقدار HSL را مشخص می‌کند، مانند "hsl(0, 100%, 50%)"
  • invert (به فارسی: معکوس) - موجب فراهم شدن یک وارونگی رنگ می‌شود (که اطمینان حاصل پیدا می‌کند که outline، صرف نظر از رنگ پس زمینه قابل مشاهده است)

مثال زیر outlineهای متفاوتی را با رنگهای متفاوت نشان می‌دهد. همچنین توجه داشته باشید که این عنصر یک کادر باریک سیاه رنگ درون outline دارند:

یک outline قرمز رنگ از نوع solid

یک outline سبز رنگ از نوع double

یک outline زرد رنگ از نوع outset

مثال
 1 p.ex1 {
 2   border: 2px solid black;
 3   outline-style: solid;
 4   outline-color: red;
 5 }
 6 
 7 p.ex2 {
 8   border: 2px solid black;
 9   outline-style: dotted;
10   outline-color: blue;
11 }
12 
13 p.ex3 {
14   border: 2px solid black;
15   outline-style: outset;
16   outline-color: grey;
17 }


مقادیر HEX

رنگ outline می‌بایست با یک مقدار هگزا دسیمال (HEX) مشخص شود :

مثال
1 p.ex1 {
2   outline-style: solid;
3   outline-color: #ff0000; /* red */
4 }


مقادیر RGB

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

مثال
1 p.ex1 {
2   outline-style: solid;
3   outline-color: rgb(255, 0, 0); /* red */
4 }


مقادیر HSL

می‌توانید از مقادیر HSL نیز استفاده کنید:

مثال
1 p.ex1 {
2   outline-style: solid;
3   outline-color: hsl(0, 100%, 50%); /* red */
4 }


می‌توانید مطالب بیشتری را در مورد HEX ,RGB و HSL در فصل رنگ‌های CSS ما بخوانید.

رنگ معکوس

مثال زیر از outline-color: invert استفاده می‌کند، که یک وارونگی رنگ را فراهم می‌کند. این امر تضمین می‌کند که outline صرف نظر از رنگ پس زمینه، قابل مشاهده است:

یک outline وارونه از نوع solid.

مثال
1 p.ex1 {
2   border: 1px solid yellow;
3   outline-style: solid;
4   outline-color: invert;
5 }



منابع آموزشی