طرق إضافة CSS: داخل الوسم وفي الصفحة وملف خارجي

في الدرس السابق كتبت CSS داخل الوسم <style>. لكن هذه ليست الطريقة الوحيدة، ولا هي الطريقة التي تستخدمها المواقع الكبيرة. في هذا الدرس ستتعرف على الطرق الثلاث لربط CSS بصفحتك، ومتى تختار كل واحدة، وماذا يحدث عندما تتعارض التنسيقات.

الطريقة الأولى: داخل الوسم (Inline)

تكتب التنسيق مباشرة في الخاصية style لعنصر واحد:

<p style="color: green; font-size: 20px;">هذه فقرة خضراء.</p>

لاحظ أنه لا يوجد محدد ولا أقواس معقوفة، لأن التنسيق يخص هذا العنصر وحده. نكتب الخصائص مباشرة، ونفصل بينها بالفاصلة المنقوطة.

هذه الطريقة مثل أن تكتب ملاحظة بخط يدك على صفحة واحدة من كتاب: سريعة، لكنها لا تؤثر في أي صفحة أخرى. ولو أردت تلوين 30 فقرة، ستكرر نفس الكلام 30 مرة.

متى تستخدمها؟ نادراً: لتجربة سريعة، أو عندما تضيف JavaScript تنسيقاً لعنصر معين. وتجنّبها في الكود الحقيقي، لأنها تخلط الشكل بالمحتوى من جديد.

الطريقة الثانية: داخل الصفحة (Internal)

تكتب القواعد داخل <style> في <head> الصفحة، وهي الطريقة التي استخدمتها في الدرس السابق:

<head>
  <meta charset="UTF-8">
  <style>
    p {
      color: green;
    }
  </style>
</head>

القواعد هنا تنطبق على كل عناصر هذه الصفحة التي يطابقها المحدد، لكنها لا تؤثر في الصفحات الأخرى.

متى تستخدمها؟ لصفحة واحدة مستقلة، أو للتجربة والتعلم، أو لتنسيق خاص بصفحة معينة فقط.

الطريقة الثالثة: ملف خارجي (External)

هذه الطريقة الاحترافية. تكتب كل التنسيقات في ملف مستقل بامتداد .css:

style.css

body {
  font-family: sans-serif;
  background-color: #f7f8fc;
}

h1 {
  color: #5b5bf0;
}

ثم تربطه بكل صفحة من صفحات موقعك بالوسم <link> داخل <head>:

index.html

<head>
  <meta charset="UTF-8">
  <title>موقعي</title>
  <link rel="stylesheet" href="style.css">
</head>

• rel="stylesheet": نوع العلاقة، أي «هذا ملف تنسيق».
• href: مسار ملف CSS، بنفس قواعد المسارات التي تعلمتها في درس الروابط بكورس HTML.

لاحظ أن ملف CSS لا يحتوي على وسم <style>، بل قواعد CSS فقط.

لماذا الملف الخارجي هو الأفضل؟

1. تعديل واحد يغيّر الموقع كله: إذا كان لديك 50 صفحة مربوطة بنفس الملف، تعدّل لوناً واحداً فيتغير في كل الصفحات.
2. الصفحات أسرع: المتصفح يحمّل ملف CSS مرة واحدة ويحتفظ به في ذاكرته المؤقتة (Cache)، ثم يستخدمه لكل صفحة يزورها المستخدم بعد ذلك دون تحميله من جديد.
3. كود أنظف: ملف HTML للمحتوى فقط، وملف CSS للشكل فقط، فيسهل العمل على كل منهما.

تخيّل الملف الخارجي مثل الزي المدرسي الموحد: تقرّر لونه مرة واحدة، فيلبسه كل الطلاب. ولو قررت المدرسة تغيير اللون، يتغير عند الجميع.

تنظيم المشروع

المشاريع الصغيرة تكفيها بنية بسيطة: ملف index.html، ومجلد css بداخله style.css. وعندها يكون الرابط href="css/style.css".

التعليقات في CSS

التعليق في CSS يُكتب بين /* و */، ويمكن أن يمتد على عدة أسطر:

/* ألوان العناوين الرئيسية */
h1 {
  color: #5b5bf0;
}

/*
  هذا القسم خاص بالفوتر
  سنكمله لاحقاً
*/

لاحظ أن صيغة تعليقات HTML <!-- --> لا تعمل داخل CSS.

ماذا لو تعارضت التنسيقات؟

افترض أن الملف الخارجي يقول إن الفقرات زرقاء، و <style> يقول إنها حمراء، والخاصية style على فقرة معينة تقول إنها خضراء. ما اللون النهائي؟

القاعدة العامة:

• التنسيق داخل الوسم style="..." هو الأقوى دائماً تقريباً.
• بين <style> والملف الخارجي، تفوز القاعدة التي تأتي أخيراً في ترتيب الصفحة. لذلك إذا كتبت <link> قبل <style>، تفوز قواعد <style>.

وهذا هو معنى كلمة «المتتالية» (Cascading) في اسم CSS: التنسيقات تتراكب فوق بعضها، والأخير أو الأقوى يغطي ما قبله. ستتعلم في الدرس القادم أن نوع المحدد أيضاً يؤثر في قوة القاعدة.

جرّب بنفسك

هنا ثلاث فقرات: الأولى بلا تنسيق خاص، والثانية عليها كلاس، والثالثة عليها style مباشر. لاحظ من يفوز، ثم احذف الخاصية style من الفقرة الثالثة وشغّل من جديد:

جرّب بنفسكHTML

محرر الكود (HTML)<style> p { color: blue; font-size: 18px; } .special { color: red; } </style> <p>فقرة تأخذ تنسيق p العام.</p> <p class="special">فقرة عليها كلاس special.</p> <p class="special" style="color: green;">فقرة عليها style مباشر.</p>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• مسار خاطئ في link: إذا لم يظهر أي تنسيق، فغالباً المسار خطأ. تأكد من اسم الملف والمجلد وحالة الأحرف.
• كتابة وسم style داخل ملف css: ملف CSS يحتوي القواعد فقط، والوسم <style> مكانه في HTML.
• نسيان rel=“stylesheet”: بدونه لا يعرف المتصفح أن الملف للتنسيق، فيتجاهله.

اختبر نفسك

سؤال

أي طريقة هي الأنسب لموقع فيه 20 صفحة بنفس التصميم؟

وسم <style> في كل صفحةالخاصية style في كل عنصرملف CSS خارجي مربوط بكل الصفحات

سؤال

أي سطر يربط ملف CSS خارجي بصفحة HTML بشكل صحيح؟

<link rel="stylesheet" href="style.css"><style src="style.css"><css href="style.css">

الخلاصة

• Inline: الخاصية style على عنصر واحد، تجنّبها إلا للضرورة.
• Internal: الوسم <style> في <head>، لصفحة واحدة.
• External: ملف .css مربوط بـ <link rel="stylesheet" href="...">، وهو الأفضل للمواقع.
• التعليقات في CSS بين /* و */.
• عند التعارض: style المباشر أقوى، ثم القاعدة الأخيرة في الترتيب.