كيفية بناء ورقة نمط خارجي

باستخدام CSS الموقع على نطاق واسع

مواقع الويب هي مزيج من الأسلوب والهيكل ، وعلى الويب اليوم ، من أفضل الممارسات الحفاظ على هذين الجانبين من موقع منفصل عن بعضهما البعض.

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

مزايا وعيوب أوراق الأنماط الخارجية

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

مزايا أوراق الأنماط الخارجية

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

عيوب أوراق الأنماط الخارجية

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

كيفية إنشاء ورقة نمط خارجي

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

selector {property: value؛}

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

بمجرد الحصول على مستند ورقة أنماط ، يجب ربطه بصفحات الويب الخاصة بك. ويمكن أن يتم ذلك بطريقتين:

  1. ربط
    1. لربط ورقة أنماط ، يمكنك استخدام علامة HTML. هذا له سمات rel ونوع و href . تخبر السمة rel ما تقوم بربطه (في هذه الحالة بورقة الأنماط) ، يقوم النوع بتعريف MIME-type للمستعرض ، و href هو المسار إلى ملف .css.
  2. استيراد
    1. يمكنك استخدام ورقة أنماط مستوردة داخل ورقة أنماط مستوى المستند بحيث يمكنك استيراد سمات ورقة أنماط خارجية بينما لا تفقد أي أوراق خاصة بمستند معين. أنت تسميها بطريقة مشابهة لاستدعاء ورقة أنماط مرتبطة ، فقط يجب أن يتم استدعاؤها ضمن تعريف نمط مستوى المستند. يمكنك استيراد العديد من أوراق الأنماط الخارجية التي تحتاج إليها للحفاظ على موقع الويب الخاص بك.

المقالة الأصلية لجنيفر كرينين. حرره جيريمي جيرارد في 8/8/17