إذا كنت مهتماً بالبرمجة ولغاتها الكثيرة، فإن لغة CSS هي أحد اللغات التي لا بدّ وأن تستكشفها؛ خاصة إذا كنت بحاجة إلى أداة متخصصة في تطوير الويب. فتعلم لغة CSS سيساعدك على تصميم شكل صفحات المواقع الإلكترونية مهما بلغ عددها أو وصلت في تعقيدها. لذا يقدم لك هذا الدليل معلومات قيمة عن كل ما يخص لغة CSS، ويشرح استخداماتها، ويغطي بعض المفاهيم الأساسية لمساعدتك على البدء في استعمالها في عملك كمبرمج محترف!
ما هي لغة CSS؟
لغة CSS، وتسمى أيضاً بأوراق الأنماط المتتالية، هي لغة مصممة لتحديد الشكل المرئي لصفحات الويب المكتوبة بلغة HTML أو XML وFlutter widgets. وتسمح لك بتصميم عناصر، مثل العناوين والفقرات والصور، والتحكم في الطريقة التي تظهر بها على الأجهزة والشاشات المختلفة.
عن ابتكار لغة CSS
في بدايات عصر تطوير صفحات الويب، كان على المبرمجين استخدام لغة HTML لتصميم صفحات الويب بداية من محتواها وانتهاءً بشكلها الخارجي، وكان عليهم إدراج كل تفصيل متعلق باللون والخط والحدود والشكل الخارجي مباشرة في أوامر HTML لكل عنصر من عناصر الصفحة، وذلك جعل حجم مجموعة الأوامر (الكود) كبيراً جداً ومعقداً، وحتى أنه كان صعب التدقيق أو التعديل، إليك مثالاً لتوضيح الفكرة:
h1 {
color: Blue;
font-size: 12em;
}
في هذا المثال، يطلب المبرمج من البرنامج المكتوب بلغة HTML أن يكتب عنوان الصفحة الرئيسي بخط 12 ولون أزرق، ويحتاج إلى إضافة <font> لتحديد الخط. ولك أن تتخيل ما ستفضي إليه كتابة هذه التفاصيل لكل سطر أو عنوان داخل الصفحة من فوضى وتكدّس للمعلومات.
ولمعالجة هذه المشكلة، تم ابتكار لغة CSS، والتي تتيح تخزين أنماط الشكل في ملف خارجي، مما يجعل من السهل تطبيقها وتحديثها عبر صفحات ويب المتعددة من خلال تحرير ملف واحد فقط.
استخدامات لغة CSS
تكمن مهام CSS في تصميم مواقع الويب في جوانب عدة مرتبطة بالشكل العام وتجربة المستخدم، ومن تلك المهام:
• تحديد مخطط الصفحة
يمكنك التحكم في وضع العناصر داخل الشاشة، وتصميم مخطط صفحة معقد يحتوي على أعمدة متعددة وشبكات ومربعات (Flexbox) من شأنها أن تعطي جمالية وبساطة لصفحة الويب، وتجعل تصفحها أسهل للمستخدمين.
• تخصيص الخطوط والألوان
ضبط أحجام النصوص والخطوط والألوان والأنماط الأخرى لتنسيق الصفحة بتسلسل هرمي مرئي جميل.
• ضمان توافق الصفحة مع المتصفحات المختلفة
ضبط موقع الويب الخاص بك بطريقة تجعله متوافقاً مع الأجهزة المختلفة، من الهواتف المحمولة وأجهزة الكمبيوتر المكتبية والحواسيب اللوحية.
• ضبط المسافات
تتيح لك لغة CSS التحكم في الهوامش والحشو وارتفاع السطر، لتحديد المسافة المناسبة بين العناصر الموجودة داخل الصفحة.
• إضافة الرسوم المتحركة
تتيح لك لغة CSS إضافة رسوم متحركة، وحركات انتقال دقيقة تعمل على تحسين تجربة المستخدم.
كيفية بناء جملة CSS
CSS هي لغة تعتمد على القواعد؛ حيث تقوم بضبط القواعد التي تحدد كيفية تصميم عناصر HTML، وتحتوي كل قاعدة CSS على جزئين رئيسيين: هما؛ المحدد (Selector)، والإعلان (Declaration)، وفيما يلي مثال على جملة CSS بسيطة:
h1 {
color: red;
font-size: 5em;
}
في هذا المثال، يستهدف المحدد (h1) عنصر HTML الذي تريد تصميمه. فيما يحدد الإعلان (color: red; font-size: 5em;) النمط الذي سيتم تطبيقه، ويتكون كل إعلان من خاصية (مثل اللون) وقيمة (مثل الأحمر)، مفصولة بنقطتين. كما يمكن تطبيق قواعد متعددة على عناصر مختلفة، مما يساعدك على تصميم صفحتك بالكامل بشكل جميل وبسرعة.
طرق إضافة أوامر CSS إلى ملف HTML
هناك ثلاث طرق رئيسية لدمج أوامر CSS في كود HTML، وهي كالآتي:
1. تضمين أمر CSS بشكل مباشر
تتم إضافة CSS مباشرة داخل أمر HTML باستخدام سمة style، مثل:
<h1 style=”color: Green;”>This is a heading</h1>
2. تضمين أمر CSS بشكل داخلي
يتم وضع قواعد CSS داخل علامة <style> في قسم <head> في كود HTML، مثل:
<head>
<style>
h1 {
color: green;
}
</style>
</head>
3. تضمين أمر CSS بشكل خارجي
يتم حفظ CSS في ملف .css منفصل وربطه بمستند HTML، مثل:
<link rel=”stylesheet” href=”styles.css”>
CSS ودعم المتصفحات المختلفة
من الأمور المهمة التي يجب أن تبقيها في بالك عند البرمجة بلغة CSS؛ هي التأكد من أن الأنماط والمزايا التي تستخدمها يمكنها التجاوب مع المتصفحات المختلفة؛ إذ أنك وبعد تعريف نمط أو ميزة CSS التي تريدها، يجب أن تتأكد أنها تعمل على كل متصفح. وعلى الرغم من أن بعض المتصفحات قد لا تتجاوب مع جميع المزايا التي تطرحها CSS؛ إلا أن البرنامج لا يتعطل بشكل كامل بسببها، بل يقوم بتخطيها وعدم تطبيقها فحسب.
ولتتأكد من عدم وجود فجوات في موقعك بسبب اختلاف المتصفحات التي يستخدمها زوار الموقع، ننصحك بتجنب إدراج الأنماط التي قد لا تعمل عبر جميع المتصفحات.
كيف يمكن التأكد من توافق النمط مع المتصفحات؟
للتحقق من دعم المتصفح، يعتمد المبرمجون على جداول التوافق مثل تلك الموجودة على MDN (شبكة مطوري موزيلا)، إذ تُظهر هذه الجداول توافق أنماط ومزايا CSS عبر المتصفحات الرئيسية، مثل: Chrome وFirefox وSafari وEdge وOpera. على سبيل المثال، إذا كنت تستخدم خاصية font-family، فيمكنك التحقق من توافقها مع المتصفحات للتأكد من عرضها بشكل صحيح لزوار موقعك.
وحدات CSS
CSS هي لغة واسعة النطاق، مع عدد لا يحصى من الخصائص والميزات المتاحة لتصميم صفحات الويب. ويتم تقسيم CSS إلى وحدات لتنظيم هذه الخصائص؛ بحيث تمثل كل وحدة مجموعة من الميزات أو الوظائف المتشابهة إلى حد ما. وفيما يلي بعض من تلك الوحدات:
• النموذج الصندوقي
يتضمن خصائص التخطيط مثل الهوامش والحشو والحدود.
• وحدة Flexbox
تعمل خصائص هذه الوحدة على ترتيب عناصر الصفحة بشكل مرن بحسب المتصفحات.
• وحدة تخطيط الشبكة (Grid)
تقدم نظام تخطيط على شكل شبكة لإنشاء تصاميم معقدة ومنظمة.
كيف أحترف لغة CSS؟
كما ترى؛ فإن لغة CSS تعتبر مهارة أساسية لأي مصمم ويب محترف، ولتكون قادراً على التعامل مع وظائفها بشكل صحيح، وتصميم مواقع ويب مميزة، فننصحك بتصفّح مكتباتها، والالتحاق بدورات تدريبية متخصصة في لغة CSS عبر الإنترنت، وتطبيق ما تتعلمه على كود تجريبي لتثبيت معلوماتك بشكل عملي. إذاً.. ماذا تنتظر؟ أبدأ رحلة تعلم لغة CSS الآن وأبدع في بناء تجربة المستخدم بطريقتك أنت!