JavaScript / صفحات الويب

الألوان والعتامة في CSS

اكتب الألوان بالأرقام بطريقتي RGB والكود الست عشري، واجعل العناصر شفافة بـ opacity. منهج البكالوريا

قاعدة CSS لها ثلاثة أجزاء: المُحدِّد (أيّ عنصر)، والخاصية (ماذا نغيّر)، والقيمة (كيف). الوسم <span> يُحيط بجزء من النص لنُنسّقه وحده.

CSS 
span {
  color: orange;
}
المتصفح

RGB

الشاشة تكوّن كل لون من ثلاثة أضواء: أحمر وأخضر وأزرق. نكتب rgb(R, G, B)، وكل رقم من 0 (مطفأ) إلى 255 (أقصى سطوع).

اللونالقيمة
أحمرrgb(255, 0, 0)
أصفرrgb(255, 255, 0)
أحمر داكنrgb(150, 0, 0)
أبيضrgb(255, 255, 255)
أسودrgb(0, 0, 0)

الكود الست عشري

نفس أرقام RGB مكتوبة بالنظام الست عشري بعد #: خانتان لكل لون. ff تعني 255 و00 تعني 0؛ فالبرتقالي rgb(255, 140, 0) هو #ff8c00.

CSS 
span {
  color: #ff8c00;
}
المتصفح

العتامة opacity

opacity من 1 (ظاهر تمامًا) إلى 0 (شفاف تمامًا). ومع :hover يتغيّر الشكل عند مرور الفأرة فقط. مرّر الفأرة على النجمة:

CSS 
.star:hover {
  opacity: 0.3;
}
المتصفح

تدريبات

1اكتب البرنامجتدريب المنهج

اجعل لون نص span أحمر باستخدام RGB.

CSS Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر 
span {
  
}
المتصفح
2أكمل الفراغتدريب المنهج

اجعل لون span أحمر داكنًا: سطوع الأحمر 150 فقط.

CSS Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر 
span {
  color: rgb(___, 0, 0);
}
المتصفح
3اكتب البرنامجتدريب المنهج

اجعل لون span أرجوانيًا بالكود #a260bf.

CSS Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر 
span {
  
}
المتصفح
4اكتب البرنامجتدريب المنهج

اجعل النجمة (الفئة star) تختفي تمامًا عند مرور الفأرة.

CSS Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر 
  
 
المتصفح
  
   
 
 
5اكتب البرنامجتدريب إضافي
 
اجعل عنوان h1 بخلفية لونها #19195C ونصه أبيض #ffffff.
  
 
 CSS Ctrl/⌘ + Enter للتشغيل · Esc ثم Tab للخروج من المحرر     
 
h1 {
  
}
  
 
المتصفح
  
   
 
 
النقاط الرئيسية
  • rgb(R, G, B): كل قيمة من 0 إلى 255.
  • الكود الست عشري #rrggbb: ff = 255 و00 = 0.
  • opacity من 1 (ظاهر) إلى 0 (شفاف)، و:hover عند مرور الفأرة.