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