مقدمة في لغة CSSCSS Introduction

• لغة CSS ليست لغة برمجة وإنما لغة تنسيق.
• لغة CSS مسؤولة عن المؤثرات الحركية لعناصر HTML.
• تستخدم لغة CSS جنباً إلى جنب مع [HTML - SVG - XML ].
• تنسق CSS الصفحات سواء كان محتواها ثابتًا أم يتغير. وصف الصفحة بأنها ثابتة لا يعني غياب كل تفاعل؛ يمكن لـHTML وCSS توفير روابط ونماذج وحالات مثل المرور بالمؤشر، بينما تحتاج وظائف أخرى إلى JavaScript أو الخادم.
• حتى دون تنسيقات المؤلف، يعرض المتصفح HTML بتنسيقات افتراضية، مثل حجم العناوين والمسافات بين الفقرات. تضيف CSS المظهر الذي يختاره المصمم.
• لغة CSS تصنع اللمسات الإبداعية مثل الألوان والخلفيات سواء كانت الخلفيات ألوان او الصور.
• يمكن كتابة CSS في ملف خارجي أو داخل عنصر <style> أو سمة style. يساعد الملف الخارجي على مشاركة التنسيق وصيانته بين الصفحات.
• لغة HTML تبني هيكل صفحات الويب ثم تقوم لغة CSS بعرض وصف وتنسيق عناصر HTML على متصفح الويب وإضافة style تنسيق لهذه العناصر.

• avoid duplication تجنب التكرار.

تتيح لغة CSS دمج ملف واحد CSS مع أكثر من ملف HTML، مما يؤدي إلى كتابة تنسيقات تتماشى مع مجموعة صفحات، بدلاً من تكرار نفس الأوامر لكل صفحة.

• make maintenance easier صيانة أسهل.
  

تساعدك لغة CSS عن فصل أوامر لغة HTML عن أوامر تنسيق عناصر صفحة HTML، مما يجعل إصلاح صفحة الويب سهلاً، فعلى سبيل المثال إذا أردنا تغيير عناصر HTML نذهب إلى صفحة HTML، وإذا أردنا التعديل في التنسيق نذهب إلى ملف CSS.

عندما يعرض المتصفح ملف HTML يقوم بتحميل ملف التنسيقات الخاص بهذا الملف الذي تم الإشارة إليه داخل ملف HTML، ثم يقرأ المتصفح ألوان العناصر وطريقة عرضها، ثم يعرض المتصفح كل عنصر بتنسيقاته.

تتم هذه العملية على مراحل، هي:

1. load HTML file يحصل المتصفح على مستند HTML من الشبكة أو من ملف محلي أو نسخة مخبأة.
2. DOM tree إنشاء شجرة DOM في ذاكرة الكمبيوتر.
3. fetch resources يطلب المتصفح الموارد المطلوبة مثل CSS والصور والبرامج، وقد يستخدم نسخًا مخبأة أو يؤجل تحميل بعضها. يمكن أن تتداخل هذه الخطوات.
4. parse CSS يحلل المتصفح قواعد CSS ويحدد القواعد المطابقة والقيم الناتجة لكل عنصر وفق التتالي والوراثة.
5. render tree and layout يبني معلومات العرض ويحسب أحجام العناصر ومواضعها قبل الرسم.
6. painting يظهر العرض المرئي للصفحة على الشاشة (تسمى هذه المرحلة الرسم).
   

• CSS saves time كتابة أوامر CSS واحدة وتستخدم مرات عديدة مع أكثر من صفحة ويب.
• Pages load faster قد تقلل مشاركة ملف CSS وتخزينه مؤقتًا التنزيل المتكرر بين الصفحات؛ فصل الملف وحده لا يضمن السرعة، إذ تؤثر أحجام الموارد والطلبات وطريقة التحميل.
• Easy maintenance سهولة صيانة الأوامر لأنها تكون منفصلة عن صفحة HTML.
• Multiple Device Compatibility توفر CSS أدوات لبناء تصميم متجاوب مع الهاتف واللوحي والحاسوب؛ يحتاج ذلك إلى تنسيق مناسب واختبار، ولا يحدث تلقائيًا لكل تصميم.

• Browser compatibility يختلف دعم بعض ميزات CSS وإصداراتها بين المتصفحات؛ راجع بيانات التوافق للميزة واختبر المتصفحات المستهدفة.
• Cross-browser issues لا يلزم كتابة نسخة مختلفة لكل متصفح. استخدم الميزات المدعومة وبدائل مناسبة عند الحاجة، وتجنب افتراض أن كل قواعد CSS غير متوافقة.
• Development effort قد يتطلب تنسيق واجهات معقدة وقتًا للتطوير والاختبار. لا يوجد حكم عام موثق بأنها من أكثر اللغات استهلاكًا للوقت.

قبل لغة CSS،  كانت صفحات الويب لها عناصر بلغة HTML تتحكم في شكل وتنسيق صفحة الويب، مثل: عنصر <font> الذي كان مسؤولاً عن تنسيق الخطوط، لكن كانت هناك بعض المشاكل مثل:

المشاكل:

• يتم تكرار هذه عناصر التنسيق داخل كل صفحات الويب، وهذا يعتبر كابوساً لمطوري المواقع.
• يؤدي تكرار عناصر التنسيقات إلى كتابة أوامر أكثر، وبالتالي حجم كود أكبر.

حل المشاكل:

قامت لغة CSS بحل المشاكل السابقة، من خلال كتابة ملف واحد فقط يعمل مع جميع صفحات الويب، أي نكتب الأوامر مرة واحدة لتعمل مع صفحات متعددة.