Theme
Primary Color
أكاديمية الزيرو

الدرس 12

التعليقات في CSS وتطبيق عملي

معنى أسماء العناصر والمصطلحات

المعنىStand ForName
تعليق لشرح الكود ومش بيتطبق كتنسيقComment

التعليق بيساعدك توضح جزء من الكود وانت بتراجعه وممكن تستخدمه لإيقاف سطر تنسيق وقت التجربة من غير ما تمسحه

حط الفقرة دي داخل body واربط ملف css/master.css بالصفحة

<p class="product-description">A Practical Guide To CSS</p>

كتابة تعليق

/* Product Description */
.product-description {
  color: blue;
  font-size: 24px;
}

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

استخدمه لسبب مفيد زي توضيح جزء من الملف ومتنساش علامة النهاية علشان متخليش باقي أكواد التنسيق تتحول لتعليق

إيقاف سطر تنسيق وقت التجربة

.product-description {
  color: blue;
  /* font-size: 24px; */
}

حجم الخط المكتوب اتوقف لأن سطر التنسيق بقى داخل تعليق واللون لسه شغال

تطبيق صغير

داخل body حط العنوان والفقرتين دول

<h1 class="page-title">CSS Learning Journal</h1>
<p class="intro-text">My First Styled Page</p>
<p class="intro-text">I Can Link And Edit A Stylesheet</p>

المطلوب تخلي العنوان blue وبحجم 36px والفقرتين green وبحجم 20px من الملف الخارجي جرب بنفسك قبل الحل

حل مقترح داخل master.css

/* Page Heading */
.page-title {
  color: blue;
  font-size: 36px;
}

/* Introduction Paragraphs */
.intro-text {
  color: green;
  font-size: 20px;
}

راجع شغلك

  • ملف CSS مرتبط من داخل head
  • كل سطر تنسيق مكتوب بصيغته الصحيحة
  • الفقرتان أخدوا نفس التنسيق من كود تنسيق واحد
  • تقدر تغير قيمة وتشوف النتيجة بعد الحفظ والتحديث
آخر تعديل للدرس: