الفرق بين المراجعتين لصفحة: «CSS/color»

مراجعة 08:19، 7 مارس 2018

خاصية color في CSS تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations)، وستضبط أيضًا قيمة الكلمة المحجوزة currentColor، والتي يمكن أن تستخدم كقيمة غير مباشرة في الخاصيات الأخرى التي لا تأخذ لونها من الخاصية color مباشرةً (مثل الخاصية border-color).

p {
  color: red;
}

بطاقة الخاصية

القيمة الابتدائية	تختلف من متصفحٍ لآخر.
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للحركة	نعم
القيمة المحسوبة	إذا كانت القيمة نصف شفافة، فستكون القيمة المحسوبة تكافئ الدالة `rgba()‎`، وإن لم تكن كذلك فستكافئ الدالة `rgb()‎`. الكلمة المحجوزة `transparent` ستكافئ ‎`rgba‎(0,0,0,0)‎`.

/* كلمة محجوزة */
color: currentcolor;

/* أسماء الألوان */
color: red;
color: orange;
color: tan;

/* قيم ست عشرية */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* استخدام الدوال */

/* <rgb()> */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);

/* <hsl()> */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);

/* القيم العامة */
color: inherit;
color: initial;
color: unset;

لاحظ أنَّ القيمة يجب أن تكون لونًا، ولا يجوز أن تكون تدرجًا لونيًا (gradient).

استخدام الكلمة المحجوزة:

color: currentcolor

استخدام أسماء الألوان:

color: red

color: orange

color: tan

استخدام القيم الست عشرية:

color: #090

color: #009900

color: #090a

color: #009900aa

استخدام الدوال rgb()‎ و rgba()‎ و hsl()‎ و hsla()‎:

color: rgb(34, 12, 64)

color: rgba(34, 12, 64, 0.6)

color: hsl(30, 100%, 50%)

color: hsla(30, 100%, 50%, 0.6)

يجدر بالذكر أنَّ قيمة اللون هي قيمة انسيابية، أي لو ضبطت الخاصية color على أحد العناصر، فسيرثها جميع أبنائه وسيكون لهم لون العنصر الأب نفسه ما لم تغيّر ذلك.

أمثلة

القواعد الآتية ستجعل نص الفقرات باللون الأحمر:

p { color: red; }
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%, 0%, 0%); }
p { color: hsl(0, 100%, 50%); }

/* 50% شفافية */
p { color: rgba(255, 0, 0, 0.5); } 
p { color: hsla(0, 100%, 50%, 0.5); }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Safari	Opera
الدعم الرئيسي	1.0	1.0	3.0	3.5	1.0
الدالة rgb()‎ و hsl()‎	1.0	1.0	9.0	9.5	3.1
الدالة rgba()‎ و hsla()‎	1.0	1.0	9.0	10.0	3.1
الصيغة ‎#RRGGBBAA أو ‎#RGBA‎	غير مدعومة	49	؟	غير مدعومة	9.1
الدالتان rgb()‎ و hsl()‎ تقبل تحديد الشفافية فيها	غير مدعومة	52	؟	؟	؟

البنية العامة

تقبل الخاصية color قيمةً واحدةً تُحدِّد اللون.

`<color>`

تضبط هذه القيمة اللون للمحتوى النصي ولزخرفة النص في العنصر.

البنية الرسمية

color: <color>;

إذ يمكن أن تكون القيمة اللونية <color> مُحدَّدة عبر الدالة rgb()‎ أو rgba()‎ أو hsl()‎ أو hsla()‎ أو كقيمة ست عشرية أو اسم أحد الألوان أو القيمة currentcolor:

<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

حيث:

<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

حيث:

<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

انظر أيضًا

نوع البيانات <color>.
الخاصيات الأخرى المتعلقة بالألوان: background-color و border-color و outline-color و text-decoration-color و text-emphasis-color و text-shadow و caret-color و column-rule-color.

مصادر ومواصفات

