CSS تزيين المحتوى

CSS الألوان

آخر تحيين: 04-01-2015

CSS الخلفيات CSS تنسيق المحتوى


لكتابة النص بلونٍ معين نستعمل الخاصية : color . و يمكن أن نُعطيها الملايين من القيم . سبق لنا أن رأينا هذه الخاصية في بداية هذا الجزء . و قد تساءلتم بدون شك عن كيفية التعامل مع قيمها ، و هذا ما سأوضحه في هذا الدرس

لدينا ثلاث طرق لإضافة القيمة للخاصية color :

  1. استعمال اسم اللّون مثال color:blue;
  2. طريقة RVB أو RGB: مثال color:rgb(0,0,255);
  3. طريقة العدد العشري Exadécimalمثال : color:#1CC0E3;

إستعمال اسم اللّون

لنبدأ بالطريقة التقليدية و التي تتمثل في كتابة اسم اللون باللغة الإنجليزية . مثلاً لكتابة النص بلون أزرق أكتب الخاصية و أضيف لها القيمة مستعملا اسم اللّون الأزرق ;color:blue .
و يبقى اختيار الألوان بهذه الطّريقة جد محدود . إذ لا تستخدم إلاّ 16 لوناً مُتَعارفا عليه ، مقارنة بالملايين التي ذَكَرتُها . ورغم ذلك تبقى سهلة الإستعمال ما عليكم سوى حفظ أسماء هذه الألوان . إن لم تكن لديكم حساسية ضد الإنجليزية .

هذه القائمة يمكنكم استعمالها دون تحفُّظ


بعض الأمثلة التطبيقية

<!DOCTYPE html>
<html dir="rtl">
  <head>
    <meta charset="utf-8" />
 </head>
 
 <body>
     <h2> هل تهدد العولمة اللغة العربية؟ </h2>

     <p>
      إذا كانت أنظمة الحواسيب والشبكات الإلكترونية كالأنترنت  والأنترانت لها مفاتيحها ولغاتها الرقمية فإن مستعملها يتعامل معها في النهاية من خلال لغته الأساسية أي لغته الوطنية وكذلك ستبقى اللغة مفتاح   العلم ومفتاح الثقافة والفكر والتكنولوجيا إلى أمد طويل في هذا السباق الحضاري الذي تقوده عولمة فوقية لا  ترحم، فإن أي تقاعس أو غفلة سوف تزيد حتما من اتساع الهوة التي تفصلنا عن موكب المقدمة، لسبب بديهي،
     <span class="remarque">
       وهو أن التخلف لا يلد إلا تخلفا أفدح،
     </span>
     وهو ما حدث بالفعل لبلداننا طيلة قرون عديدة<br/>
     </p>
     
     <blockquote>
      مُقتبس عن ندوة للدكتور : محمد العربي ولد خليفة .
     </blockquote>

 </body>
</html>
h2
{
  text-align:center;
  text-decoration:underline;
  color:purple;
}
p
{
  font-family:"Arabic Transparent",Serif;
  text-indent:40px;
  font-size:15px;
  color:blue;
}
blockquote
{
  font-size:13px;
  text-decoration:underline;
  text-align:center;
  color:black;  
}  
.remarque
{
  font-weight:bold;
  color:green;
}
مشاهدة النتيجة

طريقة : RGB

و تعني بالإنجليزية ( red , green, blue) و RVB بالّلغة الفرنسية ( rouge, vert, bleu) و بالعربية ؟ (أحمر ، أخضر ، أزرق ) .و هي الألوان الثلاثة الأساسية التي تنبثِق عنها الملايين من الألوان الأخرى ، و ذلك بمزجها مع بعضها . و يمكن لحاسوبكم التَّعرّفَ عليها بكل سهولة . بخلاف طريقة الأسماء التي اعتمدناها سابقاً و التي لا تُوفّرُ لنا إلاّ 16 لونا متعارفٌ عليه .
طريقة خلطِ هذه الألوان الثلاثة تكمن في اللعب على كثافة كل لون على حدة . و تتراوح هذه الكثافة بين الرّقم 0 و 255 . اتركوا العنان لمُخيِّلتكم ، لدينا ثلاثة ألوان و يمكننا اختيار 255 لوناً مختلفاً من لون واحد فقط . لنأخذ اللون الأحمر على سبيل المثال : و نبدأ برقم1 الذي يمثّلُ اللون الأحمر الخفيف جداًّ ، ثمّ يليه الرقم2 الذي يرمز إلى لون خفيف ... ثمّ اللون الأحمر الشفاف ... حتى نصل إلى الرقم 255 الذي يُمثّلُ الأحمر القاني . عملية حسابية لهواة الأرقام. و ستَحصلُون على الملايين من الألوان

طريقة استعمال هذه القيمة كالتالي : color: rgb(red,green,blue);
لكن بدل أن نستعملَ اسماء الألوان ، نُعَوّضُها بكمّية كل لون و التي تتراوح بين 0 و 255 . مثلا للحصول على لون أحمر قاني نعَوّض red برقم 255 الذي يرمز إلى أعلى كثافة ، و نعطي الألوان الأخرى قيمة : 0 (لإخفائها) و تكتب الخاصية كالآتي

