📘 الفصل الأول: مقدمة عن CSS
🔹 ما هي CSS؟
CSS اختصار لعبارة Cascading Style Sheets، ومعناها "صفحات الأنماط المتتابعة".
وهي اللغة التي نستخدمها لتنسيق صفحات الويب — أي لجعل صفحة الـ HTML جميلة ومنظمة من حيث الألوان، والخطوط، والأحجام، والترتيب، وكل ما تراه بعينك في الموقع.
مثلاً:
صفحة HTML لوحدها مثل الهيكل العظمي،
لكن الـ CSS هي "اللبس والمكياج" اللي بيخلي الصفحة شكلها حلو ومتناسق
🔹 لماذا نستخدم CSS؟
CSS تُستخدم لعدة أسباب مهمة جدًا:
فصل التنسيق عن المحتوى:
بدل ما نحط كل التنسيقات داخل كود HTML، بنفصلها في ملف CSS مستقل.
سهولة التعديل:
لو أردت تغيير لون الخلفية أو حجم الخط في موقع كامل، يمكنك تغيير سطر واحد فقط في ملف CSS.
التحكم الكامل في المظهر:
مثل تحديد الألوان، الحواف، الأبعاد، الخطوط، الحركات، والمحاذاة.
تجعل الموقع متجاوبًا مع جميع الأجهزة:
سواء كمبيوتر أو هاتف أو تابلت، CSS تسمح لك بتصميم يناسب كل شاشة.
🔹 كيف تعمل CSS؟
CSS تعمل من خلال ربطها بعناصر HTML عن طريق ما يُسمّى Selectors (المحدّدات).
بكل بساطة، تقول للمتصفّح:
"عدّل شكل العنصر الفلاني في الصفحة بهذه الطريقة".
مثال بسيط 👇
p {
color: blue;
font-size: 18px;
}
الشرح:
p ← معناها: طبّق التنسيق على كل الفقرات <p> في الصفحة.
{ } ← ما بداخل الأقواس هو القواعد (Rules) الخاصة بالتنسيق.
color: blue; ← تجعل لون النص أزرق.
font-size: 18px; ← تجعل حجم الخط 18 بكسل.
🔹 مكوّنات قاعدة CSS
كل قاعدة CSS تتكوّن من:
المحدد (Selector): العنصر الذي نريد تنسيقه (مثل p, h1, div).
الخاصية (Property): الشيء الذي نريد تغييره (مثل اللون أو الحجم).
القيمة (Value): القيمة التي نعطيها للخاصية (مثل blue, 18px).
مثال آخر:
h1 {
color: red;
text-align: center;
}
هنا:
h1 هو المحدد.
color وtext-align هما الخاصيتان.
red وcenter هما القيمتان.
🔹 أنواع محددات (Selectors) في CSS
هنشرحهم بالتفصيل في فصل خاص، لكن خذ فكرة سريعة الآن:
محدد بالعناصر: p, h1, div …
محدد بالـ class: .اسم_الكلاس
محدد بالـ id: اسم_الآي_دي
محدد مركّب: يجمع أكثر من واحد معًا.
لا تتردد في التواصل معنا للمزيد من التفاصيل:
📱 واتساب: 07745368501
💬 تليكرام: @qimim_platform
4July 19, 2026 37
