ما هي لغة 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 يمكن أن ننجز ذلك بالطريقة.
<body bgcolor="#FF0000">
و مع CSS يمكن تحقيق نفس النتيجة بكتابة الأوامر.
body {background-color: #FF0000;}
كما لآحظنا بأن أوامر CSS تتشابه مع HTML و المثال الذي في الأعلى يوضح الأسلوب الأساسي لكتابة CSS.
ربط أكواد CSS مع HTML
هناك ثلاث طرق يمكن أن نستخدمها لتفعيل CSS في صفحة HTML أي ثلاث طرق لكتابة Style و هذه الطرق سوف نقوم بشرحها بالتفصيل و ننصح بأن يتم التركيز و إستخدام الطريقة الثالثة لأنها الشائعة بكثرة لدى المطورين و هي أن نضع أكواد CSS في ملف منفصل و هذه الطرق الثلاثة هي:
- كتابتها ضمن وسوم HTML بإستخدام خاصية Style.
- كتابتها ضمن ملف HTML بإستخدام وسم Style.
- كتابتها في ملف منفصل أي ملف خارجي و هذا الذي ننصح به.
كتابة أكواد CSS بإستخدام Style في جسم الصفحة
هذه إحدى الطرق لتفعيل CSS في HTML و هي بإستخدام style, على سبيل المثال نريد تطبيق اللون الأحمر كخلفية لصفحة الويب و يكون هذا بالشكل:
<body style="background-color: #FF0000;"> <p>Nusur Tech</p> </body>
كما لآحظنا قمنا بكتابة style ضمن وسم جسم الصفحة body و طبقنا عليه أننا نريد خلفية صفحة الويب كاملة باللون الأحمر, ثم أنشأنا فقرة بها إسم موقعنا.
كتابة أكواد CSS بإستخدام وسم style في رأس الصفحة
هذه الطريقة مختلفة بأنها تستخدم وسم <style> في رأس الصفحة قبل </head> و سوف نقوم بتطبيق اللون الأحمر كخلفية للصفحة كاملة.
<head>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
كتابة أكواد CSS بملف منفصل عن HTML
هذه في الطريقة المفضلة لدى الجميع و هي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS و الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة css و مثل الملفات الأخرى يمكن وضعه في مزود الموقع أو القرص الصلب و يتم كتابة كود الربط في رأس الصفحة قبل </head>.
و تكون عن طريق الوسم link و هو وسم إحضار الروابط من الخارج و عن طريق خاصية href نقوم بإحضار مسار ملف css.
لنقل بأن ملف التصميم أي ملف css إسمه style.css و هو موجود في مجلد العمل الحالي و هنا يمكن إستدعاءه بالشكل الآتي.
<link rel="stylesheet" type="text/css" href="style.css"/>
و في حال كان ملف أوامر CSS موجود ضمن مجلد ما ضمن مجلد العمل على سبيل المثال إسم المجلد هو style و سوف يكون شكل الربط كالآتي:
<link rel="stylesheet" type="text/css" href="style/style.css"/>
هنا كان إسم المجلد style و إسم الملف هو style.css.
ثم نذهب إلى ملف أوامر CSS و نقوم بكتابة الكود لتطبيق اللون الأحمر على الصفحة كاملة.
body {background-color: #FF0000;}
إن هذه الفكرة يمكنها أن توفر الكثير من الوقت و الجهد في حال كنت تريد تغيير لون خلفية موقع يحوي على 100 صفحة فإن ملف التصميم يمكنه أن يوفر عليك الوقت كثيراً فلن تحتاج إلى تعديل الصفحة الـ 100 كل ملف على حدى, يمكن تغيير الخلفية في ثواني بسطر واحد في ملف أوامر css.