color:rgb(255,0,0)

إليكم بعض الأمثلة :

.a7mar {
    color:rgb(255,0,0); /* لون أحمر  */
}
.a5dar {
    color:rgb(0,255,0);  /* لون أخضر  */
}
.azra9 {
    color:rgb(0,0,255);  /* لون أزرق  */
}
.abyad {
    color:rgb(255,255,255);  /* الأبيض */
}
.aswad {
    color:rgb(0,0,0);  /* الأسْوَد */
}

لقد تساءلتم بدون شك عن كيفية معرفة الرقم المناسب للحصول على اللّون المطلوب ، فلن تُمضوا كل حياتكم في تجربة جميع الأرقام عن طريق المحاولة و الخطأ و لهذا أنتم محتاجون لبرنام يُمكّنكم من اختيار أي لون تُحبون كما يُهديكم القيمة الرّقمية بالأ:rgb . و ما عليكم سوى نَقلُها . و هذه البرانم جد مُتوفّرة، و أحدها تملكونه على حاسوبكم ، لمستعملي الويندوز و هو برنام Paint . لِلوصول إليه ، قوموا بما يلي

أنقروا على زرّ بدأ التشغيل = démarrer = start ثمّ Tous les programmes = جميع البرامج ثمّ Accessoires

و هذه أيقونة البرنام . و باقي الشرح بالصُّور

  1. افتحوا البرنامج
  2. couleurs ثم modifier les couleurs
  3. ثم انقر Définir les couleurs personalisées



ستحصلون على نافذة شبيهة بهذه



ثم تختارون اللون الذي يحلو لكم في نافذة الألوان و تنقلون أرقام الألوان (rouge,vert,bleu) التي تظهر يمين أسفل النافذة . في المثال الموجود في الصّورة اخترتُ اللون الأزرق السماوي . و الكمية بالأرقام لكل لون هي (rouge:28 , vert:192 , bleu:227 ) . مثلا سأستعمل هذا اللون لجميع روابط موقعي : ستكون شيفرة CSS كالآتي

a {
    color:rgb(28,192,227);
}

طريقة : Exadecimal

أول طريقة استعملها المُطوّرون لإضافة الألوان و كانت الوحيدة قبل ظهور CSS . و رغم قِدَمِها ، أجدها الأسهل و الأفضل . سأشرحها لكم و في نهاية المطاف يمكنكم استعمال الطريقة التي تريحكم

Exadécimal : مصطلح مركّب من كلمتين
1. Exa= مُسَدَّس ( لا أعني مُسدس الجريمة ) الكلمة مشتقّة من رقم سِتّة .
2. decimal = عُشَري ، مشتق من رقم عَشرة .
الكلمة Exadecimal ترمز إلى رقم سّتة عشرة (16) . و هي المجموع الناتج عن 6 + 10 .
سِتّة : نرمزُ بها إلى الستة أحرف الأولى من أبجذية اللاّتينية و هي ( A-B-C-D-E-F).
عشرة : نرمزُ بها إلى الأرقام من 0 إلى 9 (0-1-2.....-9)

أسْرُدُ عليكم كل هذا لأقول لكم أن القيمة التي سنستعملها في هذه الطريقة هي مزج بين الأرقام و الحروف في مجموع لا يتجاوز 6 رموز .مثلا رمز اللون الأزرق السماوي = 1CC0E3 و هو خليط بين الألوان الثلاثة (أحمر ، أخضر ، أزرق ) و يتماشى الرمزُ مع هذه الألوان مثنى مثنى . ففي مثالنا 1C تشير إلى كمية اللون الأحمر و C0 إلى كمية اللّون الأخضر و أخيرا E3 إلى كمية الأزرق . و هذا المزيج يعطينا في النهاية اللون الأزرق السماوي الذي رأيناه في المثال السابق . لكن للحصول على النتيجة المرجوة يجب إضافة علامة # قبل العدد 1CC0E3 .

مثال :

a {
    color:#1CC0E3;   /* الأزرق السماوي */
}
p {
    color:#000000;   /* الأسود */
}
.blanc {
    color:#FFFFFF; /* الأبيض */
}

لاستعمال هذه الطريقة في اختيار الألوان أنتم محتاجون لبرنامج أحسن من Paint الذي لا يُوفر هذه الميزة . Photoshop مثلا . و هناك العديد من البرامج الأخرى ، صغيرة الحجم ، مختصّة و مُعدّة لهذا الغرض ، إذاً لن نحرم أنفسنا من الإستفادة منها و أفضلها برنامج boite_a_couleurs ، لا يتعدّى حجمه ، 1.4Mo و الأجمل فيه أنّه يجمعُ بين الطّرق الثلاث . النصيحة الوحيدة بعد تحميل البرنامج و فتحه ، أتركوا الخيارات كما هي على طريقة RVB . عند اختيار اللّون ما عليكم سوى نقل (ctrl+c) القيمة و لصقها (ctrl+v) في صفحة CSS.

صورة البرنامج :


تحميل boite à couleurs