الكلمات الأساسية الملونة CSS
سوف تشرح هذه الصفحة الكلمات الرئيسية transparentو currentcolorو
inherit.
الكلمة الشفافة
يتم transparentاستخدام الكلمة الأساسية لجعل اللون شفافًا. غالبًا ما يستخدم هذا لإنشاء لون خلفية شفاف لعنصر ما.
مثال
هنا ، سيكون لون خلفية العنصر <div> شفافًا بالكامل ، وستظهر صورة الخلفية من خلال:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
ملاحظة: الكلمة transparent
الأساسية تعادل rgba (0،0،0،0). قيم ألوان RGBA هي امتداد لقيم ألوان RGB مع قناة ألفا - والتي تحدد عتامة اللون. اقرأ المزيد في فصل CSS RGB وفي فصل ألوان CSS .
الكلمة الأساسية الحالية
الكلمة الأساسية currentcolorمثل المتغير الذي يحمل القيمة الحالية لخاصية اللون لعنصر.
يمكن أن تكون هذه الكلمة الأساسية مفيدة إذا كنت تريد أن يكون لونًا معينًا متسقًا في عنصر أو صفحة.
مثال
في هذا المثال ، سيكون لون حدود العنصر <div> باللون الأزرق ، لأن لون نص العنصر <div> أزرق:
div {
color: blue;
border: 10px solid currentcolor;
}
مثال
في هذا المثال ، يتم تعيين لون خلفية <div> على قيمة اللون الحالية لعنصر الجسم:
body {
color: purple;
}
div {
background-color:
currentcolor;
}
مثال
في هذا المثال ، يتم تعيين لون الحدود ولون الظل الخاصين بـ <div> على قيمة اللون الحالية لعنصر الجسم:
body {
color: green;
}
div {
box-shadow: 0px 0px
15px currentcolor;
border: 5px solid currentcolor;
}
ترث الكلمة
تحدد الكلمة الأساسية أن inheritالخاصية يجب أن ترث قيمتها من عنصرها الأصلي.
يمكن inheritاستخدام الكلمة الأساسية لأي خاصية CSS وفي أي عنصر HTML.
مثال
في هذا المثال ، سيتم توريث إعدادات حدود <span> من العنصر الأصلي:
div {
border: 2px solid red;
}
span {
border:
inherit;
}