رنگ

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
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
مثال‌ها
مرجع‌ها

ویژگی border-color برای تنظیم رنگ چهار ضلع کادر استفاده می‌شود.[۱]

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

  • نام - نام رنگ را مشخص می‌کند، مانند "red"
  • HEX - یک مقدار هگزادسیمال را مشخص می‌کند، مانند "#ff0000"
  • RGB - یک مقدار RGB را مشخص می‌کند، مانند "rgb(255,0,0)"
  • HSL - یک مقدار HSL را مشخص می‌کند، مانند "hsl(0, 100%, 50%)"
  • کاملا شفاف

نکته: اگر border-color تنظیم نشود، رنگ عنصر را ارث می‌برد.

مثال

نمایش رنگ‌های مختلف کادر:

 1 p.one {
 2   border-style: solid;
 3   border-color: red;
 4 }
 5 
 6 p.two {
 7   border-style: solid;
 8   border-color: green;
 9 }
10 
11 p.three {
12   border-style: dotted;
13   border-color: blue;
14 }


رنگ های جانبی خاص

ویژگی border-color می‌تواند از یک تا چهار مقدار داشته باشد (برای کادر بالا، کادر سمت راست، کادر پایین، و کادر سمت چپ).

مثال
1 p.one {
2   border-style: solid;
3   border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
4 }


مقادیر HEX

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

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


مقادیر RGB

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

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


مقادیر HSL

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

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


نکته: در بخش‌های رنگ‌های CSS می‌توانید اطلاعات بیشتری در مورد مقادیر HEX ,RGB و HSL کسب کنید.


منابع آموزشی