مسودة CSS Color Module Level 4، أبرز ما جاء فيها هو السماح بإضافة قيم الشفافية (عبر alpha) في الدالتين rgb()‎ و hsl()‎ مما يجعل الدالتين rbga()‎ و hsla()‎ مهملتين؛ وسمحت باستخدام قيم ست عشرية ذات أربع أو ثماني أرقام، حيث سيُعدّ آخر محرف (أو محرفين) على أنه قيمة الشفافية alpha؛ وأضافت الدوال hwb()‎ و device-cmyk()‎ و color()‎.
مسودة CSS Transitions.
مواصفة CSS Color Module Level 3، أبرز ما جاء فيها هو إضافة الدوال rgba()‎ و hsl()‎ و hsla()‎.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>color</code>}}</noinclude>
-خاصية <code>color</code> في CSS تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations)، وستضبط أيضًا قيمة الكلمة المحجوزة <code>[[CSS/color value#الكلمة المحجوزة currentColor|currentColor]]</code>، والتي يمكن أن تستخدم كقيمة غير مباشرة في الخاصيات الأخرى التي لا تأخذ لونها من الخاصية <code>color</code> مباشرةً (مثل الخاصية <code>[[CSS/border-color|border-color]]</code>).<syntaxhighlight lang="css">
+خاصية <code>color</code> في CSS تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية ([[CSS/text-decoration|text decorations]])، وستضبط أيضًا قيمة الكلمة المحجوزة <code>[[CSS/color value#الكلمة المحجوزة currentColor|currentColor]]</code>، والتي يمكن أن تستخدم كقيمة غير مباشرة في الخاصيات الأخرى التي لا تأخذ لونها من الخاصية <code>color</code> مباشرةً (مثل الخاصية <code>[[CSS/border-color|border-color]]</code>).<syntaxhighlight lang="CSS">
+p {
+  color: red;
+}
+</syntaxhighlight>
+== بطاقة الخاصية ==
+{| class="wikitable" style="width: 100%;"
+|-
+! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
+|تختلف من متصفحٍ لآخر.
+|-
+! scope="row" |تُطبَّق على
+|جميع العناصر.
+|-
+! scope="row" |قابلة للوراثة
+|نعم
+|-
+!قابلة للحركة
+|نعم
+|-
+! scope="row" |القيمة المحسوبة
+|إذا كانت القيمة نصف شفافة، فستكون القيمة المحسوبة تكافئ الدالة <code>rgba()‎</code>، وإن لم تكن كذلك فستكافئ الدالة <code>rgb()‎</code>.
+الكلمة المحجوزة <code>transparent</code> ستكافئ ‎<code>rgba‎(0,0,0,0)‎</code>.
+|}
+<syntaxhighlight lang="css">
 /* كلمة محجوزة */
 color: currentcolor;
@@ سطر 33: / سطر 58: @@
 color: initial;
 color: unset;
-</syntaxhighlight>لاحظ أنَّ القيمة يجب أن تكون لونًا، ولا يجوز أن تكون تدرجًا لونيًا (gradient).
+</syntaxhighlight>لاحظ أنَّ القيمة يجب أن تكون لونًا، ولا يجوز أن تكون تدرجًا لونيًا ([[CSS/gradient|gradient]]).
 استخدام الكلمة المحجوزة:
@@ سطر 46: / سطر 71: @@
 <p dir="ltr" style="color: #090a;">color: #090a</p>
 <p dir="ltr" style="color: #009900aa;">color: #009900aa</p>
-استخدام الدوال rgb() و rgba() و hsl() و hsla():
+استخدام الدوال <code>rgb()‎</code> و <code>rgba()‎</code> و <code>hsl()‎</code> و <code>hsla()‎</code>:
 <p dir="ltr" style="color: rgb(34, 12, 64);">color: rgb(34, 12, 64)</p>
 <p dir="ltr" style="color: rgba(34, 12, 64, 0.6);">color: rgba(34, 12, 64, 0.6)</p>
@@ سطر 53: / سطر 78: @@
 يجدر بالذكر أنَّ قيمة اللون هي قيمة انسيابية، أي لو ضبطت الخاصية <code>color</code> على أحد العناصر، فسيرثها جميع أبنائه وسيكون لهم لون العنصر الأب نفسه ما لم تغيّر ذلك.
-{| class="wikitable" style="width: 100%;"
-|-
-! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
-|تختلف من متصفحٍ لآخر.
-|-
-! scope="row" |تُطبَّق على
-|جميع العناصر.
-|-
-! scope="row" |قابلة للوراثة
-|نعم
-|-
-!قابلة للحركة
-|نعم
-|-
-! scope="row" |القيمة المحسوبة
-|إذا كانت القيمة نصف شفافة، فستكون القيمة المحسوبة تكافئ الدالة <code>rgba()‎</code>، وإن لم تكن كذلك فستكافئ الدالة <code>rgb()‎</code>.
-الكلمة المحجوزة <code>transparent</code> ستكافئ ‎<code>rgba‎(0,0,0,0)‎</code>.
-|}
 == أمثلة ==
 القواعد الآتية ستجعل نص الفقرات باللون الأحمر:<syntaxhighlight lang="css">
@@ سطر 81: / سطر 87: @@
 p { color: hsl(0, 100%, 50%); }
-/* 50% translucent */
+/* 50% شفافية */
 p { color: rgba(255, 0, 0, 0.5); }
 p { color: hsla(0, 100%, 50%, 0.5); }
@@ سطر 134: / سطر 140: @@
 تقبل الخاصية <code>color</code> قيمةً واحدةً تُحدِّد اللون.
-=== القيمة [[CSS/color value|<color>]] ===
+=== <code rel="mw:WikiLink" href="CSS/color value" title="CSS/color value">[[CSS/color value|<color>]]</code> ===
 تضبط هذه القيمة اللون للمحتوى النصي ولزخرفة النص في العنصر.
@@ سطر 155: / سطر 161: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* نوع البيانات <code>[[CSS/color value|<color>]]</code>.
+* الخاصيات الأخرى المتعلقة بالألوان: <code>[[CSS/background-color|background-color]]</code> و <code>[[CSS/border-color|border-color]]</code> و <code>[[CSS/outline-color|outline-color]]</code> و <code>[[CSS/text-decoration-color|text-decoration-color]]</code> و <code>[[CSS/text-emphasis-color|text-emphasis-color]]</code> و <code>[[CSS/text-shadow|text-shadow]]</code> و <code>[[CSS/caret-color|caret-color]]</code> و <code>[[CSS/column-rule-color|column-rule-color]]</code>.
 == مصادر ومواصفات ==