🟦 المستوى الأول: أساسيات CSS

5. Properties & Values (الخصائص والقيم)

🔹 ما هي الخصائص (Properties)؟

• الخصائص هي “الأوامر” اللي بنستخدمها في CSS عشان نغيّر مظهر العناصر.

• كل خاصية لها قيمة (Value) بتحدد شكلها.

• مثال:

• هنا:

  • color = خاصية (property).

  • red = قيمة (value).

🔹 تركيب الكود مع الخصائص والقيم

📌 مثال:

h1 → العنصر اللي هيتأثر.

• color: blue; → خاصية اللون وقيمتها الأزرق.

• font-size: 30px; → خاصية حجم الخط وقيمتها 30 بكسل.

• text-align: center; → خاصية المحاذاة وقيمتها في المنتصف.

أهم الخصائص (Properties) الشائعة مع القيم (Values)

🖌️ 1- خصائص النصوص (Text Properties)

• color → لون النصوص.

  • مثال:

  • color: red; أو color: #ff0000;.

• font-size → حجم الخط.

  • مثال: font-size: 20px;.

• font-family → نوع الخط.

  • مثال: font-family: Arial, sans-serif;.

• font-weight → سمك الخط.

  • مثال: font-weight: bold; أو font-weight: 400;.

• text-align → محاذاة النصوص.

  • مثال: text-align: center; أو left أو right.

• text-decoration → تحت النص أو خط عليه.

  • مثال: text-decoration: underline;.

• line-height → المسافة بين الأسطر.

  • مثال: line-height: 1.5;.

🎨 2- خصائص الخلفيات (Background Properties)

• background-color → لون الخلفية.

  • مثال: background-color: yellow;.

• background-image → صورة كخلفية.

  • مثال: background-image: url(‘bg.jpg’);.

• background-repeat → تكرار الصورة.

  • مثال: background-repeat: no-repeat;.

• background-size → حجم الصورة.

  • مثال: background-size: cover;.

📦 3- خصائص الصندوق (Box Model Properties)

• width → عرض العنصر.

• height → ارتفاع العنصر.

• margin → مسافة خارجية حول العنصر.

• padding → مسافة داخلية بين النص وحدود العنصر.

• border → حدود العنصر.

  • مثال: border: 2px solid black;.

• border-radius → زوايا مستديرة.

  • مثال: border-radius: 10px;.

✨ 4- خصائص التأثيرات (Effects)

• box-shadow → ظل للصندوق.

  • مثال: box-shadow: 0px 4px 8px gray;.

• opacity → شفافية العنصر.

  • مثال: opacity: 0.5; (نصف شفاف).

✅ ملاحظات مهمة:

1. كل خاصية (Property) لازم تتبعها قيمة (Value).

2. لو كتبت قيمة غير صحيحة → المتصفح هيتجاهل السطر.

3. ممكن نكتب أكتر من خاصية لنفس العنصر داخل { }.

4. القيم ممكن تكون:

   • أرقام + وحدات (px, em, %, vh, vw).

   • كلمات مفتاحية (red, bold, center).

   • أكواد ألوان (#000000, rgb(0,0,0)).

📌 مثال تطبيقي يجمع خصائص مختلفة:

• صندوق عرضه 300px وارتفاعه 150px.

• خلفيته أزرق فاتح، ونصوصه أزرق غامق.

• النصوص في المنتصف وحجمها 20px.

• له حدود زرقاء مع زوايا مستديرة.

• padding داخلي 10px، margin خارجي 20px.