CSS تعلم لغة CSS

هل أنا جاهز لتعلم لغة CSS؟

قبل البدء بهذه الدورة يجب أن تكون متقن للغة HTML لأن هذه اللغة تستخدم معها بشكل أساسي.

إن لم يسبق لك أن تعلمت لغة HTML فلا تقلق أبداً لأننا أعددنا مرجع شامل لها.

تعلم لغة HTML »

ما هي لغة CSS

في البداية كلمة CSS هي اختصار لجملة Cascading Style Sheet و هي لغة تستخدم في تصميم صفحات الويب فمن خلالها يمكنك تغيير ألوان العناصر، تحديد مواقعها و أحجامها، إضافة مؤثرات لها، جعل صفحات الويب متجاوبة مع مختلف أحجام الشاشات لكي تظهر بشكل ملائم للمستخدم سواء كان يفتح الصفحة بواسطة هاتف، تابلت أو حاسوب، بالإضافة إلى الكثير من الأمور الرائعة التي ستتعلمها خطوة خطوة في هذه الدورة.

مثال

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

معلومة تقنية

بشكل عام، CSS تعتبر لغة تصميم ( Style Language ) و ليس لغة برمجة ( Programming Language ) فهي تستخدم في تصميم صفحات الويب التي يتم بناؤها بواسطة HTML أو الصفحات التي يتم بناؤها بواسطة XML.

إصدارات لغة CSS

لغة CSS يتم تطويرها باستمرارا بدءاً من ظهورها أول مرة عام 1996 و حتى يومنا هذا. المجموعة المسؤولة عن تطوير هذه اللغة تدعى World Wide Web Consortium و في العادة تختصر بكلمة W3C.

يوجد ثلاث إصدارات رسمية حتى اللحظة من لغة CSS و الفكرة من هذه الإصدارات ليس تغيير طريقة التعامل مع اللغة بل إضافة ميزات جديدة عليها.

الإصدار الأول

الإصدار CSS1 فكرته الأساسية كانت فصل كود التصميم عن كود الصفحة الذي يتم بناؤها بواسطة HTML الأمر الذي يجعلك قادر على استخدام ملف التصميم نفسه المكتوب بلغة CSS في أي صفحة تريد.

الإصدار الثاني

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

الإصدار الثالث

الإصدار CSS3 أضيف فيه خصائص تسمى Media Queries و التي من خلالها يمكنك جعل حجم الصفحة متجاوب مع مختلف أحجام الشاشات. أصبح الوصول لعناصر الصفحات أكثر مرونة، التحكم بأمكان العناصر أصبح أكبر، طرق إضافة التلوين أصبحت عديدة حيث أصبح بالإمكان دمج الألوان، أصبح بالإمكان وضع أكثر من صورة كخلفية، أصبح بالإمكان عرض مؤثرات رائعة للعناصر كجعلها تتحرك من مكانها و تدور و تتمدد و تتغير ألوانها إلخ..

أي إصدار يجب أن تتعلم؟

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

فوائد لغة CSS

سنذكر فوائدها تباعاً مع إيضاح معنى كل نقطة.

1- توفير الوقت

يمكنك وضع كود التصميم الخاص بك في ملف CSS و تضمينه نفسه في أي صفحة HTML تريد استخدامه فيها.

2- سرعة التحميل

حين تضع كود التصميم في ملف CSS و تضمّنه في صفحات الموقع فإن المتصفح في العادة يقوم بتحميل هذا الملف مرة واحدة فقط و يخزّن عنده. بعدها إن تم الدخول لأي صفحة مربوطة بهذا الملف فإن المتصفح يستخدم النسخة التي قام بتخزينها سابقاً بدل تحميل الملف في كل مرة.

3- سهولة التعديل

بمجرد التعديل على كود التصميم الموضوع في ملف CSS فإن كل الصفحات المربوطة به سيتم تعديل تصميمها.

4- خصائص متقدمة

بعض الوسوم في لغة HTML تحتوي على خصائص يمكن من خلالها التعديل على تصميمها و لكن هذه الخصائص تعتبر لا شيء مقارنة بالخصائص التي توفرها CSS و التي يمكن تطبيقها على جميع العناصر.

5- بناء صفحات متجاوبة

بواسطة لغة CSS يمكنك جعل تصميم الشاشة متجاوب ( Responsive ) مع مختلف أحجام الشاشات التي يتم من خلالها مشاهدة الصفحات لتظهر بشكل مناسب نسبةً لحجم الصفحة المفتوحة عليها.

6- تخصيص الطباعة على ورق

لغة CSS توفر خصائص سهلة الإستخدام يمكنك من خلالها تحديد الشكل الذي ستظهر فيه الصفحة في حال أراد المستخدم طباعتها على ورقة.

7- معايير الويب العالمية

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

لمن تم إعداد هذا المرجع؟

تم إعداد هذا المرجع ليتلاءم مع جميع الأشخاص الذين يريدون التعلم.

إذاً سواء كنت هاوياً، طالباً أو مبرمجاً، فإن هذا المرجع سيساعدك على فهم لغة CSS و الوصول إلى مستوى متقدم جداً فيها.

في الدرس التالي سنرشدك لتحميل البرامج التي يمكنك استخدامها لكتابة الكود و التي بإمكانك إستعمالها نفسها في مشاريعك الخاصة في المستقبل.