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

احصل على الحقائق من خلال دورة CSS القصيرة هذه

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

1. الربط مع عنصر LINK
2. الاستيراد باستخدام الأمرimport
   1. <نمط>
   2. import url ('http://www.yoursite.com/styles.css')؛

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

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

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

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

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

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

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

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

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

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

كما هو الحال مع كل CSS الأخرى ، يكون بناء الجملة للقاعدة:

selector {property: value؛ }

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

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

ربط مستندات CSS

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

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

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

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

type = "text / css" >

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

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

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