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

Q: كيف أكتب تعليقًا في CSS؟

أحط النص بـ / و/: / This is a comment /. الصيغة نفسها تعمل لسطر واحد أو لعدة أسطر، في أي مكان يُسمح فيه بمسافة بيضاء داخل ملف الأنماط.

Q: هل يمكن استخدام // للتعليق في CSS؟

لا. لا يوجد في CSS تعليق سطر واحد. تُقرأ // كجزء من المحدد أو التصريح التالي، فتجعله غير صالح، فيُسقط المتصفح القاعدة أو التصريح بالكامل. Sass وLess والمعالجات المشابهة تقبل //، لكن CSS العادية لا تقبلها.

Q: هل يمكن تداخل التعليقات في CSS؟

لا. ينتهي التعليق عند أول /، فالتعليق / a / b / c / ينتهي بعد b، ويصبح الباقي c / نصًا عشوائيًا يُفسد القاعدة التالية.

Q: ما اختصار التعليق في CSS؟

في معظم محررات الشيفرة، ومنها VS Code، يحيط Ctrl + / في Windows وLinux أو Cmd + / في macOS الأسطر المحددة بـ / /، والضغط مرة أخرى يزيل التعليق.

التعليقات في CSS: صيغة التعليق وكيف تكتبه

في CSS صيغة تعليق واحدة، /* ... */، لسطر واحد أو لعدة أسطر. تعلّم أين يمكن وضع التعليقات، وكيف تعطّل قاعدة بالتعليق، ولماذا تُفسد // والتعليقات المتداخلة القاعدة التالية بصمت.

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

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

نُشر في Sep 24, 2026

كيف تكتب تعليقًا في CSS

