بسم الله , الحمد لله
معنا اليوم خاصية من اسهل خواص تقنية CSS وهي background-color او لون الخلفية وهي تستخدم الألوان بأكثر من طريقة من خلال اسم اللون بالانجليزية مثل wihte يعني ابيض او FFFFFF# يعني ابيض او (rgb(255.255 يعني ابيض ايضاً.
وهذا مثال فقط ليس اكثر على امكانية كتابة الألوان بأكثر من طريقة.
- كتابة اسم اللون لا يعمل إلا إذا كُتب بالانجليزية مثال : wihte مع العلم أن هناك درجات من الألوان ليس لها اسماء فقط تكون ارقام واحرف او rgb.
- كتابة اللون على شكل احرف و ارقام يسمى hex او هكس و تكون هكذا :C0C0C0 #
- كتابة اللون من خلال الألوان الثلاثة RGB وهذه الثلاثة احرف هما اختصار للون الأحمر red و اللون الأخضر green و اللون الأزرق blue ودائماً يكتب هكذا : (rgb(0.0.0 داخل القوسين ثلاثة ارقام تفصلهم نقطة وكل نقطة يمكن تغييرها لتعطيك اللون المطلوب .
وتعتبر طريقة hex من افضل الطرق في الحصول على الألوان .
وهنا سوف نقوم باستخدام موقع رائع جداً وهو ( Color Hex ) من خلاله تستطيع الحصول على اي لون واللون الواحد ستجد له معلومات كثيرة ..
الآن بقى لنا أن نأخذ مثالاً حول استخدام هذه الخاصية .. افتح صفحة تكست فارغة اعطها الإمتداد html ثم الصق فيها هذا الكود
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: rgb(0,128,0);
height:200px;
width:300px;
}
h1{background-color: #0000ff;}
p{background-color: red;}
</style>
</head>
<body>
<div>
<h1>Mnin Software</h1>
<p>Programs & Web develober.</p>
</div>
</body>
</html>
دعونا نقوم بتطبيق هذا الكود على المتصفح و سوف نفهم لماذا قُمت بتلوين هذه الأسطر
 |
| هذا هو الكود بعد تطبيقه على المتصفح |
انظر للصورة بها نفس الألوان التي قُمت بتلوينها في الكود السابق وهذا يعني أن الكود هو ..
background-color: rgb(0,128,0); لون خلفية الصندوق كاملاًانظر كيف تمت كتابة الألوان , وبهذا قد تعرفت على المزيد حول خاصية background-color
background-color: #0000ff; لون خلفية العنوان
background-color: red; لون خلفية الوصف
انتهى موضوعنا لهذا اليوم والى لقاءاً آخر إن شاء الله
علق على هذا الموضوع تعليقات الموقع تعليقات فيسبوك تعليقات Disqus