أهم فوائد أوراق الأنماط المتتالية

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

  • الارتباط بعنصر LINK
  • الاستيراد باستخدام الأمرimport

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

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

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

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

instagram viewer

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

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

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

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

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

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

كما هو الحال مع كل الآخرين CSS، صيغة القاعدة هي:

المحدد {الخاصية: القيمة؛ }

تتم كتابة هذه القواعد في ملف نصي بالملحق.

.css
. على سبيل المثال ، يمكنك تسمية ورقة الأنماط الخاصة بك.
Styles.css. 

ربط مستندات CSS

لربط ورقة أنماط ، يمكنك استخدام عنصر LINK. هذا له سمات rel و href. تخبر السمة rel المتصفح بما تقوم بربطه (في هذه الحالة ورقة أنماط) وتحمل السمة href المسار إلى ملف CSS.

يوجد أيضًا نوع سمة اختياري يمكنك استخدامه لتحديد نوع MIME للمستند المرتبط. هذا ليس مطلوبًا في HTML5 ، ولكن يجب استخدامه في مستندات HTML 4.

إليك الكود الذي ستستخدمه لربط ورقة أنماط CSS تسمى styles.css:

وستكتب في مستند HTML 4:

اكتب = "text / css">

استيراد أوراق أنماط CSS

يتم وضع أوراق الأنماط المستوردة داخل عنصر النمط. يمكنك بعد ذلك استخدام الأنماط المضمنة أيضًا إذا أردت. يمكنك أيضًا تضمين الأنماط المدرجة داخل أوراق الأنماط المرتبطة. داخل مستند STYLE أو CSS ، اكتب:

import url (' http://www.yoursite.com/styles.css');