مقدمة إلى CSS

CSS تعني جداول النمط المتسلسلة (Cascading Style Sheets). CSS هي لغة معيارية للنمط، تستخدم لوصف تمثيل صفحة الويب (أي التخطيط والتنسيق).

قبل CSS، كانت كل خصائص التمثيل لوثيقة HTML تقريبًا تحتوي على علامات HTML (خاصة في العلامات HTML). يجب أن تكون كل ألوان الخط، والأنماط الخلفية، وتنسيق العناصر، والهوامش والحجم مكتوبة بشكل واضح في HTML.

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

لحل هذه المشكلة، قدمت منظمة شبكة الويب العالمية (W3C) CSS في عام 1996، وتحتفظ المنظمة أيضًا بمواصفاتها. تأمل CSS في فصل التمثيل والمحتوى. الآن يمكن للصحفيين العرابين تحويل معلومات تنسيق صفحات الويب إلى جدول نمط منفصل، مما يبسط بشكل كبير علامات HTML ويحسن القابلية للصيانة.

CSS3 هو أحدث إصدار من معيار CSS. أضاف CSS3 بعض المزايا الجديدة والتحسينات لتحسين وظائف العرض على الويب.

ما الذي يمكن للـ CSS القيام به

يمكن للـ CSS القيام بأشياء أكثر.

• يمكنك تطبيق نفس قواعد النمط على عدة عناصر بسهولة.

• يمكنك استخدام جدول النمط لتحكم في عرض صفحات الموقع المتعددة.

• يمكنك عرض نفس الصفحة بطريقة مختلفة على أجهزة مختلفة.

• يمكنك تعيين نمط الحالة الديناميكية للعناصر (مثل التفاعل عند مرور الفأرة، التركيز، إلخ)، مما لا يمكن تحقيقه.

• يمكنك تغيير موقع العنصر في الصفحة دون تغيير التسمية.

• يمكنك تغيير عرض العناصر الحالية.

• يمكنك تحويل وتكبير وتدوير وإمالة العناصر في الفضاءات الثنائية أو الثلاثية الأبعاد.

• يمكنك إنشاء تأثيرات حركة وانتقال دون استخدام أي JavaScript.

• يمكنك إنشاء نسخة صديقة للطابعة من صفحة الويب.

هناك الكثير من المزايا للـ CSS، يمكنك استخدام CSS لتنفيذ العديد من العمليات المثيرة. في الفصول القادمة، ستتعرف على كل هذه المعلومات.

مزايا استخدام CSS

أكبر ميزة لـ CSS هي أن يمكنه فصل النمط والتنسيق عن محتويات الوثيقة. هناك المزيد من المزايا، لماذا يُفضل استخدام CSS؟

• CSS يوفر الكثير من الوقت -CSS يقدم الكثير من المرونة لتحديد خصائص النمط للعناصر. يمكنك كتابة CSS مرة واحدة. ثم يمكن تطبيق نفس الكود على مجموعة العناصر HTML، أو في صفحات HTML متعددة.

• سهولة الصيانة — يوفر CSS طريقة سهلة لتحديث تنسيق الوثيقة، مما يحافظ على التركيز بين الوثائق المختلفة. لأن يمكنك بسهولة التحكم في محتوى الصفحة بأحد أو أكثر الملفات النمطية.

• سرعة تحميل الصفحة أسرع - يتيح CSS مشاركة معلومات التنسيق بين الصفحات المختلفة، مما يقلل من تعقيد بنية المحتوى وتكراره. مما يؤدي إلى تقليل حجم التحميل للملفات، مما يعزز من سرعة تحميل الصفحة.

• الاستyles المتقدمة لـ HTML - CSS أكثر قدرة على التمثيل من HTML ويمكنه التحكم بشكل أفضل في تصميم الصفحة. لذلك، يمكنك جعل صفحتك تبدو أفضل مقارنة بالعناصر والخصائص التمثيلية لـ HTML.

• التوافق مع الأجهزة المتعددة - يسمح CSS أيضًا بتحسين صفحات الويب للعديد من أنواع الأجهزة أو الإعلام. باستخدام CSS، يمكنك تقديم نفس وثيقة HTML بشكل مختلف بناءً على نوع الجهاز الذي يتم عرضه (مثل الكمبيوتر المحمول، الهاتف، إلخ).

المحتوى الذي يغطيه هذا الدليل

يغطي هذا سلسلة الدروس جميع الأسس الأساسية لـ CSS، بما في ذلك مفاهيم المختاريات، طرق ضبط الألوان والخلفيات، وتنسيق الخطوط والنصوص، وتنسيق العناصر UI مثل الروابط، القوائم، الجداول، إلخ، وأيضاً نموذج الصندوق لـ CSS، إلخ.

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

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