شرح تنسيق عناصر HTML بالعربي — استخدام خاصية style
خاصية style تُستخدم لإضافة لمسات جمالية لعناصر HTML، مثل تغيير اللون، الخط، الحجم، وأكثر من ذلك بكثير.
1. كيف نستخدم خاصية Style؟
تُكتب الخاصية دائماً داخل وسم البداية، وتتبع هذا الشكل:
<tagname
style="property:value;">
الخاصية (Property)
القيمة (Value)
مثال: color: blue;
2. أهم خصائص التنسيق الشائعة
لون الخلفية
استخدم background-color لتغيير خلفية العنصر.
مثال لخلفية زرقاء فاتحة
<p style="background-color:powderblue;">...</p>لون النص
استخدم color لتغيير لون النص نفسه.
هذا النص يظهر باللون الأحمر
<p style="color:red;">...</p>نوع الخط
استخدم font-family لتغيير نوع الخط المستخدم.
خط بنمط الآلة الكاتبة
<p style="font-family:courier;">...</p>حجم الخط
استخدم font-size لتحديد حجم النص (بالنسبة المئوية أو البكسل).
نص كبير بنسبة 150%
<p style="font-size:300%;">...</p>3. محاذاة النص (Text Alignment)
استخدم خاصية text-align لتحديد مكان النص أفقياً (يمين، يسار، أو في المنتصف).
هذا النص في المنتصف (Center)
<h1 style="text-align:center;">عنوان في المنتصف</h1>
ملاحظة للمستقبل: استخدام خاصية
style مباشرة (Inline CSS) مفيد للتعديلات السريعة، ولكن في المشاريع الكبيرة نستخدم ملفات CSS خارجية لتنظيم أفضل.
ملخص الدرس
-
background-colorللخلفية -
colorللون النص
-
font-familyلنوع الخط -
font-sizeلحجم الخط -
text-alignللمحاذاة
تهانينا! لقد تعلمت كيف تجعل صفحاتك تبدو أجمل. في الدرس القادم، سنتعلم كيف نجعل النصوص عريضة أو مائلة باستخدام تنسيق النصوص.