كياني api

CSS ماهو

 

تعتبر CSS -اختصار ل – (Cascading Style Sheet) لغة توصيفية تقوم بمنح موقع الويب شكله الجميل وتصميمه الفريد الذي سيميزه عن غيره من المواقع . تعد لغة ال CSS صديقة للغة ال HTML فهي دائماً مرافقة لها وبجانبها في تصميم وإنشاء صفحات الويب. تشكل كل من هاتان اللغتان الأساس لكل موقع، فال HTML هي أساس كل عناصر صفحة الويب أما ال CSS فهي أساس تصميم وشكل الموقع فبدونها ستظل مواقع الويب نصًا عاديًا على خلفيات بيضاء, 

فوائد استخدام CSS

  1. فصل المحتوى عن التصميم: يسمح بفصل مظهر الموقع عن محتواه، مما يجعل إدارة وصيانة الموقع أسهل وأكثر تنظيماً.
  2. التناسق والتكرار: يمكن استخدام CSS لضمان تناسق التصميم عبر جميع صفحات الموقع، مما يقلل الجهد اللازم لتنسيق كل صفحة على حدة.
  3. أوقات تحميل أسرع: باستخدام ملفات CSS خارجية يمكن تقليل حجم كود HTML، مما يحسن من سرعة تحميل الصفحات.
  4. مرونة التخصيص: يتيح CSS تغييرات سريعة وواسعة على تصميم الموقع بأكمله عبر تعديل ملف CSS واحد.
  5. التوافق مع أجهزة العرض المختلفة: يمكن استخدام CSS لإنشاء تصاميم تستجيب بشكل مختلف بناءً على نوع الجهاز (الحاسوب، الهاتف المحمول، الجهاز اللوحي).

قبل البدء ببناء و تطوير لغة ال CSS في عام 1996 من قبل اتحاد شبكة الويب العالمية (W3C); كانت صفحات الويب محدودة و بسيطة للغاية من حيث الشكل والوظيفة.

كما كانت أيضًا المتصفحات القديمة تعرض صفحات الويب كصفحات تتكون من نصوص سوداء بخلفية بيضاء فقط (نص – صور – روابط .. إلخ) بدون أي تصميم يذكر.

أما الان أصبح لدينا ميزات متعددة مثل:

  • تطبيق الألوان على الخلفيات .
  • تحريك العناصر بحرية والحصول على العديد من الحركات في الموقع .
  • والعديد من المزايا الاخرى .
  • كان Microsoft Internet Explorer 3 أول متصفح تم من خلاله عرض واستخدام CSS في عام 1998.

وفي يومنا هذا يختلف دعم بعض خصائص CSS من متصفح إلى اخر.

أصدرت W3C- والتي ما زالت تشرف على معايير الويب و تحديدها- معياراً أو إصداراً جديداً ل CSS وهو CSS3.

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

  • كيف تعمل CSS ؟

لفهم أساسيات عملها، يجب أولاً فهم القليل عن لغة HTML (الشرح في مقالة منفصلة).

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

على سبيل المثال: رأس الصفحة عبارة عن مربع، ويحتوي على العديد من الوحدات الأخرى الأصغر التي تضم جميع العناصر التي تشكل رأس الصفحة ، مثل  الشعار، و الناف بار، و أيقونات التواصل الاجتماعية وما إلى ذلك.

يقوم المطور باستخدام CSS بتخصيص الشكل والحجم إلى رأس الصفحة.

وفي لغة ال CSS يتم تطبيق الخصائص على كل العناصر التي تحمل ال Class or Id المختار في ال CSS.

مثلا في الHTML  لو تم تعيين Selector واحد لأكثر من عنصر في الصفحة وتم تعيين شكل وخصائص لهذا ال Selector فكل العناصر الحاملة له ستاخذ نفس الخصائص .

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

  •  ما معنى معالجات أو CSS Preprocessors ؟

معالجات ال CSS أو ال CSS Preprocessors هي عبارة عن لغات تابعة إلى اللغة الرئيسية CSS وتسمح للمطور بكتابة أوامر برمجية مثل (Functions, Loops, etc..)  ثم يتم تحويلها إلى أوامر CSS عادية.

وهذه ميزة خارقة وستوفر عليك الكثير من الوقت والجهد في كتابة عناصر ال CSS بشكل غير مسبوق، ولهذا هي مهمة ويجب تعلمها لأنها ستضيف لك الكثير كمبرمج.