HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS

تعتبر تقنيات HTML و CSS من أهم الأساسيات التي يجب على كل مطور ويب أو هاوٍ في مجال تصميم المواقع الإلكترونية أن يلم بها، إذ تمثل هذه اللغات حجر الأساس لبناء وتصميم صفحات الويب الحديثة. في هذا المقال، سوف نقدم شرحاً تفصيلياً وموسعاً عن CSS (Cascading Style Sheets) وكيفية استخدامها لتنظيم وتنسيق محتوى صفحات HTML بأسلوب مرن واحترافي. سنتناول المفاهيم الأساسية، القواعد، الخصائص، الطرق المختلفة لتضمين CSS داخل صفحات الويب، إضافة إلى أمثلة تطبيقية تساعد على ترسيخ الفهم.

تعريف HTML و CSS

ما هي HTML؟

لغة HTML (HyperText Markup Language) هي اللغة التي تُستخدم لإنشاء الهيكل الأساسي لصفحات الويب. من خلالها يتم تحديد عناصر الصفحة مثل العناوين، الفقرات، الصور، الروابط، الجداول، والقوائم. تعتبر HTML لغة توصيفية وليست لغة برمجة، أي أنها تحدد كيف يتم عرض المحتوى وليس كيفية عمله.

ما هي CSS؟

أما CSS فهي لغة تُستخدم لوصف شكل ومظهر عناصر HTML، مثل الألوان، الخطوط، الهوامش، التباعد، تخطيط الصفحة، والحركات. بمعنى آخر، هي لغة تنسيق تصمم طريقة عرض المحتوى الذي تم إنشاؤه بـ HTML، بحيث يمكن التحكم في مظهر وتصميم الموقع بشكل دقيق ومنظم بعيداً عن التكرار والتداخل في كود HTML نفسه.

أهمية CSS في تصميم صفحات الويب

تساهم CSS في:

• فصل المحتوى عن التصميم: بحيث يبقى كود HTML نظيفاً خالياً من أوامر التنسيق، مما يسهل صيانة وتعديل المحتوى.

• تحسين تجربة المستخدم: عبر تصميم واجهات جذابة ومتجاوبة مع مختلف الشاشات (مثل الهواتف الذكية والأجهزة اللوحية).

• تسريع تحميل الصفحات: عبر استخدام ملفات CSS خارجية يمكن تحميلها مرة واحدة وتطبيقها على عدة صفحات.

• توفير إمكانية إعادة الاستخدام: حيث يمكن تعريف تنسيقات متكررة وتطبيقها على العديد من العناصر دون الحاجة إلى كتابة الكود مراراً.

• تسهيل التحكم في التنسيق: مع إمكانيات واسعة مثل التدرجات اللونية، الظلال، التحولات، والرسوم المتحركة.

أساسيات CSS

قواعد CSS (CSS Syntax)

تتكون قاعدة CSS من ثلاثة عناصر رئيسية:

1. المحدد (Selector): هو العنصر أو العناصر التي نريد تطبيق التنسيق عليها في صفحة HTML.

2. الخاصية (Property): الخاصية التي نريد تغييرها مثل اللون، الخط، الحجم.

3. القيمة (Value): القيمة التي نحددها للخاصية.

الشكل العام للقاعدة هو:

css
CopyEdit
selector {
  property: value;
}

مثال عملي:

css
CopyEdit
h1 {
  color: blue;
  font-size: 24px;
}

هذا المثال يقوم بتغيير لون كل عناصر العنوان من نوع

إلى الأزرق، ويضبط حجم الخط على 24 بكسل.

---

أنواع محددات CSS

المحددات هي طريقة لتحديد العناصر التي سيتم تنسيقها، وهناك عدة أنواع منها:

• محددات العنصر (Type Selectors): تستهدف جميع العناصر من نوع معين مثل p أو div.

• محددات المعرف (ID Selectors): تستهدف عنصر محدد يملك خاصية id معينة، وتكتب باستخدام رمز # متبوعاً بالمعرف. مثال: #header.

• محددات الفئة (Class Selectors): تستهدف مجموعة من العناصر التي تشترك بنفس الفئة، وتكتب باستخدام نقطة . متبوعة باسم الفئة. مثال: .menu.

• محددات السلسلة (Descendant Selectors): تستهدف عناصر داخل عناصر أخرى. مثال: div p لتنسيق كل الفقرات داخل عناصر div.

• محددات السمات (Attribute Selectors): تستهدف العناصر التي تحمل خاصية معينة أو قيم محددة. مثال: input[type="text"].

طرق تضمين CSS في صفحات HTML

هناك ثلاث طرق رئيسية لاستخدام CSS داخل صفحات HTML:

1. التضمين الداخلي (Inline CSS): باستخدام سمة style داخل وسم HTML نفسه.

html
CopyEdit
<p style="color: red;">نص باللون الأحمرp>

تُستخدم هذه الطريقة بشكل محدود لأنها تقلل من قابلية إعادة الاستخدام.

2. التضمين ضمن وسم

   Facebook