❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSالتعليقات

  • مفهوم التعليقات
  • إضافة تعليق في CSS
  • الفرق بين تعليقات HTML و تعليقات CSS

مفهوم التعليقات

التعليق ( Comment ) عبارة عن نص يوضع في الكود كملاحظة تساعدك في الشرح أو لتذكر سبب كتابة الكود في حال أردت مستقبلاً مراجعته و التعديل عليه.

إذاً التعليق لا يظهر في الصفحة أمام المستخدم بل يظهر فقط أمام من يطلع على الكود.

إضافة تعليق في CSS

التعليق في CSS يوضع بداخل /* ... */ و يمكنك كتابته على سطر واحد أو على عدة أسطر.


في المثال التالي قمنا بوضع تعليق على كود CSS يـتألف من سطر واحد.

المثال الأول

/* أي فقرة موضوعة في الصفحة ستظهر بلون أحمر */
p {
color: red;
}
/* أي فقرة موضوعة في الصفحة ستظهر بلون أحمر */ p { color: red; }
جرب الكود

في المثال التالي قمنا أيضاً بوضع تعليق على كود CSS يـتألف من سطر واحد.

المثال الثاني

p {
color: red; /* هذه الخاصية تجعل لون النص أحمر */
}
p { color: red; /* هذه الخاصية تجعل لون النص أحمر */ }
جرب الكود

في المثال التالي قمنا أيضاً بوضع تعليق على كود CSS يـتألف من عدة أسطر.

المثال الثالث

/* أي فقرة موضوعة في
الصفحة ستظهر بلون أحمر */
p {
color: red;
}
/* أي فقرة موضوعة في الصفحة ستظهر بلون أحمر */ p { color: red; }
جرب الكود

  • إذا كان كود الـ CSS موضوع في ملف .css فيمكنك كتابة التعليقات فيه في أي مكان تريده.
  • إذا كان كود الـ CSS موضوع في صفحة HTML بداخل الوسم <style> فهنا يجب أن تكتب التعليق ضمن هذا الوسم و إلا سيتم عرض التعليق كنص عادي في الصفحة.

الفرق بين تعليقات HTML و تعليقات CSS

بدايةً فكرة التعليقات في كلا اللغتين هي نفسها و في الحالتين التعليقات تظهر أمام من يطلع على كود الصفحة و ليس أمام الشخص العادي.

الإختلاف بينهما هو فقط بالمكان الذي يمكنك فيه استخدام كل نوع.

تعليقات HTML نضعها بداخل الرمز <!-- --> في أي مكان في الصفحة و لكن يجب عدم وضعها بداخل الوسم <style> لأن هذا الوسم مخصص لأن نضع فيه كود بلغة CSS و بالتالي فإنك إن وضعت فيه كود بلغة أخرى فإن المتصفح لن يفهم ما هي الأوامر الموضوعة بعده و بالتالي فإن كود التصميم لن يعمل.


في المثال التالي قمنا بوضع تعليق بلغة HTML و تعليق بلغة CSS في ذات الصفحة.

مثال

<!-- html هنا يمكنك وضع التعليقات بأسلوب -->
<style>
p {
color: red; /* css هنا يمكنك وضع التعليقات بأسلوب */
}
</style>
<!-- html هنا يمكنك وضع التعليقات بأسلوب --> <style> p { color: red; /* css هنا يمكنك وضع التعليقات بأسلوب */ } </style>
جرب الكود
الدرس التالي❯ ❮الدرس السابق