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


محمد فوّاز عرابي

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

css-colors.png

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

الألوان

استخدمنا في الدّروس السّابقة مجموعة محدودة من الألوان المُسمّاة. تدعم 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‎ ‎

مثال

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

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

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

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

تفاصيل أكثر

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

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

rgb(128, , )

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

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

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

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

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

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

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

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

    <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;
    }

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

pale-blue.png

تمرين

غيّر أسماء الألوان إلى الرّموز الثّلاثيّة التي توافقها في ملفّ 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.





تفاعل الأعضاء


لا توجد أيّة تعليقات بعد



يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن