جاري التحميل...

CSS في HTML

سبق أن تدرّبت على تغييرات مظهر صغيرة بسمة style وقيم الألوان. المواقع الحقيقية نادرًا ما تبقي كل قاعدة تصميم على كل وسم. CSS (Cascading Style Sheets) هو اللغة التي تصف المظهر والإحساس. تركز هذه الجلسة على كيف يحمّل HTML ملف CSS بثلاث طرق شائعة — لا على بناء نظام تصميم كامل بعد. فهم مكان القواعد يوفّر وقت التصحيح لاحقًا ويجعل صفحات التدريب أقرب إلى طريقة عمل المشاريع الحقيقية. عندما تعرف أين يعيش كل نوع من الأنماط، يصبح الانتقال إلى كورس CSS أسهل لأنك تعرف كيف تربط الصفحة بالملف قبل أن تكتب قواعد تخطيط معقّدة.

ماذا يفعل CSS هنا؟

HTML يبني هيكل المحتوى. CSS يصف العرض: الألوان والمسافات والخطوط وأفكار التخطيط التي ستتعمّق فيها لاحقًا. يمكن لصفحة HTML أن تحمل بضع إعلانات CSS على عنصر واحد، أو تحتفظ بورقة أنماط صغيرة داخل المستند، أو تشير إلى ملف .css منفصل. اختيار المكان الصحيح يبقي العروض سريعة والمشاريع الحقيقية قابلة للصيانة. إذا وضعت كل شيء مضمّنًا على كل وسم، يصبح التحديث بطيئًا ومكررًا؛ وإذا ربطت ملفًا خارجيًا مبكرًا، تتعلّم عادة المشاركة التي تعتمد عليها المواقع الحقيقية. الهدف هنا ليس حفظ مكتبة خصائص، بل فهم مسار التحميل من HTML إلى القاعدة التي يطبّقها المتصفح.

إجابة مباشرة

استخدم CSS مضمّنًا مع style="..." على عنصر واحد للاختبارات السريعة. استخدم كتلة داخلية <style>...</style>، عادة في <head>، لتمرين صفحة واحدة. استخدم ملفًا خارجيًا .css مربوطًا بـ <link rel="stylesheet" href="styles.css"> عندما يجب أن تتشارك صفحات كثيرة نفس المظهر. فضّل CSS الخارجي بمجرد أن تهتم بإعادة الاستخدام وHTML نظيف. هذه القاعدة البسيطة تمنع خلط العروض السريعة مع أسلوب موقع كامل؛ كل طريقة لها دور واضح، والانتقال من المضمّن إلى الخارجي جزء طبيعي من التعلّم لا علامة فشل.

ثلاث طرق في لمحة

📊 ثلاث طرق لإضافة CSS

الطريقة أين الأفضل لـ
مضمّن سمة style على وسم اختبارات صغيرة لمرة واحدة
داخلي عنصر style في head عروض صفحة واحدة
خارجي ملف .css + link تنسيق مشترك للموقع

CSS المضمّن (تذكير)

يعيش CSS المضمّن على عنصر واحد. مثالي لتجربة ثلاثين ثانية وضعيف لموقع كامل، لأن كل مظهر متكرر يجب نسخه مرة أخرى. عندما تحتاج لونًا واحدًا على فقرة واحدة أثناء الشرح، السمة كافية؛ وعندما يتكرر اللون على عشر فقرات في خمس صفحات، يصبح النسخ مصدر أخطاء. استخدم المضمّن كجسر تعلّم، لا كأساس لهوية علامة تجارية متعددة الصفحات.

تذكير CSS مضمّن

html
HTML Code 
<p style="color: teal;">CSS مضمّن على عنصر واحد</p>

متى لا يزال المضمّن مفيدًا

  • التحقق السريع من لون أو حجم واحد
  • تعليم فكرة property:value من الجلسات السابقة
  • تجاوزات مؤقتة أثناء التعلّم — ثم انقل القاعدة إلى ورقة أنماط
    لا تبنِ علامة تجارية كاملة متعددة الصفحات بسمات مضمّنة فقط. ذلك المسار يصبح صعب التحديث، ويصعب مشاركة نفس القاعدة بين الملفات، ويبطئ أي تغيير لوني لاحق على الموقع كله. احتفظ بالمضمّن للتجارب القصيرة ثم انتقل مبكرًا إلى كتلة داخلية أو ملف خارجي.

CSS الداخلي في head

ورقة الأنماط الداخلية عنصر <style> يحمل قواعد CSS لملف HTML الحالي. عادة يضع المبتدئون العنصر في <head> حتى يُعلن التنسيق قبل محتوى body. هذا الترتيب يساعد المتصفح والمتعلّم معًا: ترى القواعد في مكان واحد أعلى الصفحة بدل البحث عنها وسط المحتوى. الكتلة الداخلية مناسبة عندما تتدرّب على عدة قواعد لكن ما زلت تعمل على ملف HTML واحد فقط.

CSS داخلي في head

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>This paragraph uses the style block.</p>
</body>
</html>

قراءة المثال الداخلي

  • عنصر style يحتوي CSS، لا وسوم هيكل الصفحة
  • p { color: navy; } يعني «كل عناصر p تحصل على نص كحلي في هذا المستند»
  • قاعدة واحدة يمكنها تنسيق فقرات كثيرة دون تكرار style="..." على كل وسم
  • CSS الداخلي ما زال محصورًا في ملف HTML هذا — الصفحات الأخرى لا تراه إلا إذا نسخت الكتلة
  • يمكنك إضافة قواعد أخرى داخل نفس الكتلة، مثل تنسيق h1، دون فتح ملف ثانٍ بعد

CSS الخارجي مع link

يبقي CSS الخارجي القواعد في ملف مثل styles.css. يتصل HTML بذلك الملف بعنصر link. هذا النمط المعتاد لتنسيق الموقع المشترك. عندما يتغيّر لون العنوان مرة واحدة في الملف الخارجي، تتأثر كل الصفحات المرتبطة به — وهذا هو المكسب الكبير مقابل نسخ الكتل الداخلية في كل ملف. ابدأ بملف CSS بجانب HTML، ثم نظّم المجلدات عندما تتقن المسارات.

رابط ورقة أنماط خارجية

html
HTML Code 
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>

ما الذي يجب أن يكون صحيحًا ليعمل CSS الخارجي

  • يحتاج link إلى rel="stylesheet" حتى يعرف المتصفح العلاقة
  • يجب أن يشير href إلى ملف CSS الحقيقي بمسار صحيح (راجع جلسة File Paths)
  • داخل styles.css تكتب قواعد مثل p { color: navy; } و h1 { color: darkgreen; }
  • إذا كان المسار خاطئًا، يفتح HTML رغم ذلك — لكنه يبدو بلا تنسيق
  • أسماء الملفات حسّاسة لحالة الأحرف على بعض الخوادم؛ طابق الاسم في href مع الاسم الحقيقي على القرص
    ضع ملف CSS بجانب ملف HTML في أول تدريب، ثم جرّب مجلدًا فرعيًا فقط بعد أن تشعر أن المسارات ثابتة. كسر المسار عمدًا ثم إصلاحه يدرّب العين أسرع من قراءة النظريات وحدها.

اختيار الطريقة

اسأل إلى أي مدى يجب أن تسافر الأنماط:

  • تجربة سريعة على عنصر واحد → مضمّن
  • صفحة تدريب واحدة، عدة قواعد → <style> داخلي في head
  • صفحات كثيرة، مظهر مشترك واحد → .css خارجي + link
    عندما تنتقل لاحقًا إلى كورس CSS كامل، تصبح أوراق الأنماط الخارجية الافتراض للمشاريع الحقيقية. جلسة HTML هذه تتأكد أنك تستطيع ربطها بشكل صحيح قبل كتابة تخطيطات معقّدة. لا يوجد «طريقة خاطئة» في التمرين القصير؛ الخطأ هو استخدام المضمّن لكل شيء بعد أن يحتاج الموقع مشاركة حقيقية. اختر الطريقة التي تطابق نطاق إعادة الاستخدام، ثم التزم بها حتى تتغيّر حاجة المشروع.

تمرين في محررك

  1. أنشئ page.html بعنوان وفقرتين.
  2. أنشئ styles.css بقاعدة تلوّن h1 وأخرى تنسّق p.
  3. في head الخاص بـ HTML أضف <link rel="stylesheet" href="styles.css">.
  4. افتح الصفحة. إذا غابت الأنماط، راجع المسار وrel.
  5. أعد تسمية styles.css مؤقتًا أو انقله، أعد التحميل، شاهد الفشل، ثم أصلح href.
  6. اختياري: انقل قاعدة واحدة إلى كتلة داخلية <style> وقارن.
    كسر الرابط عمدًا يعلّم أخطاء المسار أسرع من القراءة وحدها. كرّر التمرين بملف في مجلد فرعي صغير بعد أن ينجح الربط بجانب الصفحة، حتى تثق أن href يعكس المكان الحقيقي للملف. احفظ دائمًا قبل التحديث حتى لا تظن أن المتصفح تجاهل قاعدة كتبتها ولم تحفظها.

أخطاء تترك الصفحات بلا تنسيق

  • نسيان rel="stylesheet" على link
  • وضع styles.css في مجلد آخر لكن الربط كما لو كان بجانب HTML
  • ملء كل وسم بـ style مضمّن بدل مشاركة ورقة أنماط واحدة
  • إسقاط كتلة <style> كبيرة في نهاية body من العادة بينما head أوضح للمبتدئين
  • تعديل ملف CSS ثم تحديث ملف HTML مختلف عن الذي ربطته
  • كتابة اسم ملف في href يختلف في المسافات أو الامتداد عن الملف الحقيقي على القرص
    كل خطأ من هذه يضيع الوقت أو يوهمك أن «CSS لا يعمل» بينما المشكلة في الربط. اقرأ الصفحة كما يقرأها الزائر: هل وصل التنسيق؟ وهل تفهم أي ملف هو مصدر القاعدة؟

ملخص

  • CSS ينسّق HTML؛ ويمكن لـ HTML تحميل CSS مضمّنًا أو داخليًا أو خارجيًا
  • style المضمّن مناسب للاختبارات الصغيرة، لا للمواقع كاملة
  • <style> الداخلي في head يناسب التدريب على ملف واحد
  • .css الخارجي مع link rel="stylesheet" هو النهج المشترك المعتاد
  • مسارات الملفات الصحيحة أهم بقدر أهمية قواعد CSS نفسها
  • فضّل الطريقة التي تطابق مدى إعادة استخدام الأنماط
    بهذا الترتيب تبني عادة واضحة: اختبر بسرعة عند الحاجة، نظّم القواعد داخل الصفحة للتمرين، ثم اربط ملفًا مشتركًا عندما تتعدد الصفحات — وتحقق دائمًا من المسار وrel قبل أن تلوم القاعدة نفسها.

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 1 من 1
Html درس تعليمي