الدرس الأول في CSS: تغيير ألوان العناوين والفقرات للمبتدئين
الدرس الأول في CSS: تغيير ألوان العناوين والفقرات للمبتدئين
إذا كنت قد تعلمت أساسيات HTML وأصبحت تعرف كيفية إنشاء العناوين والفقرات، فقد حان الوقت للانتقال إلى الخطوة التالية، وهي تعلم CSS. تعتبر CSS اللغة المسؤولة عن تنسيق صفحات الويب وجعلها أكثر جمالًا وتنظيمًا، فهي التي تضيف الألوان، والخطوط، والمسافات، والخلفيات، وكل ما يجعل الموقع يبدو احترافيًا.
في هذا الدرس سنتعرف على أول خاصية في CSS، وهي color، والتي تستخدم لتغيير لون النصوص مثل العناوين والفقرات.
ما هي CSS؟
CSS هي اختصار لعبارة Cascading Style Sheets، وهي لغة تُستخدم مع HTML لتنسيق صفحات الويب.
باستخدام CSS يمكنك:
تغيير ألوان النصوص.
تغيير حجم الخطوط.
إضافة ألوان للخلفيات.
التحكم في المسافات بين العناصر.
تصميم صفحات ويب جميلة ومتناسقة.
بمعنى آخر، إذا كانت HTML هي التي تبني هيكل الصفحة، فإن CSS هي التي تمنحها المظهر الجميل.
كيف نربط ملف CSS بصفحة HTML؟
قبل كتابة أكواد CSS، يجب ربط ملف التنسيق بملف HTML باستخدام الوسم التالي داخل <head>:
<link rel="stylesheet" href="style.css">
بعد ذلك يمكننا كتابة جميع أكواد CSS داخل الملف style.css.
خاصية color
تُستخدم خاصية color لتغيير لون النص.
على سبيل المثال، إذا أردنا جعل جميع العناوين من النوع <h1> باللون الأحمر، نكتب:
h1{
color: red;
}
بعد حفظ الملف وتحديث الصفحة ستلاحظ أن جميع عناوين <h1> أصبحت باللون الأحمر.
تغيير لون الفقرات
يمكن أيضًا تغيير لون الفقرات بنفس الطريقة.
p{
color: blue;
}
الآن ستظهر جميع الفقرات الموجودة داخل الصفحة باللون الأزرق.
مثال عملي
ملف HTML
<h1>مرحبًا بكم في Hisham Academy</h1>
<p>هذه أول فقرة نقوم بتنسيقها باستخدام CSS.</p>
ملف CSS
h1{
color: crimson;
}
p{
color: royalblue;
}
عند تشغيل الصفحة سيظهر العنوان باللون القرمزي، بينما ستظهر الفقرة باللون الأزرق.
طرق كتابة الألوان في CSS
توفر CSS أكثر من طريقة لاختيار اللون المناسب.
أولًا: باستخدام اسم اللون
وهي أسهل طريقة للمبتدئين.
color: red;
color: blue;
color: green;
ثانيًا: باستخدام أكواد Hex
color: #ff0000;
كل لون يمتلك كودًا خاصًا به يبدأ بعلامة #.
ثالثًا: باستخدام RGB
color: rgb(255, 0, 0);
في هذه الطريقة يتم تحديد اللون باستخدام قيم الأحمر والأخضر والأزرق.
أشهر الألوان التي ستستخدمها كثيرًا
- black
- white
- red
- blue
- green
- yellow
- orange
- purple
- gray
- brown
- pink
مع الوقت ستتعرف على عشرات الألوان الأخرى، لكن هذه الألوان كافية للبدء.
نصائح للمبتدئين
استخدم أسماء الألوان في بداية تعلمك لأنها سهلة الحفظ.
احرص على اختيار ألوان واضحة حتى تكون القراءة مريحة للمستخدم.
لا تكثر من استخدام الألوان المختلفة داخل الصفحة حتى لا يبدو التصميم عشوائيًا.
جرّب تغيير الألوان بنفسك ولا تخف من التجربة، فهذه أفضل طريقة للتعلم.
الخلاصة
في هذا الدرس تعلمنا أول خاصية في لغة CSS وهي color، واستخدمناها لتغيير لون العناوين والفقرات، كما تعرفنا على أشهر طرق كتابة الألوان سواء باستخدام اسم اللون أو أكواد Hex أو نظام RGB.
في الدرس القادم سنتعلم كيفية تغيير لون خلفية العناصر باستخدام الخاصية background-color، وهي خطوة مهمة لجعل صفحات الويب أكثر جمالًا واحترافية.
إذا أعجبك الدرس، فلا تنسَ متابعة سلسلة Hisham Academy، حيث سنتعلم CSS خطوة بخطوة من الصفر حتى الاحتراف مع أمثلة عملية واختبارات تفاعلية بعد كل درس.
🎯 اختبر نفسك الآن !!!!
تهانينا! لقد أنهيت هذا الدرس بنجاح. 🎉
لكن هل فهمت كل ما تعلمته بالفعل؟
لا تكتفِ بالقراءة، بل اختبر معلوماتك من خلال الاختبار التفاعلي الذي صممته خصيصًا لهذا الدرس ضمن سلسلة Hisham Academy.
🧠 مميزات الاختبار:
أسئلة متنوعة تقيس مدى فهمك.
نتيجة فورية بعد الانتهاء.
تصميم بسيط وسريع يعمل على الهاتف والكمبيوتر.
يساعدك على معرفة نقاط القوة والجوانب التي تحتاج إلى مراجعتها.
🔗 ابدأ الاختبار الآن:
https://hishamabdulrashid999.github.io/test_4/
أضغط هنا للبدء في الأختبار
📚 تابع الدرس التالي في سلسلة Hisham Academy ولا تنسَ حفظ المقال ومشاركته مع من يريد تعلم برمجة الويب من الصفر.
وأخبرني رأيك في التعليقات هل فعلاً أستفدت من هذا المقال
