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

في هذا الدّرس من سلسلة تعلّم CSS؛ سنشرح كيفيّة تحديد الألوان في أوراق الأنماط، وسنتدرّب على ذلك بتغيير لون الخلفيّة.

فهرس السلسلة:

الألوان

استخدمنا في الدّروس السّابقة مجموعة محدودة من الألوان المُسمّاة. تدعم css في مجملها 17 لونًا مُسمّىً، قد تبدو لك بعض هذه الأسماء غريبة:

الألوان الأساسية

black: الأسود
silver: الفضّيّ
white: الأبيض
red: الأحمر
lime: الزيزفونيّ
blue: الأزرق

الألوان الثانوية

yellow: الأصفر
aqua: المائيّ
fuchsia: الفوشيّ
maroon: الأجرّيّ
orange: البرتقالي
olive: الزيتوني
purple: البنفسجيّ
green: الأخضر
navy: النيلي
teal: تركواز

تفاصيل أكثر

قد يدعم متصفّحك ألوانًا مُسمّاة أكثر مثل:

dodgerblue peachpuff firebrick aquamarine

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

لاستخدام ألوان أخرى، يمكن تحديد المكوّنات الثلاثة الرئيسيّة لأيّ لون، الأحمر والأخضر والأزرق، باستخدام إشارة الرّقم (#) متبوعة بثلاثة أعداد بنظام العدّ الستّعشري (hexadecimal) والّتي يُرمز لها بالرّموز بين 0 و9 ثمّ بين a وf، حيث تُشير الحروف بين a وf إلى القيم 10-15:

الأسود: #000‎‎‏ ‎‎ ‎
الأحمر الخالص: #f00
الأخضر الخالص: ‎ #000‎
الأزرق الصّافي: ‎ #00f‎ ‎
الأبيض: ‎#000‎

يمكن أيضًا استخدام عددين ستّعشريّين لكلّ جزء من اللّون لتنوّع أكبر:

الأسود: ‎ #000000‎‎‏‎ ‎
الأحمر الخالص: #ff0000
الأخضر الخالص: ‎ #00ff00‎ ‎
الأزرق الصّافي: ‎ #0000ff‎ ‎
الأبيض: ‎ #ffffff‎ ‎

مثال

يمكنك بشيء من المِران تعديل قيم أرقام الألوان الثّلاثة يدويًّا لشتّى الاستخدامات:

ابدأ بالأحمر الصّافي: ‎#f00
ثم اجعله أكثر شحوبًا، بإضافة بعض الأخضر والأزرق: ‎#f77
ثم اجعله أميل للبرتقالي بإضافة مزيد من الأخضر: ‎#fa7
ثم اجعله داكنًا بتخفيض كلّ مكوّناته: ‎#c74
ثم خفّض إشباعه بجعل مكوّناته أقرب في القيمة إلى بعضها: ‎#c98
وإذا جعلتها متساوية تمامًا فإنك تحصل على الرّماديّ: ‎#ccc

للحصول على لون شاحب مائل للأزرق:

ابدأ بالأبيض الصّافي: ‎#fff
ثم خفّض المكوّنات الأخرى قليلًا: ‎#eef

تفاصيل أكثر

بإمكانك تحديد الألوان باستخدام أعداد بنظام العد العشريّ مستخدمًا قيمًا بين 0 و255، أو نسبًا مئويّة:

مثلًا: هذا اللّون أحمر آجري:

rgb(128, , )

لمزيد من التفاصيل عن كيفيّة تحديد الألوان، اطّلع على الألوان في معيار CSS.

لمعلومات أكثر عن كيفية مطابقة ألوان القوائم والأزرار مع ألوان النّظام، اطّلع على ألوان النظام في CSS2 في معيار CSS.

خصائص الألوان

استخدمنا الخاصّة color سابقًا لتغير لون النّصّ.

يمكن استخدام الخاصّة background-color لتغير خلفيّة العناصر.

يمكن تعيين هذه الخاصّة إلى transparent في حال رغبنا بالنّص صراحةً على جعل الخلفيّة شافّة، ممّا يؤدّي إلى إظهار لون خلفيّة العنصر الأب.

تدريب: استخدام رموز الألوان

حرّر ملف CSS الّذي تتدرّب عليه.

طبّق التغيّير المعروض أدناه لجعل الحروف الأولى ذات خلفيّة زرقاء شاحبة (قد يختلف أسلوب الكتابة والتّعليقات في ملفّك عمّا تراه هنا، لا بأس، أبِقها كما تحبّ).

<p id = "first"> 
  <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets
</p>
<p> 
  <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets
</p>

/*** CSS Tutorial: Color page ***/

/* page font */
body {
 font: 16px "Comic Sans MS", cursive;
}

/* paragraphs */
p {
 color: blue;
}
#first {
 font-style: italic;
}

/* initial letters */
strong {
 background-color: #ddf; 
 color: red;
 font: 200% serif;
}

.spinach {
 color: green;
 background-color: #ddf;
}

احفظ الملفّ وحدّث المتصفّح لترى النّتيجة:

تمرين

غيّر أسماء الألوان إلى الرّموز الثّلاثيّة التي توافقها في ملفّ CSS لديك دون أن تغيّر النّتيجة.

(قد لا يمكن مطابقة الألوان بالضّبط، ولكن يمكن الوصول إلى ألوان مقاربة، لأنّ مطابقة الألوان تمامًا تتطلّب الرّموز السّداسيّة، وهذا يحتاج مراجعة معيار CSS أو استخدام أداة تنتقي اللّون).

شاهد الحل

القيم التالية هي تقريب معقول للألوان المُسمّاة:

strong {
  color: #f00; /* red */
  background-color: #ddf; /* pale blue */
  font: 200% serif;
}

.carrot {
  color: #fa0; /* orange */
}

.spinach {
  color: #080; /* dark green */
}

p {
  color: #00f; /* blue */
}

ما التالي؟

المحتوى والتنسيق منفصلان تمامًا في ملفّين، سنطّلع في الدّرس التّالي على كيفيّة عمل استنثاء لهذه القاعدة من خلال إضافة محتوى إلى صفحة ويب باستخدام CSS.

ترجمة -وبتصرف- للمقال Color من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.