كتاب تعلم لغة CSS شرح مبسط وشامل من الصفر للإحتراف ..
ما هي تقنية CSS ؟
CSS هي اختصار لي .Cascading Style Sheets
CSS هي لغة تصميم تحدد شكل وثيقة HTML ، فهي تهتم بالخطوط ، الألوان ، الهامش ، والعرض والارتفاع ، صورة خلفية الموقع ، وكيفية توزيع المساحات وأشياء أخرى كثيرة .
ما الفرق بين CSS و HTML ؟
تستخدم لوضع هيكلية ونظام منطقي للمحتويات ، أما CSS فهي تستخدم لإضافة تصميم لهذه المحتويات . حسناً ، قد يبدو هذا مربكا لكن أكمل القراءة وستفهم ما قرأته قريبا .
في الماضي القريب اخترع رجل اسمه تیم بيرنرز لي شبكة الويب ، في ذلك الوقت كانت HTML تستخدم فقط لإضافة هيكلية للنص ، الكاتب يمكنه أن يقوم بإضافة معنى للنص بأن يقول مثلا ” هذا عنوان ” أو ” هذه فقرة ” ويستخدم وسوم HTML مثل < p > . < h1 >
مع ازدياد شهرة شبكة الويب بدأ المصممون في البحث عن طرق لإضافة تصميم للوثائق ، ولتلبية رغباتهم قام مبرمجوا المتصفحات – نيتكسيب ومايكروسوفت – باختراع وسوم HTML جديدة مثل < font > الذي يختلف عن وسوم HTML الأصلية بأنه يهتم بالشكل لا بالهيكلية .
محتويات الكتاب
- ما هي تقنية CSS ؟
- ما الفرق بين CSS و HTML ؟
- كيف سيفيدني CSS ؟
- كيف تعمل تقنية CSS ؟
- القواعد الأساسية لكتابة CSS ؟
- تفعيل CSS قي صفحة HTML
- الألوان والخلفيات
- الخطوط
- النصوص
- الروابط
- المطابقة والتجميع للعناصر ID , Class
- تجميع العناصر بإستخدام div و span
- نموذج الصندوق
- الحاشية والحشو
- تفعيل خاصية PAdding
- أنواع الجداول
- الأرتفاع والعرض
- تعويم العناصر floats
- وضعية العناصر في CSS
- أمثلة CSS
- أكواد CSS
مؤلف الكتاب
مهندسة حنان حسن
صيغة الكتاب
لمن هذا الكتاب؟
- من تعلّم HTML ويريد التحكم في شكل الصفحة من ألوان وخطوط ومسافات.
- مبتدئ يريد فهم نموذج الصندوق (Box Model) وطريقة توزيع العناصر قبل استخدام أطر مثل Bootstrap.
- صاحب موقع ووردبريس يريد تعديل تصميم القالب بكود CSS مخصص.
ما الذي ينقص الكتاب في CSS الحديثة؟
يعتمد الكتاب في تخطيط الصفحات على Float والـ Position، وهي طريقة كانت شائعة قديمًا. أما اليوم فالتخطيط يتم أساسًا عبر Flexbox وCSS Grid المدعومين في كل المتصفحات الحديثة، ويستخدم Float الآن غالبًا لالتفاف النص حول الصور.
أضف كذلك إلى ما تتعلمه: Media Queries لتصميم الصفحات المتجاوبة مع الجوال، والمتغيرات --main-color في CSS. باقي محتوى الكتاب من محددات (Selectors) وألوان وخطوط ونموذج الصندوق والحشو والهوامش هو الأساس الذي تبنى عليه هذه التقنيات.
كيف تطبّق أثناء القراءة
- اكتب CSS في ملف خارجي مرتبط بصفحة HTML بدل التنسيق داخل الوسوم.
- استخدم أدوات المطور في المتصفح (F12) لتعديل الخصائص مباشرة ومشاهدة نموذج الصندوق لكل عنصر.
- طبّق فصول الكتاب على صفحة سيرة ذاتية شخصية، ثم أعد بناء تخطيطها مرة بـ Float ومرة بـ Flexbox لتلاحظ الفرق.
أسئلة شائعة
هل أتعلم CSS أم Bootstrap مباشرة؟
تعلم CSS أولًا، فالأطر مثل Bootstrap مبنية عليها، ولن تستطيع تعديلها أو حل مشكلاتها دون فهم الأساس.
ما الفرق بين ID وClass؟
الـ ID يستخدم لعنصر واحد فريد في الصفحة، أما الـ Class فيمكن تطبيقه على أي عدد من العناصر.
كيف أجعل الموقع متجاوبًا مع شاشات الجوال؟
أضف وسم viewport في رأس الصفحة، واستخدم وحدات نسبية مثل النسب المئوية وrem، ثم استخدم Media Queries لتغيير التخطيط عند الشاشات الصغيرة، مع اختبار الصفحة بوضع الجوال في أدوات المطور.
اقرأ أيضاً
- كتاب تقنيات واكواد CSS باللغة العربية PDF لأحتراف تصميم المواقع
- كتاب HTML بسهولة لكل مبتدأ باللغة العربية PDF
- كتاب شرح مكتبة البوتستراب – Bootstrap لتصميم واجهات المواقع PDF
- شرح ال Selectors في لغة CSS | الدرس الثاني
