CSS / التعليقات (Comments)

الناشر :كودا فوكس -

CSS / التعليقات

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

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

CSS / التعليقات (Comments)


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

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

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

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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
		<style>
/* أي فقرة موضوعة في الصفحة ستظهر بلون أحمر */
p {
    color: red;
}
		</style>
	</head>
	<body>
		<p>Comments can be added wherever you want.</p>
	</body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
		<style>
p {
    color: red; /* هذه الخاصية تجعل لون النص أحمر */
}
		</style>
	</head>
	<body>
		<p>Comments can be added beside properties.</p>
	</body>
</html>

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

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

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
		<style>
/* أي فقرة موضوعة في
الصفحة ستظهر بلون أحمر */
p {
    color: red;
}
		</style>
	</head>
	<body>
		<p>Comments can be written on multiple lines.</p>
	</body>
</html>

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

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

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
		<!-- html هنا يمكنك وضع التعليقات بأسلوب -->
		<style>
p {
    color: red; /* css هنا يمكنك وضع التعليقات بأسلوب */
}
		</style>
	</head>
	<body>
		<p>You can add HTML and CSS comments in the same page.</p>
	</body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال