طرق إدخال CSS

يمكن إدخال أنماط CSS في مستندات HTML بثلاث طرق: الأنماط الداخلية والأنماط الخارجية والأنماط المضمنة. كل طريقة لها حالات استخدامها المناسبة.

✅ أفضل ممارسة: لبيئات الإنتاج، يُنصح بأوراق الأنماط الخارجية (<link>). إنها تفصل HTML وCSS تماماً، وتسمح للمتصفحات بتخزين ملفات CSS مؤقتاً، وتحسن سرعة التحميل عند مشاركتها عبر صفحات متعددة.

1. الأنماط المضمنة

الأنماط المضمنة تكتب CSS مباشرة في سمة style لعلامة HTML.

مثال

HTML

<p style="color: red; font-size: 18px;">هذا النص أحمر وحجمه 18 بكسل</p>

<div style="width: 200px; height: 100px; background: blue;">
  هذا صندوق أزرق
</div>

▶ جرّب الكود

الخصائص:

تؤثر فقط على العنصر الحالي
أعلى أولوية (تتجاوز الأنماط المحددة بطرق أخرى)
لا يمكن إعادة استخدامها، غير مناسبة للاستخدام الواسع
مناسبة للاختبار السريع أو التعديلات المؤقتة

حالات استخدام: نادراً ما تُستخدم. قد تُستخدم في سيناريوهات تتطلب تغييرات نمطية ديناميكية عبر JavaScript.

2. الأنماط الداخلية

الأنماط الداخلية تكتب CSS داخل علامة <head> في مستند HTML، محاطة بعلامة <style>.

مثال

HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>مثال النمط الداخلي</title>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
    h1 {
      color: blue;
      text-align: center;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>عنوان</h1>
  <p>نص الفقرة</p>
  <p>هذا النص له خلفية مميزة</p>
</body>
</html>

▶ جرّب الكود

الخصائص:

الأنماط قابلة لإعادة استخدام داخل الصفحة الحالية (عناصر متعددة يمكنها المشاركة)
البنية والأنماط في نفس الملف، ملائمة لإدارة صفحة واحدة
الصفحات الأخرى لا يمكنها مشاركة هذه الأنماط
مناسبة لمشاريع صفحة واحدة أو تمارين التعلم

3. الأنماط الخارجية (أوراق الأنماط الخارجية)

الأنماط الخارجية تكتب CSS في ملف .css منفصل، ثم تستخدم علامات <link> لإدراجه في HTML. هذه هي الطريقة الأكثر استخداماً في التطوير الفعلي.

ملف HTML:

HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>مثال النمط الخارجي</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>نمط هذا النص يأتي من ملف CSS خارجي</p>
</body>
</html>

ملف style.css:

CSS

p {
  color: red;
  font-size: 16px;
  line-height: 1.8;
}

الخصائص:

فصل كامل بين البنية والأنماط
ملف CSS واحد يمكن مشاركته عبر صفحات متعددة
تعديل ملف CSS واحد يؤثر على جميع الصفحات التي تشير إليه
المتصفحات يمكنها تخزين ملفات CSS مؤقتاً، مما يحسن سرعة التحميل
هذه هي الممارسة القياسية للتطوير على مستوى المؤسسات

طريقة @import (للمعرفة فقط)

⚠️ ملاحظة: @import يحمل الملفات المشار إليها بعد اكتمال تحميل ملف CSS، مما يُسبب "وميض محتوى غير مُنمط" على الصفحة. هذه الطريقة قديمة بشكل كبير في المشاريع الحديثة، واستُبدلت بـ<link>.

بجانب علامة <link>، يمكنك أيضاً استخدام @import في ملفات CSS لاستيراد ملفات CSS أخرى:

مثال

HTML

<style>
@import url("reset.css");
@import url("layout.css");

p {
  color: red;
}
</style>
<p>هذا مثال على فقرة.</p>

▶ جرّب الكود

لكن هذه الطريقة أداءها أسوأ من علامات <link> ولا يُنصح بها.

مقارنة الطرق الثلاث

الميزة	الأنماط المضمنة	الأنماط الداخلية	الأنماط الخارجية
قابلية إعادة الاستخدام	غير قابلة لإعادة الاستخدام	إعادة استخدام في صفحة واحدة	مشاركة عبر صفحات متعددة
فصل البنية/النمط	❌ مختلطة تماماً	✅ مفصول (نفس الملف)	✅ مفصول تماماً
الأولوية	الأعلى	المتوسطة	الأقل
أداء التحميل	لا طلبات إضافية	لا طلبات إضافية	يتطلب طلب HTTP إضافي
مستوى التوصية	⭐	⭐⭐	⭐⭐⭐⭐⭐

قواعد الأولوية

عندما تظهر الطرق الثلاث معاً، قاعدة الأولوية هي:

الأنماط المضمنة > الأنماط الداخلية > الأنماط الخارجية

ملاحظة: هذا يشير إلى أولوية طرق الإدراج، وليس تفصيل المُحدد. تفصيل المُحدد يُقارن "داخل نفس طريقة الإدراج"، بينما أولوية طريقة الإدراج تُconsidered فقط عندما تتعارض أنماط من طرق مختلفة.

❓ أسئلة شائعة

س ما السيناريوهات المناسبة لطرق إدخال CSS الثلاث؟

ج أوراق الأنماط الخارجية هي القياسية للإنتاج (صفحات متعددة تشارك ملف .css واحد، تخزين المتصفح سريع)؛ الأنماط الداخلية مناسبة لتطبيقات صفحة واحدة أو أنماط فوق الثنية للصفحة الرئيسية؛ الأنماط المضمنة يُنصح بها فقط للتصحيح المؤقت، لا للاستخدام الواسع في المشاريع الرسمية.

س ما الفرق بين link و@import؟

ج link هي علامة HTML، و@import هو بنية CSS. link يحمل بالتوازي مع HTML، بينما @import ينتظر اكتمال تحميل ملف CSS قبل تحميل الملفات المشار إليها، مما يجعله أبطأ. link هو النهج المُوصى به.

س هل الأنماط المضمنة لها أعلى أولوية؟

ج الأنماط المضمنة لديها أولوية عالية جداً، لكن `!important` يمكنها تجاوزها. يُنصح باستخدام تفصيل المُحدد لإدارة الأنماط بدلاً من الاعتماد على !important، وإلا ستصبح الصيانة مؤلمة لاحقاً.

📖 ملخص

كل طريقة من طرق الإدراج الثلاث لها غرضها: الأنماط المضمنة نادراً ما تُستخدم لكن لها أعلى أولوية، الأنماط الداخلية تناسب مشاريع صفحة واحدة صغيرة، الأنماط الخارجية هي الخيار الرئيسي للتطوير الفعلي
تذكر مبدأ واحد: استخدم أوراق الأنماط الخارجية كلما أمكن لتعظيم قابلية إعادة استخدام الكود وصيانته
في العمل الفعلي، سترى غالباً مشاريع بملف CSS واحد أو أكثر مُدرجة عبر علامات <link>

📝 تمارين

أنشئ ملف HTML باستخدام الطرق المضمنة والداخلية والخارجية لتعيين أنماط مختلفة.
أنشئ ملف style.css خارجي يُحدد ألوان الفقرات وأنماط العناوين، ثم أدرجه في HTML.
على نفس العنصر، استخدم الطرق الثلاث لتعيين نفس الخاصية (مثل color)، وراقب أيها يعمل، وتحقق من قواعد الأولوية.
عدّل الألوان في ملف style.css، وأعد تحميل المتصفح لرؤية التغييرات، واختبر راحة صيانة الأنماط الخارجية.