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

Q: ما هي Inline CSS؟

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

Q: ما الطرق الثلاث لإضافة CSS إلى HTML؟

المضمّنة (inline) عبر السمة style على العنصر؛ والداخلية (internal) عبر عنصر في الصفحة؛ والخارجية (external) عبر ملف .css منفصل يُربط بـ داخل . الملفات الخارجية هي الخيار المعتاد لموقع كامل.

Q: هل تتغلب Inline CSS على CSS الخارجية؟

نعم، في معظم الحالات. التصريح في السمة style يتغلب على أي محدد في ملف الأنماط مهما كانت خصوصيته. الطريقة الوحيدة كي يفوز ملف الأنماط هي !important، و!important المضمّنة تتغلب على ذلك أيضًا.

Q: هل استخدام Inline CSS ممارسة سيئة؟

لتنسيق موقع كامل، نعم: تكرر نفسها، ولا تدعم :hover ولا استعلامات الوسائط، ويصعب تجاوزها. لكنها مناسبة للقيم الفردية التي يضعها JavaScript أو قالب، مثل عرض شريط التقدم أو لون يختاره المستخدم.

Q: هل يمكن استخدام hover في Inline CSS؟

لا. السمة style تقبل التصريحات فقط، فلا يمكن كتابة الفئات الزائفة مثل :hover ولا العناصر الزائفة مثل ::before ولا قواعد @media فيها. ضعها في عنصر أو في ملف أنماط.

ما هي Inline CSS

Inline CSS هي CSS تُكتب مباشرة على عنصر HTML عبر السمة style. قيمتها قائمة من التصريحات بالشكل property: value;، وتنطبق على ذلك العنصر فقط.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

لا يوجد محدد ولا أقواس معقوصة: العنصر الذي يحمل السمة هو الهدف. افصل بين التصريحات بفواصل منقوطة. الفاصلة المنقوطة الأخيرة اختيارية، لكن إبقاءها يجعل إضافة التصريح التالي آمنة.

الصيغة

<element style="property: value; property: value;">

الجزء	مثال	ملاحظات
السمة	`style="..."`	سمة عامة: مسموحة على كل عناصر HTML
التصريح	`color: #2563eb;`	الصيغة نفسها داخل قاعدة في ملف الأنماط
عدة تصريحات	`padding: 8px; border: 1px solid #e5e7eb;`	يُفصل بينها بـ `;`
علامات تنصيص داخلية	`style="font-family: 'Courier New', monospace;"`	استخدم علامات تنصيص مفردة داخل السمة المحاطة بعلامات مزدوجة

كل ما ليس تصريحًا غير مسموح. لا مكان لـ :hover و::before و@media والمحددات في السمة style.

الطرق الثلاث لإضافة CSS إلى HTML

تصل CSS إلى الصفحة بثلاث طرق. تشرح هذه الصفحة الطريقة الأولى، ولـ CSS الخارجية والداخلية صفحتها الخاصة.

الطريقة	أين توجد CSS	النطاق	الاستخدام المعتاد
المضمّنة (Inline)	السمة `style` على عنصر واحد	ذلك العنصر	قيم فردية، وقيم يضعها JavaScript
الداخلية (Internal)	عنصر `<style>` في الصفحة	تلك الصفحة	عروض صفحة واحدة، قوالب البريد الإلكتروني، CSS الحرجة
الخارجية (External)	ملف `.css` مربوط عبر `<link>`	كل صفحة تربطه	تنسيق موقع كامل

الفقرة نفسها منسقة بالطرق الثلاث (الملف الخارجي معروض كتعليق، لأن المعاينة لا تملك ملفًا ثانيًا لتحميله):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

تحتفظ الفقرة الثالثة بالحشو ونصف قطر الزوايا من القاعدة .note وتستبدل الخلفية فقط، لأن النمط المضمّن يضبط تلك الخاصية وحدها.

لماذا تفوز الأنماط المضمّنة

حين تضبط قاعدة في ملف الأنماط ونمط مضمّن الخاصية نفسها، يفوز النمط المضمّن. لا يهم مدى خصوصية المحدد: حتى محدد المعرّف ID يخسر.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

