بنية CSS

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 2 من 76.

في CSS، يشير بناء الجملة (syntax) إلى مجموعة القواعد التي تحدد كيفية كتابة كود CSS. يعد فهم بناء جملة CSS أمراً ضرورياً لإنشاء أوراق أنماط منظمة بشكل جيد وفعالة. تتكون قاعدة CSS الأساسية من محدد (selector) و كتلة إعلان (declaration block).

إليك تحليل بسيط:

المحدد (Selector): يحدد عنصر HTML الذي تريد تنسيقه (على سبيل المثال p، div، img).
كتلة التصريح (Declaration Block): تحتوي على تصريح واحد أو أكثر محاطة بأقواس متعرجة {}.

الإعلان: يتكون من خاصية وقيمة، مفصولين بنقطتين رأسيتين : (على سبيل المثال color:green;). يجب إنهاء كل إعلان بفاصلة منقوطة (;).

الخاصية: سمة النمط التي تريد تغييرها (على سبيل المثال، color، font-size).
القيمة: القيمة التي تريد تعيينها للخاصية (على سبيل المثال، blue، 16px).

على سبيل المثال:

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

في هذا المثال، p هو المحدد، ويستهدف جميع عناصر الفقرة. تحتوي كتلة الإعلان على إعلانين: أحدهما يحدد لون النص إلى اللون الأزرق والآخر يحدد حجم الخط إلى 16 بكسل.

التحدي

سهل

لقد تم تزويدك بكود HTML يحتوي على عنصر فقرة وقاعدة CSS لتلك الفقرة. قم بتعديل قاعدة CSS لتغيير لون النص إلى red.

ورقة مرجعية

تتكون صيغة CSS من محدد (selector) و كتلة إعلان (declaration block):

المحدد (Selector): يحدد عنصر HTML المراد تنسيقه (على سبيل المثال p، div، img)
كتلة الإعلان (Declaration Block): تحتوي على الإعلانات المحصورة بين أقواس متعرجة {}
الإعلان (Declaration): يتكون من خاصية وقيمة يفصل بينهما نقطتان رأسيتان :، وينتهي بفاصلة منقوطة ;
الخاصية (Property): سمة التنسيق المراد تغييرها (على سبيل المثال، color، font-size)
القيمة (Value): قيمة الخاصية (على سبيل المثال، blue، 16px)

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

جرّب بنفسك

<html>
  <head>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس Styling with CSS

1مقدمة

ما هي CSS؟بنية CSSتعليقات CSS وسم Head وسم Title

4أساسيات النصوص

لون النص عائلة الخط حجم الخط سمك الخط محاذاة النص زخرفة النص تحدي المراجعة رقم 1 تحدي المراجعة رقم 2

7نموذج الصندوق - الجزء الأول

ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاع تحدي المراجعة

10نموذج تسجيل الدخول

جسم الصفحة حاوية النموذج

حقل إدخال

زر

13صفحة ويب تونغا

قائمة التنقل رأس الترحيب

2إضافة CSS

CSS سطري CSS داخلي CSS خارجي تحدي التنسيق الأساسي

5الألوان والخلفيات

لون الخلفية ألوان HEX ألوان RGB الشفافية باستخدام RGBA تحدي المراجعة #1

8نموذج الصندوق (Box Model) - الجزء الثاني

تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعة

11تقنيات التخطيط

العناصر من نوع Block مقابل Inline أساسيات تحديد المواقع (Positioning)تحديد الموقع النسبي (Relative)تحديد الموقع المطلق (Absolute)تحديد الموقع الثابت (Fixed)أساسيات Z-Index تحدي المراجعة

14التحديات النهائية

ترتيب العناصر قائمة الأفلام بطاقة دعوة زفاف إشعار عائم