يبدأ التعليق في CSS بـ /* وينتهي بـ */. يتجاهل المتصفح كل ما بينهما، سواء امتد على سطر واحد أو عشرين سطرًا.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
  <style>
    /* Single-line comment */
    .note {
      background: #e5e7eb; /* after a declaration */
      padding: 8px 12px;
    }

    /*
      Multi-line comment:
      the same syntax, spread over several lines.
    */
    .note strong {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <p class="note">The comments change <strong>nothing</strong> on screen.</p>
</body>
</html>

هذه هي الصيغة الوحيدة. لا يوجد في CSS تعليق سطر واحد منفصل.

أين يمكن وضع التعليقات

يمكن أن يوجد التعليق في أي مكان تُسمح فيه المسافة البيضاء: بين القواعد، وبين التصريحات، وبعد القيمة، وداخل قائمة المحددات. ويعمل بالطريقة نفسها في ملف .css وفي عنصر <style> وفي السمة style.

/* Buttons */
.btn,          /* default */
.btn-primary { /* variant */
  padding: 8px 14px; /* 8px top and bottom, 14px sides */
}

<p style="color: #16a34a; /* inline comments work too */">Hello</p>

تعليقات HTML، أي ، مخصصة للوسوم لا لـ CSS. الصيغتان مشروحتان جنبًا إلى جنب في صفحة التعليقات في HTML.

تعطيل الشيفرة بالتعليق

الاستخدام اليومي للتعليقات هو إيقاف تصريح لترى ما يفعله، من دون حذفه. أحطه بـ /* */:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .box {
      background: #2563eb;
      color: white;
      padding: 16px;
      /* border: 6px solid #f59e0b; */
      /* border-radius: 12px; */
    }
  </style>
</head>
<body>
  <div class="box">Border and radius are commented out.</div>
</body>
</html>

احذف /* و*/ حول سطر الحد وسيظهر الحد الكهرماني. تعطيل قاعدة كاملة يعمل بالطريقة نفسها: ضع /* قبل المحدد و*/ بعد القوس المعقوص الختامي.

معظم المحررات تفعل هذا نيابةً عنك: حدد الأسطر واضغط Ctrl + / (Cmd + / في macOS).

لماذا تُفسد // شيفرة CSS

تبدو // كتعليق لأنها كذلك في JavaScript وSass وLess. أما في CSS فهي مجرد حرفين يصبحان جزءًا مما يليهما. عندها يرى المتصفح محددًا غير صالح فيُسقط القاعدة التالية بأكملها، من دون أي رسالة خطأ.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Double slash</title>
  <style>
    p { padding: 6px 10px; }

    // this is NOT a comment
    .one { background: #16a34a; color: white; }

    .two { background: #2563eb; color: white; }
  </style>
</head>
<body>
  <p class="one">.one has no background: its rule was dropped.</p>
  <p class="two">.two is fine.</p>
</body>
</html>

قرأ المتصفح // this is NOT a comment .one كمحدد واحد، وهو غير صالح، فأُلقيت القاعدة .one بالكامل. غيّر السطر إلى /* this is a comment */ وستعود الخلفية الخضراء.

التعليقات لا تتداخل

ينتهي التعليق عند أول */. إحاطة شيفرة تحتوي أصلًا على تعليق تنهي تعليقك الخارجي مبكرًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested</title>
  <style>
    p { padding: 6px 10px; }

    /* outer start
    .old { color: red; } /* inner comment */
    outer end */

    .next { background: #f59e0b; }
    .last { background: #e5e7eb; }
  </style>
</head>
<body>
  <p class="next">.next is broken by the leftover "outer end */".</p>
  <p class="last">.last still works.</p>
</body>
</html>

لتعطيل كتلة تحتوي على تعليقات، احذف التعليقات الداخلية أو اختصرها أولًا.

تنظيم ملف الأنماط بالتعليقات

ملفات الأنماط الطويلة تصبح أسهل قراءةً مع عناوين للأقسام. عرف شائع:

/* ==========================================
   Layout
   ========================================== */

.page { max-width: 960px; margin: 0 auto; }

/* ------------------------------------------
   Header
   ------------------------------------------ */

.header { padding: 16px; }

/*! License: MIT (many minifiers keep comments that start with "!") */

تُرسل التعليقات إلى كل زائر كجزء من الملف وتظهر في عرض المصدر، لذلك لا تضع فيها أبدًا كلمات مرور أو عناوين URL داخلية أو ملاحظات لا تريد نشرها.

أخطاء شائعة

استخدام //. تحذف القاعدة التالية بصمت. استخدم /* */.
تداخل التعليقات. أول */ ينهي التعليق، والباقي يُفسد القاعدة التالية.
نسيان */ الختامية. يصبح كل ما بعد /* حتى نهاية ملف الأنماط تعليقًا.
استخدام  داخل CSS. هذه صيغة تعليق HTML ولا تعطّل CSS.
ترك أسرار في التعليقات. تصل إلى المتصفح مع ملف الأنماط.

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

كيف أكتب تعليقًا في CSS؟

أحط النص بـ /* و*/: /* This is a comment */. الصيغة نفسها تعمل لسطر واحد أو لعدة أسطر، في أي مكان يُسمح فيه بمسافة بيضاء داخل ملف الأنماط.

هل يمكن استخدام // للتعليق في CSS؟

لا. لا يوجد في CSS تعليق سطر واحد. تُقرأ // كجزء من المحدد أو التصريح التالي، فتجعله غير صالح، فيُسقط المتصفح القاعدة أو التصريح بالكامل. Sass وLess والمعالجات المشابهة تقبل //، لكن CSS العادية لا تقبلها.

هل يمكن تداخل التعليقات في CSS؟

لا. ينتهي التعليق عند أول */، فالتعليق /* a /* b */ c */ ينتهي بعد b، ويصبح الباقي c */ نصًا عشوائيًا يُفسد القاعدة التالية.

ما اختصار التعليق في CSS؟

في معظم محررات الشيفرة، ومنها VS Code، يحيط Ctrl + / في Windows وLinux أو Cmd + / في macOS الأسطر المحددة بـ /* */، والضغط مرة أخرى يزيل التعليق.

هل تؤثر تعليقات CSS على الأداء؟

فقط بإضافة بايتات إلى الملف. يتجاهلها المتصفح أثناء التحليل. أدوات البناء تضغط ملفات الأنماط وتزيل التعليقات؛ وكثير منها يُبقي التعليقات التي تبدأ بـ /*!، وهو العرف المتبع لإشعارات الترخيص.

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