أساسيات CSS: تنسيق صفحات الويب الخاصة بك كمحترف

استكشف أساسيات CSS وتعلم كيفية إضافة النمط والتخطيط إلى صفحات HTML الخاصة بك، مما يجعلها جذابة بصريًا ومتجاوبة.

صورة توضيحية لأساسيات CSS تظهر شاشة كمبيوتر عليها كود CSS مع تأثيرات نيون زرقاء

ما هو CSS؟

CSS (Cascading Style Sheets) هي لغة تستخدم لوصف كيفية عرض عناصر HTML على الشاشة. إنها تسمح لك بتحديد الألوان والخطوط والتخطيط وغيرها من جوانب تصميم صفحات الويب.

لماذا نحتاج CSS؟

CSS يفصل التصميم عن المحتوى، مما يسمح بتحكم أفضل في مظهر الموقع. يمكنك استخدام ملف CSS واحد لتنسيق صفحات متعددة، مما يوفر الوقت ويجعل الصيانة أسهل.

الأساسيات: الانتقائيات والخصائص

تتكون قواعد CSS من انتقائي وكتلة إعلان. الانتقائي يحدد العنصر الذي تريد تنسيقه، والإعلان يحدد كيفية تنسيقه.

      
selector {
  property: value;
}

تطبيق الأنماط

هناك ثلاث طرق رئيسية لتطبيق CSS:

الأنماط الداخلية (باستخدام سمة style في عنصر HTML)
الأنماط المضمنة (باستخدام عنصر <style> في <head>)
الأنماط الخارجية (باستخدام ملف CSS منفصل)

الخصائص الأساسية

بعض الخصائص الأساسية التي يجب معرفتها:

color: لتعيين لون النص
background-color: لتعيين لون الخلفية
font-family: لتحديد الخط
font-size: لتعيين حجم الخط
margin: للتحكم في المساحة خارج العنصر
padding: للتحكم في المساحة داخل العنصر

التخطيط والموضع

CSS يوفر أدوات قوية للتحكم في تخطيط الصفحة:

display: لتحديد كيفية عرض العنصر (block، inline، flex، grid)
position: للتحكم في موضع العناصر
float: لوضع العناصر بجانب بعضها البعض
flexbox: نموذج تخطيط أحادي البعد
grid: نظام تخطيط ثنائي الأبعاد

التصميم المتجاوب

استخدم media queries لإنشاء تصاميم تتكيف مع أحجام الشاشات المختلفة:

      
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

الخلاصة

CSS هي أداة قوية لتحويل صفحات HTML البسيطة إلى تصاميم جذابة ومتجاوبة. مع الممارسة والتجربة، ستتمكن من إنشاء تخطيطات معقدة وتأثيرات مذهلة لمواقع الويب الخاصة بك.

استمر في التعلم وتطوير مهاراتك في تطوير المواقع الإلكترونية وتصميمها!