الاستثناء الوحيد هو !important. التصريح في ملف الأنماط الموسوم بـ !important يتغلب على التصريح المضمّن العادي، و!important المضمّنة تتغلب على الاثنين. لهذا السبب تجعل الأنماط المضمّنة صيانة الموقع صعبة: لتغييرها من ملف الأنماط تحتاج إلى !important، وهذا يبدأ سباقًا تصاعديًا. تشرح صفحة !important الترتيب الكامل.

متى تكون Inline CSS الأداة الصحيحة

تناسب الأنماط المضمّنة الحالات التي تكون فيها القيمة بيانات لا تصميمًا: تتغير من عنصر لآخر ويكتبها قالب أو JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

المظهر (الألوان، الارتفاع، نصف قطر الزوايا) موجود في ملف الأنماط. العرض وحده، الذي يختلف من شريط لآخر، مضمّن. يكتب JavaScript السمة نفسها عبر element.style:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

بعد النقر يصبح HTML الفقرة style="color: rgb(245, 158, 11); font-weight: bold;". أسماء الخصائص التي تحتوي على شرطة تصبح بصيغة camelCase في JavaScript (font-weight تصبح fontWeight).

غالبًا ما يكون متغير CSS الحل الوسط الأنظف: اضبط المتغير وحده مضمّنًا، style="--progress: 35%"، ودع ملف الأنماط يستخدمه. راجع متغيرات CSS.

أين تقصر Inline CSS

لا حالات ولا عناصر زائفة. لا يمكنك كتابة :hover أو :focus أو ::before في السمة style.
لا استعلامات وسائط. العرض المضمّن لا يمكن أن يتغير على الهاتف.
التكرار. عشرة أزرار بالنمط المضمّن نفسه تعني عشرة أماكن للتعديل.
صعوبة التجاوز. وحدها !important في ملف الأنماط تتغلب عليها.
سياسة أمان المحتوى (CSP). سياسة CSP صارمة من دون 'unsafe-inline' في style-src تحجب سمات style المكتوبة في HTML.

أخطاء شائعة

كتابة محدد أو أقواس داخل style. يُتجاهل style="p { color: red }". التصريحات وحدها مكانها هناك.
استخدام = بدل :. الصواب color: red، لا color=red.
تداخل علامات التنصيص المزدوجة. style="font-family: "Arial"" ينهي السمة مبكرًا. استخدم علامات مفردة في الداخل.
نسيان الوحدات. يُتجاهل style="width: 200"؛ اكتب 200px. الطول 0 هو الوحيد الذي يمكن حذف وحدته.
تنسيق موقع كامل بأنماط مضمّنة. انقل الأنماط المتكررة إلى فئة في ملف الأنماط، واترك الأنماط المضمّنة للقيم الخاصة بكل عنصر.

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

ما هي Inline CSS؟

Inline CSS هي CSS مكتوبة في السمة style للعنصر، مثل <p style="color: red;">. تنطبق التصريحات على ذلك العنصر وحده، ومن دون أي محدد.

ما الطرق الثلاث لإضافة CSS إلى HTML؟

المضمّنة (inline) عبر السمة style على العنصر؛ والداخلية (internal) عبر عنصر <style> في الصفحة؛ والخارجية (external) عبر ملف .css منفصل يُربط بـ <link rel="stylesheet" href="styles.css"> داخل <head>. الملفات الخارجية هي الخيار المعتاد لموقع كامل.

هل تتغلب Inline CSS على CSS الخارجية؟

نعم، في معظم الحالات. التصريح في السمة style يتغلب على أي محدد في ملف الأنماط مهما كانت خصوصيته. الطريقة الوحيدة كي يفوز ملف الأنماط هي !important، و!important المضمّنة تتغلب على ذلك أيضًا.

هل استخدام Inline CSS ممارسة سيئة؟

لتنسيق موقع كامل، نعم: تكرر نفسها، ولا تدعم :hover ولا استعلامات الوسائط، ويصعب تجاوزها. لكنها مناسبة للقيم الفردية التي يضعها JavaScript أو قالب، مثل عرض شريط التقدم أو لون يختاره المستخدم.

هل يمكن استخدام hover في Inline CSS؟

لا. السمة style تقبل التصريحات فقط، فلا يمكن كتابة الفئات الزائفة مثل :hover ولا العناصر الزائفة مثل ::before ولا قواعد @media فيها. ضعها في عنصر <style> أو في ملف أنماط.

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