وثائق CSS قابلة للتشغيل: External CSS

Q: ما هي External CSS؟

External CSS ملف أنماط محفوظ في ملف .css مستقل ويُحمَّل عبر داخل الصفحة. كل صفحة تربط الملف تحصل على الأنماط نفسها، والمتصفح يخزّن الملف مؤقتًا بين الصفحات.

Q: كيف أربط ملف CSS بـ HTML؟

أضف داخل . قيمة href مسار نسبي إلى ملف HTML، فـ css/styles.css يشير إلى مجلد css بجانبه، و/styles.css يبدأ من جذر الموقع.

Q: لماذا لا يعمل ملف CSS الخارجي عندي؟

الأسباب المعتادة: مسار href خاطئ (ابحث عن خطأ 404 في تبويب Network)، أو غياب rel="stylesheet"، أو وسوم مكتوبة داخل ملف .css، أو قاعدة لاحقة تتجاوز قاعدتك. التحديث القسري يستبعد نسخة قديمة مخزنة.

External CSS وInternal CSS: شرح link وstyle

تعيش External CSS في ملف .css تربطه كل صفحة عبر <link rel="stylesheet">، أما Internal CSS فتوجد في عنصر <style> داخل صفحة واحدة. تعلّم الاثنين، وكيف تعمل مسارات الملفات، وأي قاعدة تفوز حين تلتقيان.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

External CSS في سطر واحد

External CSS ملف .css منفصل. تربطه من <head> كل صفحة تحتاجه:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

يحتوي الملف نفسه على قواعد CSS عادية، من دون أي وسوم HTML حولها:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

المعاينة أدناه لا تملك ملفًا ثانيًا لتحميله، لذلك تضع CSS نفسها في عنصر <style>. هذه هي Internal CSS، وتُعرض تمامًا كما سيُعرض الملف المربوط:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

Internal CSS: العنصر style

Internal CSS (وتسمى أيضًا embedded CSS) هي عنصر <style> داخل الصفحة. ضعه في <head> كي تكون الأنماط معروفة قبل عرض الجسم. ينطبق على الصفحة كلها، وقواعده تستخدم المحددات، وهو ما لا تستطيعه سمات style المضمّنة.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

مرّر المؤشر فوق وسم: يعمل :hover هنا لأنه قاعدة حقيقية. الطريقة الثالثة، السمة style، مشروحة في صفحة Inline CSS.

الفرق بين Internal CSS وExternal CSS

	الخارجية (`<link>`)	الداخلية (`<style>`)
المكان	ملف `.css`	داخل صفحة HTML
النطاق	كل صفحة تربطه	صفحة واحدة
التخزين المؤقت	يُنزَّل مرة ويُعاد استخدامه بين الصفحات	يُرسل من جديد مع كل صفحة
تعديل مظهر الموقع	تغيير ملف واحد	تغيير كل صفحة
طلب إضافي	نعم، طلب لكل ملف	لا
مناسبة لـ	المواقع الحقيقية	العروض، الصفحات المفردة، بريد HTML، CSS الحرجة

الخصوصية واحدة في الحالتين: قاعدة في عنصر <style> والقاعدة نفسها في ملف مربوط لهما الوزن نفسه تمامًا. عند التعادل تفوز القاعدة التي تأتي لاحقًا في المستند.

الترتيب: ملف الأنماط اللاحق يفوز

تُقرأ ملفات الأنماط بترتيب المستند، سواء <link> أو <style>. بين قاعدتين بالخصوصية نفسها تفوز اللاحقة. كتلتا <style> أدناه تمثلان ملفًا مربوطًا يتبعه تجاوز على مستوى الصفحة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

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

مسارات الملفات في href

قيمة href في <link> عنوان URL يُحسب نسبةً إلى موقع ملف HTML.

href	ما يحمّله
`styles.css`	ملف في مجلد الصفحة نفسه
`css/styles.css`	مجلد `css` بجانب الصفحة
`../styles.css`	مجلد واحد إلى الأعلى
`/styles.css`	من جذر الموقع
`https://example.com/a.css`	عنوان URL كامل على خادم آخر

في موقع صفحاته على أعماق مختلفة، يبقي الشكل النسبي إلى الجذر (/css/styles.css) مسارًا واحدًا يعمل في كل صفحة.

ملفات أنماط للطباعة ووسائط أخرى

تقصر السمة media ملف الأنماط على الشروط المطابقة. يقبلها كل من <link> و<style>:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

المعاينة شاشة، لذلك يظهر الشريط. في صفحة حقيقية يختفي الشريط من النسخة المطبوعة، ويمكنك رؤية ذلك في DevTools بمحاكاة نوع الوسائط print (لوحة Rendering).

أخطاء شائعة

مسار خاطئ. خطأ مطبعي في href لا يحمّل شيئًا، فتُعرض الصفحة بلا تنسيق. افتح DevTools، ثم تبويب Network، وابحث عن خطأ 404 لملف .css.
نسيان rel="stylesheet". من دونها لا يحمّل <link href="styles.css"> ملف أنماط.
HTML داخل ملف .css. ملف .css يحتوي على قواعد فقط. وسوم <style> داخله ليست CSS صالحة وتفسد القاعدة المجاورة لها.
وضع ملف أنماطك قبل ملف إطار العمل. عند تساوي الخصوصية يفوز الملف اللاحق، لذلك اربط CSS الخاصة بك أخيرًا.
رؤية نسخة قديمة. المتصفحات تخزّن ملفات الأنماط مؤقتًا. نفّذ تحديثًا قسريًا، أو أضف رقم إصدار إلى العنوان (styles.css?v=2) عند نشر تغيير.

الأسئلة الشائعة

ما هي External CSS؟

External CSS ملف أنماط محفوظ في ملف .css مستقل ويُحمَّل عبر <link rel="stylesheet" href="styles.css"> داخل <head> الصفحة. كل صفحة تربط الملف تحصل على الأنماط نفسها، والمتصفح يخزّن الملف مؤقتًا بين الصفحات.

ما هي Internal CSS؟

Internal CSS، وتسمى أيضًا embedded CSS، هي CSS مكتوبة داخل عنصر <style> في مستند HTML نفسه، عادةً داخل <head>. تنطبق على تلك الصفحة فقط.

كيف أربط ملف CSS بـ HTML؟

أضف <link rel="stylesheet" href="styles.css"> داخل <head>. قيمة href مسار نسبي إلى ملف HTML، فـ css/styles.css يشير إلى مجلد css بجانبه، و/styles.css يبدأ من جذر الموقع.

أيهما أفضل، Internal CSS أم External CSS؟

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

لماذا لا يعمل ملف CSS الخارجي عندي؟

الأسباب المعتادة: مسار href خاطئ (ابحث عن خطأ 404 في تبويب Network)، أو غياب rel="stylesheet"، أو وسوم <style> مكتوبة داخل ملف .css، أو قاعدة لاحقة تتجاوز قاعدتك. التحديث القسري يستبعد نسخة قديمة مخزنة.

مفاهيم ذات صلة