شرح خاصية font-size في CSS للمبتدئين | التحكم في حجم النصوص
شرح خاصية font-size في CSS للمبتدئين | التحكم في حجم النصوص
بعد أن تعلمنا في الدروس السابقة كيفية تغيير ألوان النصوص والخلفيات باستخدام CSS، حان الوقت لنتعلم خاصية مهمة جدًا في تنسيق صفحات الويب، وهي font-size.
تُستخدم خاصية font-size للتحكم في حجم النصوص داخل صفحة الويب، سواء كان النص عنوانًا أو فقرة أو أي عنصر آخر.
🎯 ما هي خاصية font-size؟
font-size هي خاصية في CSS تسمح لنا بتحديد حجم الخط الذي يظهر به النص.
على سبيل المثال:
p {
font-size: 20px;
}في هذا المثال، قمنا بتحديد حجم نص الفقرة ليصبح 20 بكسل.
🧑💻 مثال عملي
لنفترض أن لدينا صفحة HTML تحتوي على عنوان وفقرة:
<h1>مرحبًا بكم</h1>
<p>تعلم برمجة الويب خطوة بخطوة.</p>يمكننا التحكم في حجم كل نص باستخدام CSS:
h1 {
font-size: 36px;
}
p {
font-size: 20px;
}النتيجة:
العنوان سيظهر بحجم 36px.
الفقرة ستظهر بحجم 20px.
📏 ماذا تعني px؟
px اختصار لكلمة Pixels، وهي من أشهر الوحدات التي يمكن استخدامها مع font-size.
مثال:
h1 {
font-size: 40px;
}كلما زادت القيمة، أصبح النص أكبر:
font-size: 16px;
font-size: 24px;
font-size: 32px;
font-size: 48px;أما إذا قللنا القيمة، يصبح النص أصغر.
⚠️ انتبه!
يجب كتابة وحدة القياس مع القيمة عند استخدام px.
❌ خطأ:
p {
font-size: 20;
}✅ صحيح:
p {
font-size: 20px;
}🔄 تغيير حجم أكثر من عنصر
يمكننا إعطاء كل عنصر حجمًا مختلفًا:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 18px;
}وهكذا يمكننا إنشاء ترتيب واضح لأحجام النصوص داخل الصفحة.
💡 هل font-size تعمل مع جميع النصوص؟
نعم، يمكن استخدامها مع العديد من عناصر HTML التي تحتوي على نص.
مثل:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 18px;
}🧪 جرّب بنفسك
أنشئ صفحة بسيطة تحتوي على عنوان وفقرة ثم جرّب تغيير أحجام النصوص:
<h1>Hisham Dev</h1>
<p>أنا أتعلم CSS خطوة بخطوة.</p>ثم استخدم:
h1 {
font-size: 40px;
}
p {
font-size: 20px;
}بعد ذلك غيّر الأرقام بنفسك ولاحظ كيف يتغير شكل الصفحة. 🚀
🏆 تحدي صغير
هل تستطيع جعل:
العنوان بحجم 50px
الفقرة بحجم 22px
جرّب كتابة الكود بنفسك قبل أن تنظر إلى الحل. 😉
📌 الخلاصة
تعلمنا في هذا الدرس أن:
font-size تستخدم لتغيير حجم النص.
px من أشهر وحدات القياس المستخدمة معها.
زيادة قيمة font-size تجعل النص أكبر.
تقليل القيمة تجعل النص أصغر.
يمكن تطبيق font-size على عناصر نصية مختلفة.
وهكذا أصبحت تعرف طريقة التحكم في حجم النصوص باستخدام CSS. 🎨💻
🚀 استمر في التعلم، خطوة صغيرة كل يوم تصنع فرقًا كبيرًا!
🎯 اختبر نفسك الآن !!!!
تهانينا! لقد أنهيت هذا الدرس بنجاح. 🎉
لكن هل فهمت كل ما تعلمته بالفعل؟
لا تكتفِ بالقراءة، بل اختبر معلوماتك من خلال الاختبار التفاعلي الذي صممته خصيصًا لهذا الدرس ضمن سلسلة Hisham Academy.
تعليم
🧠 مميزات الاختبار:
أسئلة متنوعة تقيس مدى فهمك.
نتيجة فورية بعد الانتهاء.
تصميم بسيط وسريع يعمل على الهاتف والكمبيوتر.
أجهزةاتصالات
يساعدك على معرفة نقاط القوة والجوانب التي تحتاج إلى مراجعتها.
🔗 ابدأ الاختبار الآن:
https://hishamabdulrashid999.github.io/test_11/
اضغط هنا للبدء في الاختبار
📚 تابع الدرس التالي في سلسلة Hisham Academy ولا تنسَ حفظ المقال ومشاركته مع من يريد تعلم برمجة الويب من الصفر.
وأخبرني رأيك في التعليقات هل فعلاً أستفدت من هذا المقال
