هل أنا جاهز لتعلم لغة CSS؟
قبل البدء بهذه الدورة يجب أن تكون متقن للغة HTML لأن هذه اللغة تستخدم معها بشكل أساسي.
إن لم يسبق لك أن تعلمت لغة HTML فلا تقلق أبداً لأننا أعددنا مرجع شامل لها.
قبل البدء بهذه الدورة يجب أن تكون متقن للغة HTML لأن هذه اللغة تستخدم معها بشكل أساسي.
إن لم يسبق لك أن تعلمت لغة HTML فلا تقلق أبداً لأننا أعددنا مرجع شامل لها.
في البداية كلمة CSS هي اختصار لجملة Cascading Style Sheet و هي لغة تستخدم في تصميم صفحات الويب فمن خلالها يمكنك تغيير ألوان العناصر، تحديد مواقعها و أحجامها، إضافة مؤثرات لها، جعل صفحات الويب متجاوبة مع مختلف أحجام الشاشات لكي تظهر بشكل ملائم للمستخدم سواء كان يفتح الصفحة بواسطة هاتف، تابلت أو حاسوب، بالإضافة إلى الكثير من الأمور الرائعة التي ستتعلمها خطوة خطوة في هذه الدورة.
فيما يلي، قمنا بوضع صفحة تتألف من كود HTML فقط و من ثم وضعنا الصفحة نفسها بعد إضافة القليل من التحسينات عليها بواسطة CSS حتى تلاحظ الفرق.
الصفحة بدون CSS
الصفحة نفسها مع CSS
بشكل عام، CSS تعتبر لغة تصميم ( Style Language ) و ليس لغة برمجة ( Programming Language ) فهي تستخدم في تصميم صفحات الويب التي يتم بناؤها بواسطة HTML أو الصفحات التي يتم بناؤها بواسطة XML.
لغة CSS يتم تطويرها باستمرارا بدءاً من ظهورها أول مرة عام 1996 و حتى يومنا هذا. المجموعة المسؤولة عن تطوير هذه اللغة تدعى World Wide Web Consortium و في العادة تختصر بكلمة W3C.
يوجد ثلاث إصدارات رسمية حتى اللحظة من لغة CSS و الفكرة من هذه الإصدارات ليس تغيير طريقة التعامل مع اللغة بل إضافة ميزات جديدة عليها.
الإصدار CSS1 فكرته الأساسية كانت فصل كود التصميم عن كود الصفحة الذي يتم بناؤها بواسطة HTML الأمر الذي يجعلك قادر على استخدام ملف التصميم نفسه المكتوب بلغة CSS في أي صفحة تريد.
الإصدار CSS2 أضيف فيه خصائص جديدة حيث بات بالإمكان التحكم بأمكان العناصر، تحميل خطوط غير الخطوط الموجودة في جهاز المستخدم، إضافة تأثيرات جديدة على النصوص كالظلال، بالإضافة إلى تحديد كيف ستظهر الصفحة في حال أراد المستخدم طباعتها على ورق.
الإصدار CSS3 أضيف فيه خصائص تسمى Media Queries و التي من خلالها يمكنك جعل حجم الصفحة متجاوب مع مختلف أحجام الشاشات. أصبح الوصول لعناصر الصفحات أكثر مرونة، التحكم بأمكان العناصر أصبح أكبر، طرق إضافة التلوين أصبحت عديدة حيث أصبح بالإمكان دمج الألوان، أصبح بالإمكان وضع أكثر من صورة كخلفية، أصبح بالإمكان عرض مؤثرات رائعة للعناصر كجعلها تتحرك من مكانها و تدور و تتمدد و تتغير ألوانها إلخ..
من بعد ما ذكرنا لك قصة الإصدارات، عليك التفكير بأن عليك تعلم لغة CSS فقط و دعك ممن يقول تعلم الإصدار الفلاني فهذا كلام خاطئ لأنك أنت بالأساس حين تكتب كود CSS لا تحدد رقم الإصدار الذي تتعامل معه و غالباً ما ستستخدم خصائص من الإصدار الأول و الإصدار الثاني و الإصدار الثالث مع بعض في أي مشروع تعمل عليه.
سنذكر فوائدها تباعاً مع إيضاح معنى كل نقطة.
يمكنك وضع كود التصميم الخاص بك في ملف CSS و تضمينه نفسه في أي صفحة HTML تريد استخدامه فيها.
حين تضع كود التصميم في ملف CSS و تضمّنه في صفحات الموقع فإن المتصفح في العادة يقوم بتحميل هذا الملف مرة واحدة فقط و يخزّن عنده. بعدها إن تم الدخول لأي صفحة مربوطة بهذا الملف فإن المتصفح يستخدم النسخة التي قام بتخزينها سابقاً بدل تحميل الملف في كل مرة.
بمجرد التعديل على كود التصميم الموضوع في ملف CSS فإن كل الصفحات المربوطة به سيتم تعديل تصميمها.
بعض الوسوم في لغة HTML تحتوي على خصائص يمكن من خلالها التعديل على تصميمها و لكن هذه الخصائص تعتبر لا شيء مقارنة بالخصائص التي توفرها CSS و التي يمكن تطبيقها على جميع العناصر.
بواسطة لغة CSS يمكنك جعل تصميم الشاشة متجاوب ( Responsive ) مع مختلف أحجام الشاشات التي يتم من خلالها مشاهدة الصفحات لتظهر بشكل مناسب نسبةً لحجم الصفحة المفتوحة عليها.
لغة CSS توفر خصائص سهلة الإستخدام يمكنك من خلالها تحديد الشكل الذي ستظهر فيه الصفحة في حال أراد المستخدم طباعتها على ورقة.
الأفضل دائماً أن يتم وضع تصميم صفحة الويب التي تبنيها بالأساس بكود HTML في ملف CSS منفصل عن الصفحة ذاتها و من ثم تضمينه فيها فبهذه الطريقة يمكنك استخدام ملف التصميم في جميع صفحات موقعك و التعديل عليها في أي وقت تريده بكل سهولة.
تم إعداد هذا المرجع ليتلاءم مع جميع الأشخاص الذين يريدون التعلم.
إذاً سواء كنت هاوياً، طالباً أو مبرمجاً، فإن هذا المرجع سيساعدك على فهم لغة CSS و الوصول إلى مستوى متقدم جداً فيها.
في الدرس التالي سنرشدك لتحميل البرامج التي يمكنك استخدامها لكتابة الكود و التي بإمكانك إستعمالها نفسها في مشاريعك الخاصة في المستقبل.