كتاب تعلم لغة 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>
