48- CSS Color Keywords

تشرح هذه الصفحة الكلمات التالية: transparent, currentcolor, inherit.

كلمة transparent

كلمة “transparent” تستخدم لجعل لون عنصر شفافًا. يُستعمل هذا غالبًا لإنشاء خلفية شفافة للعنصر.

على سبيل المثال، يمكن جعل خلفية عنصر div شفافًا باستخدام الكود التالي:

body {
  background-image: url("paper.gif");
}

div {
  background-color: transparent;
}

ملاحظة حول قيمة transparent

كلمة “transparent” تعادل تمامًا قيمة rgba(0, 0, 0, 0)‎ في CSS.

قيمة اللون rgba هي امتداد لقيم ألوان RGB وتحتوي على قناة ألفا (alpha channel) إضافية. تحدد قناة ألفا مستوى الشفافية للون.

كلمة currentcolor في CSS

كلمة المفتاح “currentcolor” في CSS تعمل كمتغير يأخذ القيمة الحالية لخاصية اللون (color) للعنصر الذي تتواجد فيه.

تكون هذه الكلمة مفيدة عندما ترغب في الحفاظ على تناسق لون معين عبر عنصر أو صفحة كاملة.

مثال:

في هذا المثال، سيكون لون حد عنصر <div> أزرقًا لأن لون نص عنصر <div> أزرق أيضًا:

div {
  color: blue;
  border: 10px solid currentcolor;
}

في هذا المثال، تم تعيين لون خلفية على قيمة اللون الحالية لعنصر النص:

body {
  color: purple;
}

div {
  background-color: currentcolor;
}

في هذا المثال، تم تعيين لون حدود ولون الظل إلى قيمة اللون الحالية لعنصر النص:

body {
 color: green;
}

div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

كلمة inherit في CSS

كلمة المفتاح inherit في CSS تُستخدم لتحديد أن خاصية معينة ترث قيمتها من العنصر الأب المباشر لها.

بمعنى آخر: بدلًا من تعريف قيمة خاصة للخاصية في العنصر الحالي، فإنها ستتأخذ القيمة التي تم تعريفها في العنصر الأب.

div {
  border: 2px solid red;
}

span {
  border: inherit;
}