الألوان Colors

خاصية اللون Color

تحدد الخاصية color لون النص (لون المحتوى في المقدمة بشكل عام) للعنصر.
على سبيل المثال في المثال التالي ، تحدد الخاصية color المحددة في المحدد body لون النص الافتراضي للصفحة بأكملها.
لنجرب المثال التالي لنرى كيفة عمل هذه الخاصية:

مثال
تشغيل
  1. body {
  2. color: #ff5722;
  3. }
ملاحظة:

عادة ما تكتسب العناصر الخاصية color قيمة اللون من العنصر الأب، باستثناء عناصر <a>.
على سبيل المثال ، إذا تم تحديد لون للعنصر body ، فسيتم تمريره تلقائيًا إلى العناوين والفقرات وما إلى ذلك.

تحديد القيم Values للخاصية Color

غالبًا ما يتم تحديد الألوان Colors في CSS بالطرق التالية:

  • بإستخدام اسم اللون color name مثلا red
  • بإستخدام قيمة اللون بالنظام السادس عشر HEX مثلا #ff0000
  • بإستخدام نظام RGB للألوان مثلا rgb(255, 0, 0)
ملاحظة:

هنالك العديد من تنسيقات الألوان الأخرى التي تم ادخالها على CSS3 مثل HSL و HSLA و RGBA التي تدعم أيضًا الشفافية ألفا alpha transparency.
سنتعرف عليها بمزيد من التفصيل لاحقا من خلال هذه الدورة.

قيم الألوان الإسمية

هنالك مجموعة من الكلمات التي تتيح لنا تحديد قيم الألوان بطريقة سهلة مثل :
aqua و black و blue و fuchsia و gray و green و lime و maroon و navy و olive و purple و red و silver و teal و white و yellow .....الخ

مثال
تشغيل
  1. h1 {
  2. color: red;
  3. }
  4. p {
  5. color: purple;
  6. }

ومع ذلك ، تدعم متصفحات الويب الحديثة عمليا العديد من أسماء الألوان أكثر مما هو محدد في معيار CSS ، ولكن لكي تكون على الجانب الأكثر أمانًا ، يجب عليك استخدام قيم الألوان بالنظام السادس عشر hex color بدلاً من ذلك.

قيم الألوان بنظام RGB

يمكننا استخدام نظام اللألوان RGB اختصار Red, Green, Blue الأحمر والأخضر والأزرق لقيم الألوان في لغة CSS.
يتم كتابة القيمة في هذا النظام بالشكل التالي : rgb(rr,gg,bb) حيث rr تحدد مقدار المكون الأحمر و gg تحدد مقدار المكون الأخضر و bb تحدد مقدار المكون الأزرق للون. عادةً ما يتم تحديد هذه القيم كأرقام صحيحة بين 0 و 255.

مثال
تشغيل
  1. h1 {
  2. color: rgb(255, 165, 0);
  3. }
  4. p {
  5. color: rgb(0, 255, 0);
  6. }
ملاحظة:

يمكنك أيضًا تحديد قيم RGB بالنسبة المئوية ، حيث 100٪ تكافئ 255 ، و 0٪ تكافئ 0 . على سبيل المثال ، يمكنك تحديد اللون الأحمر إما rgb(255, 0, 0) أو rgb (100٪ ، 0٪ ، 0٪).

قيم الألوان بالنظام السادس عشر HEX

Hex اختصار لـ Hexadecimal وهي الطريقة الأكثر استخدامًا لتحديد اللون على الويب.
في هذا النظام يتم تمثيل الألوان باستخدام رمز مكون من ستة أرقام ، يسبقه الرمز # ، ويتكب بالشكل التالي : #rrggbb ، حيث يرمز rr إلى المكون الأحمر و gg إلى المكون الأخضر و bb إلى المكون الأزرق . تكون قيمة كل مكون من 00 إلى FF بالترميز السداسي العشري . وبالتالي فإن #ffffff يمثل اللون الأبيض و #000000 يمثل اللون الأسود.

لنلقي نظرة على المثال التالي:

مثال
تشغيل
  1. h1 {
  2. color: #ffa500;
  3. }
  4. p {
  5. color: #00ff00;
  6. }
ملاحظة:

يشير Hexadecimal أو Hex إلى نظام ترقيم يستخدم 16 حرفًا كقاعدة له. يستخدم الأرقام من 0 إلى 9 والأحرف A و B و C و D و E و F التي تقابل الأرقام العشرية 10 و 11 و 12 و 13 و 14 و 15 على التوالي.

أداة تحديد قيمة اللون بنظام HEX ونظام RGB

تأثير الخاصية Color على الحدود Borders والتخطيط Outlines

الخاصية color ليست فقط للمحتوى النصي للعنصر ، ولكن لأي شيء في المقدمة يمكن ان يتأثر باللون. على سبيل المثال ، إذا لم يتم تحديد قيمة border-color أو outline-color بشكل صريح للعنصر ، فسيتم استخدام قيمة color بدلاً من ذلك. لنلق نظرة على مثال:

مثال
تشغيل
  1. p.one {
  2. color: #0000ff;
  3. border: 2px solid;
  4. }
  5. p.two {
  6. color: #00ff00;
  7. outline: 2px solid;
  8. }
« التالي السابق »