ما هي لغة CSS ؟
CSS والتي تعرف بأوراق الأنماط المتتالية Cascading Style Sheets. وهي لغة تستخدم لتخطيط وتنسيق صفحات الويب.
قبل لغة CSS كان يتم تضمين جميع سمات التنسيق لصفحات الويب داخل عناصر HTML (تحديدا داخل وسوم HTML) ؛ كان يجب وضع كافة تنسيقات الألوان و الخطوط وتنسيق الخلفية و محاذات العناصر و الحدود و الأحجام بشكل صريح داخل وسوم HTML.
ونتيجة لذلك ، أصبح تطوير المواقع الكبيرة عملية طويلة ومكلفة ، حيث تتم إضافة معلومات التنسيق بشكل متكرر إلى كل صفحة من صفحات الموقع.
حلا لهذه المشكلة تم اطلاق CSS في عام 1996 من قبل اتحاد شبكة الويب العالمية W3C الذي حافظ أيضا على معيارها, حيث تم تصميم CSS لتمكين الفصل بين تنسيق الصفحات و المحتوى . الآن يمكن لمصممي الويب نقل معلومات تنسيق صفحات الويب إلى ورقة أنماط منفصلة مما يجعل كود HTML أبسط إلى حد كبير وقابل للتطوير والتحديث بشكل أفضل.
يضيف CSS3 (أحدث إصدار من لغة CSS) العديد من التنسيقات والتحسينات الجديدة لتحسين عرض المواقع على متصفحات الويب.
هذه الدورة سوف تكون حسب الإصدار الاخير للغة CSS الا وهو CSS3.
ما هي الأشياء التي يمكننا القيام بها باستخدام لغة CSS ؟
هناك الكثير من الأشياء التي يمكننا القيام بها باستخدام لغة CSS.
- يمكننا بسهولة تطبيق نفس التنسيقات على عناصر متعددة.
- يمكنك التحكم في شكل وتصميم صفحات متعددة من موقع الويب بورقة أنماط واحدة.
- يمكننا عرض نفس الصفحة بشكل مختلف على أجهزة مختلفة.
- يمكننا تنسيق العنصر حسب حالاته المتغيرة مثل التمرير
hover، والتركيزfocus، إلخ. - يمكننا تغيير موقع عرض عنصر على صفحة الويب دون تغيير كود HTML
- يمكننا تغيير مساحة عرض عناصر HTML الموجودة.
- يمكننا إنشاء تأثيرات متحركة ومؤثرات انتقالية بدون استخدام أي جافاسكريبت.
- يمكننا إنشاء نسخة سهلة الطباعة من صفحات الويب.
لا تنتهي القائمة هنا ، فهناك العديد من الأشياء المميزة التي يمكننا القيام بها باستخدام لغة CSS. سوف نتعرف عليها معا بالتفصيل في هذه الدورة.
مزايا استخدام لغة CSS
أكبر ميزة للغة CSS هي أنها تسمح بفصل التنسيقات عن محتوى صفحة الويب. فيما يلي بعض المزايا الإضافية للغة CSS، ولماذا يجب على مصمم الويب البدء في استخدام لغة CSS؟
- توفر لغة CSS الكثير من الوقت : توفر لغة CSS الكثير من المرونة لتحديد خصائص تنسيق عناصر ٍ HTML. يمكننا كتابة خصائص CSS مرة واحدة ؛ ومن ثم تطبيق نفس الكود على مجموعة من عناصر HTML ، ويمكننا أيضًا إعادة استخدام نفس الكود وربطه مع صفحات HTML متعددة.
- سهولة صيانة وتحديث صفحات الويب: توفر لغة CSS وسيلة سهلة لتحديث تنسيق صفحات الويب والحفاظ على الاتساق عبر الصفحات المتعددة او حتى الموقع ككل . لأنه يمكننا التحكم بسهولة في محتوى مجموعة من صفحات الويب باستخدام ورقة أنماط CSS أو أكثر.
- تحميل الصفحات بشكل أسرع : تمكّن لغة CSS صفحات ويب متعددة من مشاركة معلومات التنسيق ، مما يقلل من التعقيد والتكرار في المحتويات الهيكلية لصفحات الويب. مما يؤدي إلى التقليل وبشكل كبير من حجم البيانات المنقولة وإلى تحميل أسرع لصفحات الويب.
- التنسيقات والتصميمات المتفوقة عن HTML: تتمتع لغة CSS بخصائص وتنسيقات أكثر بكثير من HTML وتوفر تحكمًا أفضل بكثير في تصميم صفحات الويب. كل ذلك يؤدي إلى اعطاء شكل أفضل لصفحات الويب مقارنة بعناصر وسمات HTML.
- التوافق مع الأجهزة المتعددة: تسمح لغة CSS أيضًا بتحسين عرض صفحات الويب على اكثر من نوع واحد من الأجهزة أو الوسائط. باستخدام لغة CSS ، يمكننا تقديم نفس صفحة HTML في طرق عرض مختلفة لتتناسب مع أجهزة العرض المختلفة مثل اجهزة سطح المكتب والهواتف المحمولة وما إلى ذلك.
ما الذي سنتعلمه خلال دورة CSS ؟
تغطي دورة CSS التعليمية جميع أساسيات CSS ، بما في ذلك فكرة المحددات selectors ، وكيفية تحديد الألوان والخلفيات ، وكيفية تنسيق الخطوط والنصوص ، وعناصر تصميم واجهة المستخدم مثل الارتباطات التشعبية والقوائم والجداول وما إلى ذلك ، بالإضافة إلى مفهوم نموذج مربع CSS ما يعرف بـ CSS box model ، وما إلى ذلك.
بمجرد أن تكون تعلمت الأساسيات بشكل جيد ، ستنتقل إلى المستوى التالي الذي يشرح طريقة تحديد الأبعاد ومحاذاة العناصر ، وطرق وضع العناصر على صفحة الويب ، واستخدام الصور المتحركة ، بالإضافة إلى مفهوم النسبية و الوحدات المطلقة ونموذج التنسيق المرئي والعرض والرؤية والطبقات وأوراق الأنماط المعتمدة على الوسائط وما إلى ذلك.
أخيرًا ، ستستكشف بعض الميزات المقدمة في CSS3 مثل تدرج الألوان وتأثير الظل المسقط والتحويلات ثنائية الأبعاد وثلاثية الأبعاد وشفافية ألفا ، بالإضافة إلى الرسوم المتحركة والتخطيطات المرنة وتأثير الفلاتر ومفهوم استعلام الوسائط media queries والمزيد.