رنگ Outline

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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 }

مشاهدهٔ نتیجه

صفحهٔ بعد»

«صفحهٔ قبل