المغربي الجديد
25-03-2011, 01:38 AM
الألوان في CSS وطرق التعامل معها
تُقسم الألوان في css الى ألوان خطوط "foreground color" وخلفيات "background-color" ويتم تعريف اللون في كل مهم بـ 4 طرق مختلفه .. وسابقاً بـ html في حالة تلوين كلمات داخل الفقرات كنا نضع وسم جديد وهو <font> بين الكلمات المراد تلوينها كما تشاهد هنا :
<p>
<font color="#FF0000">
يتم تعريف اللون في css بـ 4 طرق مختلفه
</font>
</p>
وعندما نريد وضع لون لخلفيه الصفحه كنا نضعها بهذا الشكل داخل الوسم <body>
<html>
<body bgcolor="#CCCCCC">
<p>
<font color="#FF0000">
يتم تعريف اللون في css بـ 4 طرق مختلفه
</font>
</p>
</body>
</html>
وهذا الامر مرهق لاننا فى كل مرة نريد فيها تلوين جمله أو كلمه ما علينا الذهاب اليها والتلوين عن طريق الوسم <font> علاوة اننا نحدد في كل صفحه لونها .
.. اما داخل css كما تعلمنا يمكننا نطبق الأمر الواحد على كل الفقرات او فقرات محدده فقط ـ أمر اللون سهل جدا وكل ماعليك ان تكتبه فقط بهذا الشكل color راجع الدرس التالي لتتذكر الصيغه العامه لكتابه أكواد css واللون طريقه تعريقه تقسم الى 4 صيغ كما نوهنا بالشكل التالي:
http://up.arabsgate.com/u/5114/4012/56374.jpg
1- color keyword وفيها يتم تعريف اللون بأسمه وعدد الالوان المعروفه هم 17 فقط كالتالي :
aqua, black, blue, fuchsia, gray, green, lime, maroon
navy, olive, orange, purple, red, silver, teal, white
and yellow.
ويكتب هكذا..
p { color: green; }
كذلك يمكننا ان نجعل الخلفيه شفاشه عن طريق كتابه transparent فهو صالح ايضا.
2- #rrggbb الطريقه المعتادة لوضع اللون وهى تسمى Hexadecimal سداسي عشري وتبدأ بعلامة هاش (#) وبعد ذلك تكتب القيمه المكونة من 6 ارقام او حروف هكذا :
p { color: #00FF00; }
وهذه الطريقه ايضا يمكن ان تختصر فبدلا من كتابه 6 أرقام او حروف تختصر فقط الى 3 ارقام كما بالأمثله التاليه
color: #00FF00; ››› color: #0F0;
color: #FF0000; ››› color: #F00;
color: #0000FF; ››› color: #00F;
لاحظ كيف تم الأختصار ـ وهذه الطريقه توفر عليك الحفظ ـ ولاكنها ايضا رغم ذلك لا تناسب تدرجات الالوان المختلفة.
3- rgb(rrr,ggg,bbb) وهى تحدد عن طريق القنوات rgb وذلك بوضع قيمه لكل منهم تبدأ من 0 الى 255.
p { color: rgb(0,255,0); }
4- rgb(rrr%,ggg%,bbb%) وبنفس الصيغه السابقه يمكن ان تحدد القيمه بالنسب المئوية.
p { color: rgb(0%,100%,0%); }
إذن يمكن القول أن اللون يمكن ان يعرّف بـ4 صيغ مختلفه كلها تؤدي نفس الغرض.
كما حددنا بالأمر السابق color يبقى لنا تلوين الخلفيات وتكون عن طريق الامر background-color والخواص وطريقه كتابه الاوامر لن تختلف فقط ماتغير هو الأمر والذى من خلاله يمكننا تلون خلفيات الصفحات او الأوسمه بسهوله ..
p { background-color: transparent; }
تُقسم الألوان في css الى ألوان خطوط "foreground color" وخلفيات "background-color" ويتم تعريف اللون في كل مهم بـ 4 طرق مختلفه .. وسابقاً بـ html في حالة تلوين كلمات داخل الفقرات كنا نضع وسم جديد وهو <font> بين الكلمات المراد تلوينها كما تشاهد هنا :
<p>
<font color="#FF0000">
يتم تعريف اللون في css بـ 4 طرق مختلفه
</font>
</p>
وعندما نريد وضع لون لخلفيه الصفحه كنا نضعها بهذا الشكل داخل الوسم <body>
<html>
<body bgcolor="#CCCCCC">
<p>
<font color="#FF0000">
يتم تعريف اللون في css بـ 4 طرق مختلفه
</font>
</p>
</body>
</html>
وهذا الامر مرهق لاننا فى كل مرة نريد فيها تلوين جمله أو كلمه ما علينا الذهاب اليها والتلوين عن طريق الوسم <font> علاوة اننا نحدد في كل صفحه لونها .
.. اما داخل css كما تعلمنا يمكننا نطبق الأمر الواحد على كل الفقرات او فقرات محدده فقط ـ أمر اللون سهل جدا وكل ماعليك ان تكتبه فقط بهذا الشكل color راجع الدرس التالي لتتذكر الصيغه العامه لكتابه أكواد css واللون طريقه تعريقه تقسم الى 4 صيغ كما نوهنا بالشكل التالي:
http://up.arabsgate.com/u/5114/4012/56374.jpg
1- color keyword وفيها يتم تعريف اللون بأسمه وعدد الالوان المعروفه هم 17 فقط كالتالي :
aqua, black, blue, fuchsia, gray, green, lime, maroon
navy, olive, orange, purple, red, silver, teal, white
and yellow.
ويكتب هكذا..
p { color: green; }
كذلك يمكننا ان نجعل الخلفيه شفاشه عن طريق كتابه transparent فهو صالح ايضا.
2- #rrggbb الطريقه المعتادة لوضع اللون وهى تسمى Hexadecimal سداسي عشري وتبدأ بعلامة هاش (#) وبعد ذلك تكتب القيمه المكونة من 6 ارقام او حروف هكذا :
p { color: #00FF00; }
وهذه الطريقه ايضا يمكن ان تختصر فبدلا من كتابه 6 أرقام او حروف تختصر فقط الى 3 ارقام كما بالأمثله التاليه
color: #00FF00; ››› color: #0F0;
color: #FF0000; ››› color: #F00;
color: #0000FF; ››› color: #00F;
لاحظ كيف تم الأختصار ـ وهذه الطريقه توفر عليك الحفظ ـ ولاكنها ايضا رغم ذلك لا تناسب تدرجات الالوان المختلفة.
3- rgb(rrr,ggg,bbb) وهى تحدد عن طريق القنوات rgb وذلك بوضع قيمه لكل منهم تبدأ من 0 الى 255.
p { color: rgb(0,255,0); }
4- rgb(rrr%,ggg%,bbb%) وبنفس الصيغه السابقه يمكن ان تحدد القيمه بالنسب المئوية.
p { color: rgb(0%,100%,0%); }
إذن يمكن القول أن اللون يمكن ان يعرّف بـ4 صيغ مختلفه كلها تؤدي نفس الغرض.
كما حددنا بالأمر السابق color يبقى لنا تلوين الخلفيات وتكون عن طريق الامر background-color والخواص وطريقه كتابه الاوامر لن تختلف فقط ماتغير هو الأمر والذى من خلاله يمكننا تلون خلفيات الصفحات او الأوسمه بسهوله ..
p { background-color: transparent; }