الأنماط في HTML
يمكنك بالفعل بناء هيكل الصفحة والإشارة إلى ملفات أخرى بالمسارات. السؤال التالي الذي يطرحه المبتدئون هو كيف تغيّر مظهر المحتوى: لون النص، الخلفية، والحجم. في تمارين HTML الأولى يمكنك فعل ذلك بسمة style. إنها باب صغير إلى مفاهيم CSS — مفيد للعروض التوضيحية والتجارب السريعة في المحرّر — بينما ينتقل تصميم الموقع الكامل لاحقاً إلى CSS الصحيح في مسار تعلّمك. هكذا تتعلّم لغة الخصائص أولاً قبل تنظيم ملفات الأنماط.
ما هي سمة style؟
تسمح سمة style بربط إعلانات CSS مباشرة بوسم بداية عنصر HTML واحد. يقرأ المتصفح تلك الإعلانات ويرسم ذلك العنصر وفقاً لها. أنت لا تخترع لغة ثانية من الصفر: تكتب قواعد CSS قصيرة في مكان يوفره HTML مسبقاً. لذلك يُعدّ التنسيق المضمّن أداة تعليمية جيدة، حتى لو نادراً ما تحتفظ المشاريع الاحترافية بكل التصميم داخل السمات.
إجابة مباشرة
أضف المظهر بـ style="property: value;" على العنصر. خصائص البداية تشمل color (لون مقدمة النص)، وbackground-color (المنطقة خلف المحتوى)، وfont-size (حجم النص). ضع القائمة كلها داخل علامات اقتباس. افصل الإعلانات المتعددة بفاصلة منقوطة. للمواقع الحقيقية متعددة الصفحات فضّل ملف CSS أو كتلة <style> حتى لا تكرر نفس المظهر على كل وسم — أما في هذا الدرس فركّز على قراءة وكتابة إعلانات مضمّنة واضحة.
الخاصية والقيمة، واحدة تلو الأخرى
كل إعلان له خاصية (ماذا تريد تغييره) وقيمة (كيف يجب أن يبدو). تفصل بينهما نقطتان. ينبغي للمبتدئين إتقان بضع خصائص جيداً قبل حفظ قائمة ضخمة.
خاصية واحدة لكل فقرة
html<p style="color: blue;">نص أزرق</p>
<p style="background-color: lightyellow;">خلفية صفراء فاتحة</p>
<p style="font-size: 24px;">نص أكبر</p>قراءة المثال
color: blueيغيّر فقط لون نص تلك الفقرةbackground-color: lightyellowيلوّن الخلفية خلف النصfont-size: 24pxيضبط حجم النص؛pxوحدة شائعة للمبتدئين- لكل فقرة
style="..."خاص بها فتبقى التأثيرات الثلاثة منفصلة وسهلة الرؤية - الألوان المسماة مثل
blueمناسبة للتمرين؛ لاحقاً سترى أيضاً قيم hex مثل#336699
إذا لم يتغير شيء في المتصفح، تأكد أنك حفظت الملف، وحدّثت الصفحة، وأبقيت علامات الاقتباس حول قيمة style كلها.
عدة إعلانات في سمة واحدة
يمكنك دمج إعلانات داخل سمة style واحدة. أبقِ القائمة قصيرة ليبقى HTML قابلاً للقراءة. أنهِ كل إعلان بفاصلة منقوطة — بما في ذلك الأخيرة، وهذا مقبول وغالباً أوضح عند التعديل لاحقاً.
إعلانات style مجمّعة
html<p style="color: navy; background-color: #f0f0f0; font-size: 18px;">
نص كحلي على خلفية رمادية فاتحة
</p>لماذا يهم هذا النمط
- عنصر واحد يمكن أن يحمل اللون والخلفية والحجم معاً
- الفاصلة المنقوطة تفصل الإعلانات حتى يتمكن المتصفح من تحليل كل زوج
#f0f0f0لون hex؛ اختياري للمبتدئين لكنه شائع في CSS الحقيقي- الجملة المرئية داخل الفقرة نص HTML عادي؛ فقط سمة
styleتغيّر المظهر
تجنب حشو عشرة قرارات تصميم في سمة واحدة في اليوم الأول. تعلّم الصيغة أولاً بخاصيتين أو ثلاث واضحتين.
style على عناصر مختلفة
سمة style ليست مقتصرة على p. العناوين وspan وكثير من العناصر الأخرى تستخدمها بنفس الطريقة. يساعدك ذلك على رؤية أن التنسيق يتبع العنصر الذي تربطه به — وليس مفتاحاً سحرياً عاماً.
عنوان وفقرات مع style
html<h1 style="color: darkgreen;">ملاحظات الحديقة</h1>
<p style="color: #333333;">نص الجسم بلون رمادي داكن.</p>
<p style="background-color: honeydew; font-size: 20px;">نصيحة بارزة بخلفية خضراء ناعمة.</p>ما الذي تلاحظه
- لون
h1لا يعيد تنسيق الفقرات تلقائياً - الفقرة الثانية تجمع الخلفية وحجم الخط
- التنسيق المضمّن محلي: يؤثر على ذلك العنصر (وبقواعد CSS العادية قد يؤثر على الأبناء — لكن أبقِ العروض بسيطة الآن)
الأن style مضمّن، ولاحقاً CSS
style المضمّن سريع للتجارب. يصبح مؤلماً عندما تحتاج عشرون صفحة نفس لون العنوان الكحلي ويجب تعديل عشرين سمة. CSS المشترك — كتلة <style> في رأس المستند، أو ملف .css خارجي — يبقي المظهر في مكان واحد. يتضمن هذا المقرر تعلّم CSS مخصصاً لاحقاً. في جلسة HTML هذه، مهمتك فهم فكرة property:value وكتابة أمثلة مضمّنة صحيحة دون اعتبار التنسيق المضمّن البنية النهائية لموقع كامل.
تمرّن في المحرّر
- أنشئ صفحة بـ
h1واحد وثلاث فقرات قصيرة. - أعطِ الفقرة الأولى
colorللنص. - أعطِ الثانية
background-color. - أعطِ الثالثة مزيجاً من
colorوfont-size. - اختيارياً لوّن
h1بـstyleخاص به. - احفظ وحدّث. تأكد أن كل كتلة تبدو مختلفة.
- اكسر مثالاً عمداً (احذف اقتباساً أو
px)، حدّث، شاهد الفشل، ثم أصلحه.
العمل على style فاشل يعلّم الاقتباس والوحدات أسرع من نسخ عينات مثالية فقط.
أخطاء تخفي أنماطك
- نسيان علامات الاقتباس حول القيمة:
style=color:redغير صالح في كتابة سمات HTML العادية - الخلط بين
color(النص) وbackground-color(خلف النص) والظن أن «اللون لم يفعل شيئاً» - حذف الوحدات حيث يحتاج الحجم إليها (
font-size: 24بدل24pxفي كثير من حالات المبتدئين) - معالج نصوص يستبدل الاقتباس المستقيم باقتباس منحني داخل السمات
- حشو تصميم صفحة كاملة في أنماط مضمّنة بدل تعلّم CSS المشترك التالي
- تغيير الملف ونسيان الحفظ قبل التحديث — المتصفح ما زال يعرض النسخة القديمة
ملخص
- سمة
styleتضيف إعلانات CSS إلى عنصر HTML واحد - اكتب
property: value;وأبقِ القائمة كلها داخل علامات اقتباس - خصائص البداية:
color،background-color،font-size - ادمج بضع إعلانات بفاصلة منقوطة؛ أبقِ العروض قصيرة وقابلة للقراءة
- التنسيق المضمّن ممتاز للتعلّم والتجارب الصغيرة، لا لصيانة تصميم موقع كامل
- CSS المشترك يأتي لاحقاً في مسار التعلّم عندما تريد مكاناً واحداً للتحكم بالمظهر
- تحقق دائماً بالحفظ + التحديث، وافحص الاقتباس والوحدات عندما «تفشل الأنماط بغموض»
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى