تتكون مواقع الويب من عدد من القطع الفردية ، بما في ذلك الصور والنصوص والمستندات المختلفة. لا تتضمن هذه المستندات فقط تلك التي قد تكون مرتبطة من صفحات مختلفة ، مثل ملفات PDF ، ولكن أيضًا المستندات المستخدمة لإنشاء الصفحات نفسها ، مثل مستندات HTML لتحديد بنية الصفحة ووثائق CSS (ورقة الأنماط المتتالية) لإملاء مظهر الصفحة. ستتعمق هذه المقالة في CSS ، وتغطي ماهيتها وأين يتم استخدامها على مواقع الويب اليوم.
درس تاريخ CSS
تم تطوير CSS لأول مرة في عام 1997 كطريقة لمطوري الويب لتحديد المظهر المرئي لصفحات الويب التي كانوا يقومون بإنشائها. كان القصد من السماح لمحترفي الويب افصل المحتوى وهيكل رمز موقع الويب من التصميم المرئي ، وهو أمر لم يكن ممكنًا قبل هذا الوقت.
يسمح فصل الهيكل والأسلوب لـ HTML بأداء المزيد من الوظائف التي كانت تستند في الأصل - الترميز المحتوى ، دون الحاجة إلى القلق بشأن تصميم الصفحة نفسها وتنسيقها ، وهو ما يُعرف عمومًا باسم "شكل وأسلوب" صفحة.
تطور CSS
لم تكتسب CSS شعبية حتى عام 2000 تقريبًا عندما بدأت متصفحات الويب في استخدام أكثر من الجوانب الأساسية للخط واللون في لغة الترميز هذه. اليوم ، تدعم جميع المتصفحات الحديثة جميع CSS المستوى 1 ، ومعظم CSS المستوى 2 ، وحتى معظم جوانب CSS المستوى 3. مع استمرار تطور CSS وإدخال أنماط جديدة ، بدأت متصفحات الويب في تنفيذ الوحدات النمطية التي تجلب دعم CSS جديدًا إلى تلك المتصفحات وتمنح مصممي الويب أدوات تصميم جديدة قوية للعمل مع.
في (عدة) سنوات ماضية ، كان هناك مصممو ويب مختارون رفضوا استخدام CSS لـ تصميم وتطوير مواقع الويب ، لكن هذه الممارسة لم تعد موجودة في الصناعة اليوم. يعد CSS الآن معيارًا مستخدمًا على نطاق واسع في تصميم الويب ، وستتعرض لضغوط شديدة للعثور على أي شخص يعمل في الصناعة اليوم لم يكن لديه على الأقل فهم أساسي لهذه اللغة.
CSS هو اختصار
كما ذكرنا سابقًا ، يشير المصطلح CSS إلى "ورقة الأنماط المتتالية". دعنا نقسم هذه العبارة قليلاً لشرح ما تفعله هذه المستندات بشكل كامل.
تشير كلمة "ورقة الأنماط" إلى المستند نفسه (مثل ملفات HTML و CSS هي في الحقيقة مجرد مستندات نصية يمكن تحريرها باستخدام مجموعة متنوعة من البرامج). تم استخدام أوراق الأنماط لتصميم المستندات لسنوات عديدة. هي المواصفات الفنية للتخطيط ، سواء كانت مطبوعة أو عبر الإنترنت. استخدم مصممو الطباعة أوراق الأنماط منذ فترة طويلة لضمان طباعة تصميماتهم وفقًا لمواصفاتهم تمامًا. تخدم ورقة الأنماط لصفحة الويب نفس الغرض ، ولكن مع الوظيفة الإضافية لإخبار متصفح الويب أيضًا بكيفية عرض المستند الذي يتم عرضه. اليوم ، يمكن أيضًا استخدام أوراق أنماط CSS تساؤلات الإعلام لتغيير الطريقة التي تبحث عنها الصفحة أجهزة وأحجام شاشات مختلفة. هذا مهم للغاية لأنه يسمح بعرض مستند HTML واحد بشكل مختلف وفقًا للشاشة المستخدمة للوصول إليه.
تتالي هو الجزء الخاص حقًا من مصطلح "ورقة الأنماط المتتالية". ورقة أنماط الويب يهدف إلى التسلسل عبر سلسلة من الأنماط في تلك الورقة ، مثل نهر فوق شلال. تصطدم المياه في النهر بجميع الصخور في الشلال ، لكن الصخور الموجودة في القاع فقط هي التي تؤثر بالضبط على المكان الذي ستتدفق فيه المياه. وينطبق الشيء نفسه على التتالي في أوراق أنماط مواقع الويب.
تتجاوز أوراق أنماط المصمم أوراق الأنماط الافتراضية للمتصفح
تتأثر كل صفحة ويب بورقة أنماط واحدة على الأقل ، حتى إذا كان مصمم الويب لا يطبق أي أنماط. ورقة الأنماط هذه هي ورقة أنماط وكيل المستخدم - يُعرف أيضًا باسم الأنماط الافتراضية التي سيستخدمها متصفح الويب لعرض صفحة إذا لم يتم توفير إرشادات أخرى. على سبيل المثال ، يتم تحديد نمط الارتباطات التشعبية افتراضيًا باللون الأزرق ويتم تسطيرها. تأتي هذه الأنماط من ورقة الأنماط الافتراضية لمتصفح الويب. ومع ذلك ، إذا قدم مصمم الويب إرشادات أخرى ، فسيحتاج المستعرض إلى معرفة الإرشادات التي لها الأسبقية. تحتوي جميع المتصفحات على أنماطها الافتراضية الخاصة ، ولكن تتم مشاركة العديد من هذه الإعدادات الافتراضية (مثل روابط النص المسطر باللون الأزرق) عبر جميع أو معظم الإصدارات والمستعرضات الرئيسية
للحصول على مثال آخر لمتصفح افتراضي ، في متصفح الويب الخاص بنا ، يكون الخط الافتراضي هو "تايمز نيو رومان"معروض بحجم 16. ومع ذلك ، لم يتم زيارة أي من الصفحات تقريبًا في مجموعة الخطوط وحجمها. هذا لأن التسلسل يحدد أن أوراق الأنماط الثانية ، التي وضعها المصممون أنفسهم ، لإعادة تعريف حجم الخط والأسرة ، لتجاوز الإعدادات الافتراضية لمتصفح الويب الخاص بنا. ستكون أي أوراق أنماط تنشئها لصفحة ويب أكثر تحديدًا من الأنماط الافتراضية للمتصفح ، لذلك لن يتم تطبيق هذه الإعدادات الافتراضية إلا إذا كانت ورقة الأنماط الخاصة بك لا تتجاوزها. إذا كنت تريد أن تكون الروابط زرقاء ومسطرة ، فلن تحتاج إلى فعل أي شيء لأن هذا هو الوضع الافتراضي ، ولكن إذا كان ملف CSS لموقعك ينص على أن الروابط يجب أن تكون خضراء ، فسيتجاوز هذا اللون اللون الأزرق الافتراضي. سيبقى التسطير في هذا المثال لأنك لم تحدد خلاف ذلك.
أين يتم استخدام CSS؟
يمكن أيضًا استخدام CSS لتحديد الشكل الذي يجب أن تظهر به صفحات الويب عند عرضها في وسائط أخرى غير ملف متصفح الإنترنت. على سبيل المثال ، يمكنك إنشاء ورقة أنماط طباعة تحدد كيفية طباعة صفحة الويب. نظرًا لأن عناصر صفحة الويب مثل أزرار التنقل أو نماذج الويب لن يكون لها أي غرض على الصفحة المطبوعة ، يمكن استخدام ورقة أنماط الطباعة "لإيقاف" هذه المناطق عند طباعة الصفحة. على الرغم من أنه ليس ممارسة شائعة في العديد من المواقع ، إلا أن خيار إنشاء أوراق أنماط طباعة قوي وجذاب (في موقعنا الخبرة - معظم محترفي الويب لا يفعلون ذلك لمجرد أن نطاق ميزانية الموقع لا يتطلب هذا العمل الإضافي تتم).
لماذا تعتبر CSS مهمة؟
تعد CSS واحدة من أقوى الأدوات التي يمكن لمصمم الويب تعلمها لأنه باستخدامها يمكنك التأثير على المظهر المرئي الكامل لموقع الويب. يمكن تحديث أوراق الأنماط المكتوبة جيدًا بسرعة والسماح للمواقع بتغيير ما تم تحديده حسب الأولوية بصريًا على الشاشة ، والتي بدورها تُظهر القيمة والتركيز للزوار ، دون الحاجة إلى إجراء أي تغييرات على الأساسية ترميز HTML.
التحدي الرئيسي في CSS هو أن هناك الكثير لنتعلمه - ومع تغير المتصفحات كل يوم ، ما يعمل بشكل جيد اليوم قد لا يكون له معنى غدًا حيث يتم دعم الأنماط الجديدة وإسقاط البعض الآخر أو فقدانه لسبب واحد أو اخر.
منحنى التعلم CSS يستحق كل هذا العناء
نظرًا لأن CSS يمكن أن تتالي وتجمع ، مع الأخذ في الاعتبار كيف يمكن للمتصفحات المختلفة تفسير وتنفيذ التوجيهات بشكل مختلف ، يمكن أن يكون تعلم CSS أكثر صعوبة من تعلم HTML العادي. تتغير CSS أيضًا في المتصفحات بطريقة لا تتغير بها HTML بالفعل. بمجرد أن تبدأ في استخدام CSS ، سترى أن تسخير قوة أوراق الأنماط سيمنحك مرونة لا تصدق في كيفية تخطيط صفحات الويب وتحديد شكلها ومظهرها. على طول الطريق ، ستجمع "حقيبة من الحيل" من الأساليب والأساليب التي نجحت في تحقيقها في الماضي والتي يمكنك الرجوع إليها مرة أخرى كما تفعل بناء صفحات ويب جديدة فى المستقبل.