CSS: تنسيق صفحات الويب باحترافية - الدرس #13

العلاقة بين HTML وCSS

من المهم أن نفهم الفرق بين الدورين:

• HTML: يُستخدم لإنشاء المحتوى (مثل العناوين، الفقرات، الصور…).
• CSS: يُستخدم لتنسيق هذا المحتوى (مثل الألوان، الخطوط، المسافات، المحاذاة…).

بمعنى آخر، HTML هو "ما يُقال"، وCSS هو "كيف يُقال".

ربط CSS بملف HTML

عادةً ما يتم ربط ملفات CSS الخارجية بملف HTML باستخدام الوسم التالي:

هذا السطر يُخبر المتصفح بتحميل ملف التنسيق "index.css" وتطبيقه على الصفحة.

ملاحظة: في بعض الدورات التعليمية، مثل الدورة التي تشير إليها، يتم ربط ملفات CSS تلقائيًا، لذلك لا حاجة لإضافة هذا السطر يدويًا.

استخدام وسم <style>

في سياق الدروس التعليمية، غالبًا ما يتم استخدام وسم <style> داخل ملف HTML لكتابة CSS مباشرة، خاصةً في الأمثلة القصيرة:

هذا مفيد لتجربة التعليمات البرمجية بسرعة دون الحاجة إلى ملفات خارجية.

بنية CSS: كيف تُكتب التعليمات؟

يتكون كود CSS من جزأين رئيسيين:

1. المُحدد (Selector): يُستخدم لتحديد العنصر الذي سيتم تطبيق التنسيق عليه، مثل h1 أو .class أو #id.
2. مجموعة التصريحات (Declarations): وهي القواعد التي سيتم تطبيقها، وتكتب بين {}.

مثال:

كل تصريح (Declaration) يتكون من:

• خاصية (Property): مثل color.
• قيمة (Value): مثل red.

تعليقات CSS

يمكنك كتابة تعليقات داخل CSS باستخدام الصيغة التالية:

هذه التعليقات لا تُعرض في المتصفح وتُستخدم لشرح الكود أو تنظيمه.

اختصارات Emmet وتعليق الأسطر

في بيئات التحرير الحديثة (مثل VS Code)، يمكنك استخدام اختصار Ctrl + / (أو Cmd + / على أجهزة Mac) لتعليق سطر أو أكثر من التعليمات البرمجية بسرعة، سواء في HTML أو CSS. هذه الميزة تُسهّل تجربة التطوير وتُسرّع العمل.

خلاصة

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