تُستخدم خاصية color property في لغة CSS لتغيير ألوان النصوص الأفتراضية إلي أي لون أخر تُكتب قيمية خاصية color لون النص سواء إسم اللون أو كود اللون لتصبح بهذا الشكل color:red أو color:#f00.

طرق كتابة قيمة خاصية color:

color name كتابة إسم اللون مباشرة بعد خاصية color property مثل red, blue, black.
hex color كتابة كود اللون hex بالهيكس مباشرة بعد خاصية color property مثل #f00 أو 0f0#.
RGB color كتابة كود اللون RGB مباشرة بعد خاصية color property مثل rgb(255,0,0).
RGBA color كتابة كود اللون RGBA مباشرة بعد خاصية color property مثل rgb(255,0,0,.5) إضافة القيمة الرابعة لعمل اللون شفاف.
HSL color تابة كود اللون HSL مباشرة بعد خاصية color property بهذا الشكل hsl (0, 100%, 50%).

Color Name

طريقة إستخدام قيمة خاصية color property بواسطة إسم اللون color name.

p {color:red}

hex color

طريقة إستخدام قيمة خاصية color property بواسطة hex الهيكس اللون hex color.

p {color:#f00}

RGB Color

طريقة إستخدام قيمة خاصية color property بواسطة RGB اللون RGB color.

p {color:rgb(255,0,0)}

RGBA Color

القيمة الرابعة تستخدم في عمل اللون شفاف بلغة CSS.

p {color:rgba(255,0,0,0.5)}

</> CSS Colors keyword
الكلمات المفتاحية في الألوان في لغة CSS

يمكن إستخدام مع color وخاصية background-color قيم علي هيئة keywords أسماء وهي تحديد إسم اللون مثل [red - green - blue] فمثلاً pink بدلاً من كتابة كود للون في لغة CSS.

Success Color

Warning Color

Danger Color

CSS Colors keyword

تحديد قيم الألون عن طريق CSS keywords color names.

.success
{
  color: darkgreen;
  background-color: mediumaquamarine;
  border:darkgreen solid 1px;
  padding:20px;
}

جربها بنفسك

</> CSS HSL Colors
HSL في الألوان في لغة CSS

HLS تشير الي Hue , saturation and Lightness ويمكن في لغة CSS تحديد الألوان بنظام HLS داخل قيم خاصية color وخاصية background-color.

جربها بنفسك

CSS HSL Colors

<body>
  <div style="background: hsl(0, 100%, 30%);padding:18px">hsl(0, 100%, 30%);</div>
  <div style="background: hsl(0, 100%, 50%);padding:18px">hsl(0, 100%, 50%);</div>
  <div style="background: hsl(0, 100%, 70%);padding:18px">hsl(0, 100%, 70%);</div>
  <div style="background: hsl(0, 100%, 90%);padding:18px">hsl(0, 100%, 90%);</div>
</body>

جربها بنفسك

</> CSS color opacity
الشفافية مع الألوان في لغة CSS

تستخدم خاصية opacity في تحديد درجة ظهور العنصر وتتراوح قيمتها من 0.0 وهي تعني غير مرئي و 1.0 تعني واضح كليا و 0.5 تعني 50% شفافية في لغة CSS.

CSS color opacity

جربها بنفسك

CSS color opacity

شفافة الألوان في لغة CSS.

#p1 {background-color:rgb(255,0,0);opacity:0.6;}
#p2 {background-color:rgb(0,255,0);opacity:0.6;}
#p3 {background-color:rgb(0,0,255);opacity:0.6;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}

جربها بنفسك

مصطلحات الدرس

Colors

ألوان

Hue

مسحة

Saturation

تشبع

Lightness

إضاءة

Opacity

مستوي الشفافية

اختصارات الدرس

CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية

RGB

Red، Green، Blue

أحمر , أخضر , أزرق

RGBA

Red، Green، Blue , Alpha

أحمر , أخضر , أزرق , مستوي الشفافية

HSL

Hue, Saturation, Lightness

مسحة ، تشبع ، إضاءة

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

CSS Colors
الألوان في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Colors CSS