تنسيق الالوان والخلفيات في لغة CSS
السلام عليكم ورحمة الله وبركاته
سنتعلم في هذا الدرس طريقة تغغير الالوان في لغة CSS سواء كانت الوان النصوص او العنواين وطريقة عمل خلية للعنوان نفسه باللون الذي تريده وليضا طريقة عمل خلفية للصور واضافة خلفية صورة للصفحة نفسها وفيما يلي شرح مفصل لكل كود من الاكواد السابقة .
كود تغيير الوان النصوص في لغة CSS
في هذا الكود نريد تغيير لون العنوان الاول الي اللون الاحمر مثلا
تابع شرح الكود :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>موقع المقدم للبرمجة </h1>
</body>
</html>
شرح الكود السابق :
- اولا نريد تغيير لون العنوان الاول <h1>موقع المقدم للبرمجة </h1> الي اللون الاحمر باستخدام لغة CSS
- نضع بين وسمين <STYLE> اسم العنصر الذي نريد تغيير لونه وفي هذا الكود العنصر هو <h1> ثم نضيف الأقواس المعقوفة {} ونضيف بداخلها المحدد ; :COLOR الذي يستخدم لتغيير لون النصوص في لغة CSS
- و وضعنا ايضا بداخله اللون الاحمر والذي يمكن كتابته هكذا red كما في الكود او يمكن كتابته هكذا rgb(255, 0, 0)
- انتهي الامر ولكي تفهم الكود انظر الي الصورة الظاهرة
 |
| الصورة الظاهرة لتوضيح الكود السابق |
كود اضافة خلفية لونية للنصوص في لغة CSS
في نفس الكود السابق اذا اردنا اضافة خلفية لونية ( اللون الازرق مثلا) للعنوان الاول
تابع شرح الكود :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1{
color: red;
background-color: blue;
}
</style>
</head>
<body>
<h1>موقع المقدم للبرمجة </h1>
</body>
</html>
- في هذا الكود نريد اضافة خلفية للعنوان باللون الزرق بلغة css
- الطريقة : نضيف بين وسمين <style> العنصر الذي نريد التطبيق عليه وهو العنصر <h1> ثم نضيف الاقواس المعقوفة {}
- نضع بداخل الاقواس المحدد ;background-color: blue الذي يستخدم لتغيير الخلفية اللونية للعناصر اضفنا بداخله اللون الازرق الذي يمكن كتابته بهذه الطريقة كما في الكود او بهذه الطريقة #0000ff
- انتهي الامر ولكي تفهم الكود انظر الي الصورة الظاهرة
 |
| الصورة الظاهرة لتوضيح الكود السابق |
ملاحظة هامة:
يمكن اضافة خلفية لاي عنصر بنفس الطريقة في الكود السابق فمثلا يمكنك اضافة خلفية للصور او الفيديو او الروابط بنفس الطريقة ولكن لابد من تغيير اسم العنصر في لغة css فاذا اردنا ضافة خلفية لصورة مثلا نضع بين الوسمين <style> اسم العنصر وهو img
انظر للكود التالي :
<style>
img{
background-color: #0000ff;
}
</style>
يمكنك ايضا تغيير خلفية الصفحة نفسها الي اي لون انت تريده وهذا ما شرحناه في الدرس السابق
وفي نهاية هذا الدرس البيسط نرجو ان نكون قد افدناكم ولاتنسي القاء نظرة علي الدروس السابقة
الدروس السابقة:
تعلمنا في هذا الدرس طريقة تغيير لون النصوص بلغة css
وطريقة اضافة خلفية للنصوص بلغة html
تعليقات
إرسال تعليق