تم تطوير CSS بواسطة W3C (اتحاد شبكة الويب العالمية) في عام 1996 لسبب بسيط إلى حد ما. لم يتم تصميم عنصر HTML ليحتوي على وسوم تساعد في تنسيق الصفحة. كان من المفترض فقط أن تكتب ترميز صفحة الويب.

تم تقديم وسوم مثل <font> في إصدار HTML 3.2، وقد تسببت في الكثير من المتاعب لمطوري الويب. نظرًا لأن صفحات الويب تحتوي على خطوط مختلفة وخلفيات ملونة وأنماط متعددة، فقد كانت عملية إعادة كتابة التعليمات البرمجية طويلة ومؤلمة ومكلفة. وهكذا، تم إنشاء CSS بواسطة W3C لحل هذه المشكلة.

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

ما هو CSS؟

يرمز CSS إلى ورقة الأنماط المتتالية (بالإنجليزية Cascading Style Sheets) ويستخدم لتصميم العناصر المكتوبة بلغة ترميزية مثل HTML. فهو يفصل المحتوى عن التمثيل المرئي للموقع. ترتبط العلاقة بين HTML وCSS ارتباطًا وثيقًا ببعضهما البعض نظرًا لأن HTML هو أساس الموقع بينما يمثل CSS جماليات موقع الويب بأكمله.

مزايا CSS على صفحات الويب

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

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

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

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

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

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

كيف يعمل CSS؟

يستخدم CSS بناء جملة بسيطًا يعتمد على اللغة الإنجليزية مع مجموعة من القواعد التي تحكمه. كما ذكرنا من قبل، لم يكن المقصود من HTML أبدًا استخدام عناصر النمط، بل فقط ترميز الصفحة. تم إنشاؤه لمجرد وصف المحتوى. على سبيل المثال: <p>هذه الفقرة.</p>.

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

ومع ذلك، هناك قواعد عليك أن تتذكرها. قواعد الهيكل بسيطة جدًا، لذا لا تقلق.

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

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

لنلقي نظرة على مثال:

سيتم تلوين كافة العناصر <p> باللون الأزرق والغامق.

<style>
p {
 color: blue;
 text-weight: bold;
}
</style>

في مثال آخر، ستكون جميع عناصر <p> محاذية للوسط وعرضها 16xواللون اخضر.

<style>
p {
   text-align: center;
   font-size: 16px;
   color: green;
}
</style>

الآن دعونا نتحدث عن أنماط CSS المختلفة. فهي مضمنة وخارجية وداخلية.

أنماط CSS الداخلية والخارجية والمضمنة

سنتناول كل نمط (Style) لفترة وجيزة، وللحصول على شرح متعمق لكل طريقة، سيكون هناك رابط أسفل النظرة العامة.

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

قد تكون الطريقة الخارجية هي الأكثر ملاءمة. يتم كل شيء خارجيًا على ملف css. هذا يعني أنه يمكنك القيام بكل التصميمات في ملف منفصل وتطبيق CSS على أي صفحة تريدها. قد يؤدي النمط الخارجي أيضًا إلى تحسين أوقات التحميل.

وأخيرًا، سنتحدث عن النمط المضمن لـ CSS. يعمل Inline مع عناصر محددة يحتوي على وسم <style>. يجب أن يكون كل مكون منمقًا، لذلك قد لا يكون ذلك أفضل أو أسرع طريقة للتعامل مع css. ولكن يمكن أن يكون في متناول اليدين. على سبيل المثال، إذا كنت تريد تغيير عنصر واحد، أو معاينة التغييرات بسرعة، أو ربما لا يمكنك الوصول إلى ملفات CSS.

لمزيد من المعلومات حول انواع CSS المختلفة، قوم بزيارة هذه المقال.

الخاتمة

دعونا نلخص ما تعلمناه هنا عن CSS وكيف يساعد في جمالية صفحات الويب:

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

على العموم، نأمل أن تكون هذه المقالة مفيدة لك، وإذا كانت لديك أي أسئلة، فيرجى تركها في قسم التعليقات أدناه.

الأسئلة الشائعة