skip to Main Content

تعتبر CSS  -اختصار ل – (Cascading Style Sheet) لغة توصيفية، تقوم بمنح موقع الويب شكله الجميل وتصميمه الفريد الذي سيميزه عن غيره من المواقع .

تعد لغة ال CSS  صديقة للغة ال HTML، فهي دائماً مرافقة لها وبجانبها في تصميم وإنشاء صفحات الويب.

تشكل كل من هاتين اللغتين الأساس لكل موقع; كما تعد الHTML أساس كل عناصر صفحة الويب; أما ال CSS فهي أساس تصميم وشكل الموقع، فبدونها ستظل مواقع الويب نصًا عاديًا على خلفيات بيضاء.

تطور لغة 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 فكل العناصر الحاملة له ستاخذ نفس الخصائص .

 

Back To Top
× كيف يمكنني مساعدك؟