شرح كآمل لخوآص الالوآن في Css ! , وطرق التعامل معها ..

[нєαɒs нυиτєя]

<font color="RoyalBlue">تُقسم الألوان في css الى ألوان خطوط "foreground color" وخلفيات "background-color" ويتم تعريف اللون في كل مهم بـ 4 طرق مختلفه .. وسابقاً بـ html في حالة تلوين كلمات داخل الفقرات كنا نضع وسم جديد وهو بين الكلمات المراد تلوينها كما تشاهد هنا...

رمز Code:


يتم تعريف اللون في css بـ 4 طرق مختلفه




وعندما نريد وضع لون لخلفيه الصفحه كنا نضعها بهذا الشكل داخل الوسم

رمز Code:




يتم تعريف اللون في css بـ 4 طرق مختلفه






وهذا الامر مرهق لاننا فى كل مرة نريد فيها تلوين جمله أو كلمه ما علينا الذهاب اليها والتلوين عن طريق الوسم علاوة اننا نحدد في كل صفحه لونها .

.. اما داخل css كما تعلمنا يمكننا نطبق الأمر الواحد على كل الفقرات او فقرات محدده فقط ـ أمر اللون سهل جدا وكل ماعليك ان تكتبه فقط بهذا الشكل color راجع الدرس التالي لتتذكر الصيغه العامه لكتابه أكواد css واللون طريقه تعريقه تقسم الى 4 صيغ كما نوهنا بالشكل التالي:

رمز Code:
Property Value Description
color: يحدد هنا اللون بالكتابة عن طريق وضع أسمة مباشرة.
color: #rrggbb يوضع اللون بالطريقة العادية المتبعه بالأرقام والحروف.
color: rgb(rrr,ggg,bbb) ضع اللون عن طريق القيم وتحدد من 0 الى 255.
color: rgb(rrr%,ggg%,bbb%) اللون عن طريق النسبة المئوية.
1- color keyword وفيها يتم تعريف اللون بأسمه وعدد الالوان المعروفه هم 17 فقط كالتالي :
aqua, black, blue, fuchsia, gray, green, lime, maroon
navy, olive, orange, purple, red, silver, teal, white
and yellow.
ويكتب هكذا..




رمز Code:
p { color: green; }
كذلك يمكننا ان نجعل الخلفيه شفاشه عن طريق كتابه transparent فهو صالح ايضا.

2- #rrggbb الطريقه المعتادة لوضع اللون وهى تسمى Hexadecimal سداسي عشري وتبدأ بعلامة هاش (#) وبعد ذلك تكتب القيمه المكونة من 6 ارقام او حروف هكذا :

رمز Code:
p { color: #00FF00; }
وهذه الطريقه ايضا يمكن ان تختصر فبدلا من كتابه 6 أرقام او حروف تختصر فقط الى 3 ارقام كما بالأمثله التاليه :

رمز Code:
color: #00FF00; ››› color: #0F0;
color: #FF0000; ››› color: #F00;
color: #0000FF; ››› color: #00F;
لاحظ كيف تم الأختصار ـ وهذه الطريقه توفر عليك الحفظ ـ ولاكنها ايضا رغم ذلك لا تناسب تدرجات الالوان المختلفة.

3-
رمز Code:
rgb(rrr,ggg,bbb)
وهى تحدد عن طريق القنوات rgb وذلك بوضع قيمه لكل منهم تبدأ من 0 الى 255.

رمز Code:
p { color: rgb(0,255,0); }
rgb(rrr%,ggg%,bbb%)
وبنفس الصيغه السابقه يمكن ان تحدد القيمه بالنسب المئوية.

رمز Code:
p { color: rgb(0%,100%,0%); }
إذن يمكن القول أن اللون يمكن ان يعرّف بـ4 صيغ مختلفه كلها تؤدي نفس الغرض.

كما حددنا بالأمر السابق color يبقى لنا تلوين الخلفيات وتكون عن طريق الامر background-color والخواص وطريقه كتابه الاوامر لن تختلف فقط ماتغير هو الأمر والذى من خلاله يمكننا تلون خلفيات الصفحات او الأوسمه بسهوله ..

رمز Code:
p { background-color: transparent; }