CSS: فهم بنية القاعدة في CSS

تُعتبر CSS (أوراق الأنماط المتتالية) لغة أساسية لتنسيق صفحات الويب، حيث تقوم بتحديد شكل ومظهر المحتوى المكتوب بلغة HTML. لفهم كيفية عمل CSS، يجب علينا فهم بنية القاعدة في CSS، وهي الأساس الذي يُبنى عليه كيفية تطبيق الأنماط على العناصر المختلفة في صفحة الويب. تتكون القاعدة في CSS من ثلاثة أجزاء رئيسية: المُحدد (Selector)، والخصائص (Properties)، والقيم (Values).

المُحددات في CSS

المُحدد هو الجزء في قاعدة CSS الذي يحدد العناصر التي سيتم تطبيق الأنماط عليها. يمكن أن يكون المُحدد عبارة عن اسم وسم HTML، أو صنف (class)، أو مُعرف (ID)، أو حتى مجموعة من العناصر وفقاً لعلاقاتها الهيكلية في DOM. على سبيل المثال، لتطبيق نمط على جميع الفقرات في صفحة ما، نستخدم المُحدد p. يمكن أيضاً استخدام المُحددات المعقدة لتحديد عناصر معينة بدقة أكبر.

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

الخصائص والقيم في CSS

الخصائص هي الميزات أو الأنماط التي نريد تطبيقها على العناصر، مثل اللون، والخط، والحجم، والتباعد، وغيرها. لكل خاصية قيمة أو مجموعة من القيم التي تحدد كيفية ظهور العنصر. على سبيل المثال، الخاصية color تحدد لون النص، بينما تحدد الخاصية font-size حجم الخط. يتم فصل الخصائص والقيم في قاعدة CSS بالنقطتين (:)، وتنتهي كل قاعدة بفاصلة منقوطة (;).

.example-class {
        background-color: yellow;
        padding: 10px;
        border: 1px solid black;
    }

تُعتبر بنية القاعدة في CSS جزءًا مهمًا لفهم كيفية تصميم وتنسيق صفحات الويب بفعالية. باستخدام المُحددات المناسبة وتطبيق الخصائص والقيم بشكل صحيح، يمكن للمصممين خلق مواقع ويب جذابة ومتناسقة بسهولة.