مقدمة في CSS: تنسيق صفحات الويب

الدرس 1 من 19 · CSS

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

ما هي CSS؟

CSS اختصار لـ Cascading Style Sheets، أي «أوراق الأنماط المتتالية». وهي لغة تخبر المتصفح كيف يبدو كل عنصر في الصفحة: لونه، وحجم خطه، والمسافات حوله، ومكانه.

تذكّر تقسيم الأدوار في صفحة الويب:

HTML تقول: «هذا عنوان، وهذه فقرة».
CSS تقول: «العنوان لونه أزرق وحجمه كبير، والفقرة رمادية وخطها مريح».
JavaScript تقول: «عندما يضغط المستخدم الزر، افعل كذا».

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

شكل قاعدة CSS

CSS تتكون من قواعد (Rules). كل قاعدة تقول: «اختر هذه العناصر، وطبّق عليها هذه التنسيقات»:

h1 {
  color: blue;
  font-size: 32px;
}

مكونات القاعدة:

المحدد (Selector) h1: يحدد العناصر التي ستتنسق. هنا: كل العناوين <h1>.
الأقواس المعقوفة { }: بداخلها كل التنسيقات.
الخاصية (Property) color: ما الذي نريد تغييره، هنا اللون.
القيمة (Value) blue: القيمة الجديدة، هنا الأزرق.
كل سطر ينتهي بفاصلة منقوطة ;.

تخيّل القاعدة مثل تعليمات لعامل الدهان: «في كل غرف النوم (المحدد)، اجعل الجدران (الخاصية) زرقاء (القيمة)».

أشهر الخصائص للبداية

الخاصية	وظيفتها	مثال
`color`	لون النص	`color: darkblue;`
`background-color`	لون الخلفية	`background-color: #f0f0ff;`
`font-size`	حجم الخط	`font-size: 18px;`
`text-align`	محاذاة النص	`text-align: center;`
`padding`	مسافة داخلية حول المحتوى	`padding: 12px;`
`border`	إطار حول العنصر	`border: 2px solid gray;`

الألوان يمكن كتابتها بالاسم الإنجليزي مثل red، أو بالكود الست عشري مثل #5b5bf0 الذي يتيح لك ملايين الألوان.

اختيار العناصر بالكلاس

ماذا لو أردت تنسيق فقرة واحدة فقط وليس كل الفقرات؟ أعطها كلاس (Class) في HTML، ثم اختره في CSS بنقطة قبل اسمه:

<p>فقرة عادية</p>
<p class="note">فقرة مميزة</p>

.note {
  background-color: #fff4e0;
  padding: 10px;
}

الآن الفقرة التي تحمل الكلاس note فقط ستأخذ الخلفية والمسافة، وتبقى الأخرى عادية. والكلاس مثل شارة تعلّقها على العناصر التي تريد تمييزها.

لماذا نفصل الشكل عن المحتوى؟

تخيّل أن موقعك فيه 50 صفحة، وكل صفحة فيها عناوين زرقاء. ثم قررت أن تجعل العناوين خضراء. لو كان اللون مكتوباً داخل كل صفحة HTML، ستعدّل 50 ملفاً! أما مع CSS، فتعدّل سطراً واحداً في ملف التنسيق، فتتغير العناوين في كل الصفحات فوراً.

وهذا يشبه ملابس الممثل في المسرح: الممثل (المحتوى) نفسه، لكن يمكنك أن تغيّر ملابسه (الشكل) لكل عرض دون أن تغيّر الممثل. بل إن نفس صفحة HTML يمكن أن تبدو مختلفة تماماً على الكمبيوتر والهاتف والطابعة، بتنسيقات CSS مختلفة لكل منها.

أين نكتب CSS؟

أبسط طريقة للبداية: داخل الوسم <style> في <head> صفحة HTML:

<head>
  <meta charset="UTF-8">
  <style>
    h1 { color: blue; }
  </style>
</head>

وفي الدرس القادم ستتعرف على الطرق الثلاث لإضافة CSS، ومنها الطريقة الاحترافية: ملف خارجي بامتداد .css.

جرّب بنفسك

هذا تنسيق لعنوان وفقرتين. غيّر الألوان والأحجام، وجرّب text-align: center; على العنوان، وأضف border-radius: 12px; للفقرة المميزة:

جرّب بنفسكCSS

أو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

نسيان الفاصلة المنقوطة: إذا نسيتها بين خاصيتين، قد يتجاهل المتصفح الخاصيتين معاً.
نسيان النقطة قبل الكلاس: note { } تبحث عن وسم اسمه note، والصحيح .note { }.
كتابة الخاصية خطأ: colour بالإنجليزية البريطانية لا تعمل. الصحيح color. المتصفح يتجاهل الخصائص التي لا يعرفها بصمت، فراجع الكتابة جيداً.

اختبر نفسك

سؤال

في القاعدة p { color: red; }، ما هو المحدد؟

سؤال

كيف تختار في CSS العناصر التي تحمل class='card'؟

الخلاصة

CSS لغة تحدد شكل صفحة الويب: الألوان والخطوط والمسافات والمكان.
القاعدة تتكون من محدد، وبداخل { } خصائص وقيم تنتهي بـ ;.
الكلاس يُعطى في HTML بـ class="..." ويُختار في CSS بنقطة.
أبسط مكان لكتابة CSS هو الوسم <style> داخل <head>.
فكرة CSS الأساسية: فصل المحتوى (HTML) عن الشكل (CSS).

عن مدرسة البرمجة

مدرسة البرمجة موقع عربي مجاني لتعليم البرمجة من الصفر، بدروس منظمة وأمثلة تجربها بنفسك. هدفنا أن يتعلم كل عربي البرمجة بلغته، خطوة بخطوة.