الدرس 10

فهم Selector و Property و Value في كود CSS

المعنى	Stand For	Name
محدد العناصر اللي كود التنسيق هيتطبق عليها		Selector
الخاصية اللي عاوز تغيرها		Property
القيمة الجديدة للخاصية		Value
الخاصية مع قيمتها		Declaration
مجموعة سطور التنسيق بين الأقواس		Declaration Block
وحدة قياس في CSS	Pixel	px

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

داخل body في index.html حط الفقرة التالية وخلي رابط ملف CSS موجود في head

<p>This Is Paragraph</p>

p {
  color: red;
  font-size: 40px;
}

ال p قبل القوس هي Selector ودة معناه العنصر اللي هنختاره علشان ننسقه وهنا اخترنا الفقرة النصية Paragraph
ال color هي Property أو الخاصية اللي هيتم التعامل معاها
ال red هي Value أو قيمة الخاصية
السطر الكامل color: red; هو Declaration أو سطر تنسيق
الأقواس بتحدد بداية ونهاية مجموعة سطور التنسيق الخاصة بال Selector

النقطتان الرأسيتان أو Colon : بتفصل بين اسم الخاصية والقيمة
الفاصلة المنقوطة أو Semicolon ; بتنهي سطر التنسيق وبتفصله عن اللي بعده
الأقواس المعقوفة أو Curly Braces {} بتجمع سطور التنسيق
الشرطة أو Hyphen - جزء من اسم الخاصية وبتفصل بين كلماته زي font-size و font-weight

اكتب كل سطر تنسيق لوحده علشان تقرأ الكود بسهولة واكتب الفاصلة المنقوطة بعد آخر سطر تنسيق كمان

وعند التطوير في المستقبل هتضغط الكود وكلهم هيبقوا على سطر واحد :)

p {
  color: blue;
  font-size: 24px;
}

النتيجة نص أزرق بحجم 24 بكسل CSS وال px مش لازم تطابق بكسل فعلي واحد في شاشة الجهاز

المثال التالي فيه خطأ متعمد بسبب غياب الفاصلة المنقوطة بعد red

p {
  color: red
  font-size: 40px;
}

المتصفح مش هيقرأ السطرين كسطرين تنسيق مستقلين بالشكل المقصود ارجع الفاصلة المنقوطة ثم احفظ وحدث الصفحة

ملحوظة

ال CSS مش بتخمن اسم الخاصية أو القيمة لو كتبت قيمة غير صالحة ممكن سطر التنسيق يتجاهل وتفضل النتيجة من كود تنسيق تاني أو من التنسيق الافتراضي

اكتب كود تنسيق يخلي الفقرات باللون green وبحجم 30px ثم اشرح لنفسك المحدد والخاصيتين والقيم

غير اللون فقط ولاحظ إن حجم الخط فضل زي ما هو لأن كل سطر تنسيق مسؤول عن خاصية مختلفة

آخر تعديل للدرس: 12/10/2026