كتاب تعلم لغة CSS
كلمة CSS هي إختصار للمصطلح الإنجليزي ( Cascading Style Sheet ) و التي تُرجمت على أنها "أوراق الأنماط الإنسيبابية", ففي حين أن لغة HTML تهتم بوصف عناصر مستندات الويب فإن CSS تهتم بوصف تحسين شكل و مظهر هذه العناصر.
و إن CSS هي لغة توصيفية تقوم بمنح مواقع الويب شكل جميل الذي سوف يميزهُ عن غيره من المواقع, و هي تُعد صديقة للغة HTML فهم دائماً مترفقات في تصميم و إنشاء صفحات الويب, و تشكّل كل من اللغتان هم الأساس لكل موقع ويب فإن لغة HTML هي أساس كل عناصر صفحة الويب و CSS هي أساس تصميم و شكل الموقع فبدون CSS سوف تبقي مواقع الويب كأنها نصاً عادياً على خلفيات بيضاء.
مميزات لغة CSS
- تقوم في تحديد الخطوط و الهوامش و المسافات لعناصر موقع الويب.
- تقوم في تحديد لون و حجم العناصر.
- يمكن تطبيق الألوان على الخلفيات من خلالها.
- يمكن من خلال CSS تحريك العناصر و الحصول على العديد من الحركات في موقع الويب.
- إن CSS نقوم بتوفير الوقت حيث يمكنك كتابة أكواد CSS مرة واحدة فقط ثم إعادة إستخدامها في صفحات HTML المتعددة.
- توفر إمكانيات في التعديل على التفاصيل الصغيرة الخاصة بالموقع.
- تحسين شكل موقع الويب و توافقه لأحجام الشاشات المختلفة مثل التابلت و الكمبيوتر و الهواتف النقالة....إلخ.
- متوافقة مع أجهزة و أنظمة متعددة.
مبدأ عمل لغة CSS
من أجل فهم أساسيات كيفية عمل لغة CSS يجب في البداية فهم القليل عن لغة HTML حيث أنه سوف تكون عناصر صفحات الويب عبارة عن وحدات ذو أشكال مربعة و يحتوي كل من هذه المربعات على عناصر متعددة و يتم تخصيص حجم هذه المربعات و شكلها عن طريق لغة CSS.
في لغة CSS يتم تطبيق الخصائص على كل العناصر التي يقوم المبرمج بإعطاءها Class أو Id, مثلاً في كود HTML لو تم تعيين Selector واحد لأكثر من عنصر في صفحة الويب و تم تعيين شكل و خصائص له فإن كل العناصر الحاملة له سوف تأخذ نفس الخصائص.
خصائص لغة البرمجة CSS
- يمكن دمج العديد من الخيارات و الرموز الخاصة بلغة HTML و CSS مع بعضهما من أجل الوصول إلى السمات المتكاملة.
- مرونة و سهولة في الإستخدام و التطبيق.
- حساسيتها لحالة الأحرف مثلاً أسميت كلاس A و قمت بكتابته a فلن يتم تطبيق التنسيق.
- الحاجة الضرورية لأساسيات HTML أولاً لأنهما مترافقات جنباً إلى جنب.
- التحكم في أبعاد صفحة الويب و مظهرها من أنماط الخلفية و الحجم و العناصر و محاذاتها و ألوان الخطوط و غيرهم.
- التناسق بين أبعاد صفحة الويب في الموقع مهما كان حجم الموقع كبيراً.
- زيادة سرعة الموقع في التحميل و التقليل من التكاليف المترتبة على إستضافة الموقع.
مشكلة مطوري الويب قبل ظهور CSS
عندما تم إكتشاف لغة html كان التركيز الأكبر على تصميم لغة تصف عناصر صفحات الويب فقط و لم يكن هناك أي إهتمام في المظهر و شكل المحتوى, و تركت هذه المهمة لمصممي مستعرضات الويب حيث كان و ما زال كل مستعرض من مستعرضات الويب يعرض كل عنصر من عناصر الصفحة بمظهر إفتراضي و تم التنبه لهذه النقطة لآحقاً فأُضيفت وسوم جديدة و من تمثلتها الوسم <font> الذي يُستخدَم لعرض نص خط بنوع معين و حجم لون محدد ضمن الصفحة, و كان هذا شيئاً جميلاً في بداية الأمر لكنه أيضاً كارثة, فقد كان هناك بعض الصفحات التي يصل عدد صفحاتها إلى مئات و آلالآف الصفحات، مما يعني أن عملية تنسيق هذه الصفحات تحتاج لوقت ومجهود كبيرين, لكن و من حُسن الحظ فقد إختفت هذه المشكلة تماماً مع ظهور CSS.
ربط أكواد CSS مع HTML
هناك ثلاث طرق يمكن أن نستخدمها لتفعيل CSS في صفحة HTML أي ثلاث طرق لكتابة Style و هذه الطرق سوف نقوم بشرحها بالتفصيل و ننصح بأن يتم التركيز و إستخدام الطريقة الثالثة لأنها الشائعة بكثرة لدى المطورين و هي أن نضع أكواد CSS في ملف منفصل و هذه الطرق الثلاثة هي:
- كتابتها ضمن وسوم HTML بإستخدام خاصية Style.
- كتابتها ضمن ملف HTML بإستخدام وسم Style.
- كتابتها في ملف منفصل أي ملف خارجي و هذا الذي ننصح به.
معلومات كتاب تعلم CSS
- إسم الكتاب : تعلم لغة CSS شرح مبسط و شامل.
- المؤلف : أ. حنان حسن.
- عدد الصفحات : 159.
كتابة أكواد CSS بإستخدام Style في جسم الصفحة
هذه إحدى الطرق لتفعيل CSS في HTML و هي بإستخدام style, على سبيل المثال نريد تطبيق اللون الأحمر كخلفية لصفحة الويب و يكون هذا بالشكل:
<body style="background-color: #FF0000;">
<p>Programmer Tech</p>
</body>
كما لآحظنا قمنا بكتابة style ضمن وسم جسم الصفحة body و طبقنا عليه أننا نريد خلفية صفحة الويب كاملة باللون الأحمر, ثم أنشأنا فقرة بها إسم موقعنا.
كتابة أكواد CSS بإستخدام وسم style في رأس الصفحة
هذه الطريقة مختلفة بأنها تستخدم وسم <style> في رأس الصفحة قبل </head> و سوف نقوم بتطبيق اللون الأحمر كخلفية للصفحة كاملة.
<head>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
نصائح لتعلم CSS بشكل صحيح
بالطبع! سأقدم لك مراحل تعلم لغة CSS من الصفر حتى تصبح محترفًا. يمكنك اتباع الخطوات التالية:
الخطوة 1: فهم أساسيات CSS
- يتعين عليك أولاً فهم مفهوم CSS ودوره في تنسيق صفحات الويب.
- قم بدراسة مفاهيم العناصر (Elements) والتنسيقات (Styles) والمحددات (Selectors)، وكيفية ربط CSS بصفحة HTML.
الخطوة 2: تطبيق الأنماط الأساسية
- ابدأ بتعلم الأنماط الأساسية مثل تنسيق النصوص، وتغيير ألوان الخلفية، وتحديد حجم الخطوط، وتحديد حواف العناصر.
- قم بتطبيق هذه الأنماط على صفحة HTML بسيطة لترى النتائج.
الخطوة 3: تعلم المحددات المتقدمة
- قم بدراسة المحددات المتقدمة في CSS مثل المحددات الأبوية (Combinators) والمحددات الشقيقة (Siblings) لتتمكن من اختيار العناصر المحددة بدقة في صفحتك.
الخطوة 4: تنسيق العناصر والتخطيط
- قم بتعلم كيفية تنسيق العناصر باستخدام CSS، مثل تحديد حجم العناصر وتحديد المسافات بينها.
- دراسة تقنيات التخطيط المختلفة في CSS مثل التخطيط الفليكس (Flexbox) والشبكة الشبه مرنة (Grid) لبناء تصاميم مرنة واستجابة.
الخطوة 5: الرسومات والتحولات
- قم بدراسة كيفية إضافة تأثيرات بصرية إلى صفحتك باستخدام خاصيات CSS مثل الظلال والانتقالات والتحويلات.
- تعلم كيفية استخدام الرسومات المتجهية (SVG) والصور في صفحات الويب باستخدام CSS.
الخطوة 6: الاستجابة والوسائط المتعددة
- تعلم كيفية تصميم صفحات الويب المستجيبة باستخدام وسائط CSS مثل وحدات الوسائط (Media Queries) وتقنيات تناسب الشاشة.
- اكتشف كيفية تنسيق الوسائط المتعددة مثل الصور ومقاطع الفيديو باستخدام CSS.
الخطوة 7: التطوير المتقدم والأدوات
- استكشف مفاهيم التطوير المتقدمة في CSS مثل المتغيرات (Variables) والتصميم الشبه الساكن (CSS Preprocessors) والتصميم المستندة إلى المكونات (Component-Based Design).
- تعرف على أدوات تطوير CSS المفيدة مثل معذرًا، ولكن يبدو أنني قد تجاوزت الحد الأقصى لعدد الأحرف في الإجابة. ومع ذلك، يمكنني مواصلة الإجابة على أسئلتك بشكل فردي. يُرجى توجيه أي استفسارات تحتاج إلى مساعدة فيها.
ما هي أفضل الأدوات التي يمكنني استخدامها لتطوير CSS؟
هناك العديد من الأدوات المفيدة التي يمكنك استخدامها في تطوير CSS. فيما يلي بعض الأدوات الشائعة والمفيدة:
- محرر النصوص: يمكنك استخدام محرر نصوص مثل Sublime Text، Visual Studio Code، Atom، أو Notepad++ لكتابة وتحرير أكواد CSS بسهولة وسرعة.
- متصفح الويب وأدوات المطور: يمكنك استخدام متصفح الويب مثل Google Chrome أو Mozilla Firefox واستخدام أدوات المطور المدمجة فيها لفحص وتحليل عناصر الصفحة وتعديل أنماط CSS على الفور لرؤية التغييرات.
- CSS Preprocessors: هناك أدوات مثل Sass وLess وStylus التي توفر ميزات متقدمة لتطوير CSS مثل المتغيرات والمكتبات والتجميع (compiling)، وتجعل عملية كتابة CSS أكثر كفاءة وسهولة.
- أطر عمل CSS: هناك العديد من الأطر العمل المستخدمة في تطوير CSS مثل Bootstrap وFoundation وBulma وغيرها. توفر هذه الأطر العمل مجموعة من الأنماط والمكونات جاهزة للاستخدام وتسهل عملية بناء تصاميم متجاوبة وجذابة.
- أدوات التصميم والتخطيط: يمكنك استخدام أدوات التصميم مثل Adobe Photoshop وSketch وFigma لإنشاء تصاميم واجهة المستخدم وتصميم العناصر الرسومية قبل تنفيذها باستخدام CSS.
- مكتبات CSS: هناك مكتبات CSS مثل animate.css وFontAwesome وHover.css التي توفر مجموعة من الأنماط والتأثيرات الجاهزة التي يمكنك استخدامها وتطبيقها بسهولة في مشروعك.
هذه مجرد بعض الأدوات المفيدة لتطوير CSS. يمكنك استكشاف المزيد من الأدوات وفقًا لاحتياجاتك وتفضيلاتك الشخصية.
