ولكن أثناء الترميز ، من الصعب تضمين نفس خصائص CSS لكل صفحة ويب على حدة. لذلك ، من الضروري استخدام حل يمكن من خلاله إنشاء ورقة أنماط واحدة ثم الوصول إليها من خلال ملفات متعددة بسهولة.
ما هي قاعدةimport في CSS؟
أفضل طريقة لتضمين خصائص نمط CSS هي استخدام قاعدةimport. يتم استخدامimport لاستيراد أو الوصول إلى ورقة أنماط CSS من ورقة أنماط أخرى. هذا يقلل من جهد المطور حيث يتم تنفيذ جميع الخصائص المضافة في ورقة الأنماط المستوردة مباشرة بمجرد كتابةimport ثم الاسم الدقيق لورقة الأنماط.
بناء جملةimport Rule
فيما يلي بناء الجملة لإضافة قاعدةimport للوصول إلى ورقة أنماط من ورقة أنماط أخرى:
@يستورد 'stylesheetname.css' ؛
يمكن أيضًا إضافة قاعدةimport بالطريقة التالية:
@يستورد عنوان url ( styleheetname.css ) ؛
ببساطة ، أضف اسم ملف ورقة أنماط CSS إما بفواصل مقلوبة أو بين قوسين دائريين بعلامة ' عنوان url 'بعد كتابة' @يستورد '.
مثال: إضافةimport Rule
لفهم كيفية عمل قاعدةimport ، نكتب مقتطف رمز بسيط:
< h1 > هذا نص بسيط! < / h1 >في مقتطف الشفرة أعلاه ، يوجد عنوان
مع جملة بسيطة من سطر واحد مضافة في مستند HTML. هذا الكود البسيط سيولد المخرجات التالية:
يتيح إنشاء ورقة أنماط لتحديد بعض خصائص CSS التي يمكن استيرادها لاحقًا من الملف الذي يتم من خلاله إنشاء واجهة صفحة الويب أعلاه. نقوم بإنشاء ملف آخر وتسميته ' ورقة الأنماط 'مع تحديد نوع الملف كـ' المغلق '، وأضف ببساطة بعض الخصائص لـ
العنوان والجسم: h1 {
لون : منتصف الليل الأزرق ؛
لون الخلفية : اللازوردية ؛
محاذاة النص : مركز ؛
}
جسم {
لون الخلفية : lightblue ؛
}
للوصول إلى ملف ورقة الأنماط الذي يحتوي على خصائص النمط للعنوان والجسم
، نحتاج ببساطة إلى إضافة قاعدةimport في أي من ملفات CSS حيث يكون هذا التصميم مطلوبًا.
ستؤدي إضافة قاعدة استيراد بسيطة فقط إلى تنفيذ جميع خصائص النمط إلى واجهة صفحة الويب دون الحاجة إلى كتابة الخصائص بشكل منفصل في كل صفحة ويب.
لذلك ، يجب كتابة قاعدة الاستيراد على النحو التالي:
@يستورد 'stylesheet.css' ؛إضافةimport القاعدة بكتابة ' عنوان url 'واسم ملف CSS في الأقواس المستديرة سيعرض أيضًا نفس النتائج:
@يستورد عنوان url ( styleheet.css ) ؛الخصائص المحددة في ' ورقة الأنماط 'ملف يتم تنفيذه بمجرد إضافة' @يستورد حكم لها:
هذه هي أسهل طريقة لتضمين خصائص CSS في ملف دون بذل أي جهود إضافية.
فوائدimport Rule في CSS
تُستخدم قاعدةimport بشكل شائع للأسباب التالية:
- يؤدي استخدامimport Rule إلى تقليل الوقت والجهد الذي يبذله المطور لأنه يقوم بتنفيذ جميع خصائص ورقة أنماط معينة بمجرد كتابة اسم تلك الورقة بعدimport.
- في تطبيقات الويب الكبيرة والمعقدة ، تثبت قاعدةimport أنها مفيدة للغاية حيث يمكن تنفيذ نفس خصائص النمط في ملفات متعددة فقط عن طريق إضافة اسم ملف ورقة الأنماط.
- يمكن تخزين عناصر ورقة الأنماط مثل الرؤوس والتذييلات والجسم وما إلى ذلك في ملفات ورقة أنماط منفصلة ، وبعد ذلك باستخدام قاعدة الاستيراد @ ، يمكن استيراد أي من الأنماط المطلوبة دون الحاجة إلى إضافة خصائص نمط أو إزالتها أو التعليق عليها من ملف.
يلخص هذا استخدام قاعدة الاستيراد @ ويشرح كيف تُعتبر هذه القاعدة أفضل طريقة لتضمين CSS.
خاتمة
يمكن استيراد ورقة أنماط CSS أو الوصول إليها مباشرةً من ورقة أنماط أخرى ويتم تنفيذ جميع الخصائص الموجودة في ورقة الأنماط المستوردة مباشرةً على صفحة الويب الخاصة بالملف حيث تم استيرادها. ليست هناك حاجة لكتابة كل خاصية CSS بشكل منفصل لكل واجهة صفحة ويب. كل ما يتطلبه الأمر هو إضافة اسم ملف ورقة أنماط CSS باستخدامimport. وتعتبر هذه أفضل طريقة لإضافة CSS.