أوراق الأنماط المتتالية (كس) هي واحدة من الأدوات الرئيسية التي تسمح لك لتعيين مظهر وهيكل صفحات الويب. باستخدام كس يسمح لك لفصل تصميم ومحتوى الموقع ، مما يجعلها أكثر مرونة ويمكن التحكم فيها. ومع ذلك ، لكي تعمل كس بشكل صحيح على موقعك ، تحتاج إلى استيراده بشكل صحيح.
الخطوة الأولى هي إنشاء ملف كس. يمكنك إنشاء باستخدام أي محرر نصوص (على سبيل المثال ، المفكرة أو نص سامية) وحفظ الملف مع .تمديد المغلق. من المهم ملاحظة أن اسم الملف يجب ألا يحتوي على مسافات أو أحرف خاصة.
بعد إنشاء ملف كس ، يجب تحديد استيراده على موقعك. للقيام بذلك ، يمكنك استخدام العلامة مع السمة ريل="ورقة الأنماط". تحدد السمة هريف المسار إلى ملف كس.
على سبيل المثال ، إذا كان ملف كس الخاص بك يسمى النمط.إذا كان المغلق موجودا في نفس المجلد مثل صفحة الويب الخاصة بك ، فسيبدو الاستيراد كما يلي:
بعد تحديد استيراد ملف كس ، سيتم تطبيق أنماطه على صفحة الويب الخاصة بك. يمكنك أيضا استيراد ملفات كس متعددة ببساطة عن طريق تحديد مساراتها في علامات مختلفة. في هذه الحالة ، سيتم تطبيق الأنماط بالترتيب الذي يتم به تحديد الملفات.
- التحضير لاستيراد كس
- اختيار تنسيقات الملفات
- هيكل المغلق
- تحديد مسار ملفات كس المستوردة
- باستخدام ملف كس خارجي
- باستخدام رمز كس المضمنة
- باستخدام التصميم داخل علامات هتمل
- الجمع بين طرق استيراد كس المختلفة
- التحقق من صحة استيراد كس
- سؤال وجواب
- كيف يمكنني استيراد كس إلى موقع على شبكة الانترنت بشكل صحيح?
- هل من الممكن استيراد ملفات كس متعددة إلى موقع على شبكة الانترنت?
- كيف يمكنني تحديد المسار إلى ملف كس بشكل صحيح عند الاستيراد?
- هل هناك أي طرق أخرى لاستيراد المغلق إلى موقع على شبكة الانترنت?
التحضير لاستيراد كس
قبل البدء في استيراد كس إلى موقعك ، تحتاج إلى إكمال عدة خطوات تحضيرية:
- تحديد هيكل وتصميم موقع الويب الخاص بك. بادئ ذي بدء ، حدد النمط والتصميم الذي تريد استخدامه على موقع الويب الخاص بك. سيساعدك هذا في تحديد كس المناسب وتنظيم استيراده.
- إنشاء ملف كس منفصل. من المستحسن إنشاء ملف منفصل يحتوي على كل رمز كس الخاص بك. سيساعدك هذا الأسلوب في العثور على الأنماط وتحريرها بسهولة في المستقبل ، بالإضافة إلى جعل التعليمات البرمجية أكثر تنظيما.
- تعيين التعليقات الصحيحة. إضافة تعليقات إلى رمز كس الخاص بك سوف تساعدك على فهم أفضل الأنماط التي تتعلق أي عناصر الموقع. بالإضافة إلى ذلك ، ستساعد التعليقات المطورين الآخرين على التنقل بسرعة في التعليمات البرمجية الخاصة بك وإجراء التغييرات اللازمة.
- احذف الرمز غير الضروري. قبل استيراد كس إلى موقعك ، يوصى بإزالة أي رمز غير ضروري من ملف النمط. بهذه الطريقة يمكنك تقليل حجم الملف وتحسين أداء موقعك.
- تحقق من توافق ملف كس. قبل الاستيراد ، فمن المستحسن أيضا للتحقق من توافق ملف كس الخاص بك مع مختلف المتصفحات والأجهزة. تأكد من أن الأنماط تبدو صحيحة على جميع الأنظمة الأساسية لتزويد المستخدم بأفضل تجربة ممكنة.
بعد الانتهاء من كل هذه الخطوات ، ستكون جاهزا لاستيراد كس الخاص بك إلى موقعك وتطبيق الأنماط على العناصر المناسبة.
اختيار تنسيقات الملفات
عند استيراد كس إلى موقعك ، من المهم اختيار تنسيق الملف المناسب. توفر التنسيقات المختلفة مزايا مختلفة وقد تؤثر على سرعة التحميل وجودة عرض الأنماط.
فيما يلي بعض تنسيقات ملفات كس الشائعة:
- كس هو تنسيق كلاسيكي مفهوم لجميع المتصفحات. يمكن إنشاؤه وتحريره باستخدام أي محرر نصوص.
- سس هو الشكل الذي يوفر ميزات إضافية مثل المتغيرات والأنماط المتداخلة ، و ميكسينز. فإنه يتطلب تجميع في كس العادية قبل الاستخدام.
- أقل-على غرار سس ، أقل يوفر وظائف إضافية ، ولكن لديه بناء جملة مختلفة قليلا. مثل سس ، أقل يتطلب تجميع في كس العادية.
عند اختيار تنسيق كس ، والنظر في قدرات ومتطلبات المشروع الخاص بك. إذا كنت ترغب في استخدام الميزات المتقدمة مثل المتغيرات والأنماط المتداخلة ، سس أو أقل سيكون خيارا جيدا. إذا كنت لا تحتاج إلى هذه الميزات الإضافية ، يمكنك اختيار كس العادية.
لاحظ أن بعض صيغ كس تتطلب تجميع قبل الاستخدام ، لذلك قد تحتاج إلى أداة قادرة على القيام بهذه المهمة ، مثل ساس أو أقل مترجم.
هيكل المغلق
لإنشاء كود كس منظم ومنظم على موقعك ، يوصى باتباع مبادئ ومنهجيات معينة. سيساعد هذا في تحسين قابلية القراءة وقابلية الصيانة وقابلية التوسع في التعليمات البرمجية الخاصة بك ، فضلا عن تسهيل صيانتها وتوسيعها.
فيما يلي بعض المبادئ الأساسية لهيكلة كس:
- استخدام العمارة وحدات: كسر رمز كس الخاص بك إلى وحدات منفصلة أو مكونات ، كل منها هو المسؤول عن وظيفة معينة أو منطقة من موقعك. هذا سيجعل من السهل العثور على الأنماط الضرورية وتغييرها في التطوير الإضافي للمشروع.
- استخدام تسمية الفئة: إعطاء أسماء واضحة ومنطقية للفئات في كس الخاص بك. استخدم الأسماء الدلالية التي تعكس وظيفة العنصر والغرض منه في الصفحة. سيساعدك هذا أنت والمطورين الآخرين على فهم النمط الذي يتم تطبيقه على العناصر.
- استخدام التعشيش ومساحة الاسم: استخدم التداخل في كس لتجميع الأنماط المرتبطة بكتلة أو عنصر معين في الصفحة. سيؤدي ذلك إلى تحسين إمكانية القراءة وتسهيل فهم التعليمات البرمجية الخاصة بك وهيكلتها.
- استخدام التعليقات: إضافة تعليقات إلى رمز كس الخاص بك لوصف هيكلها ، وظائف ، أو الميزات. سيساعدك هذا أنت والمطورين الآخرين على فهم التعليمات البرمجية الخاصة بك بشكل أفضل ، فضلا عن تسهيل تغييرها وصيانتها في المستقبل.
- استخدام المحددات: استخدم محددات كس لتحديد عناصر معينة في الصفحة التي تريد تطبيق أنماط معينة عليها. تجنب استخدام محددات عامة جدا لتجنب الأنماط والتعارضات غير المتوقعة في التعليمات البرمجية الخاصة بك.
بعد هذه المبادئ والمنهجيات ، سوف تكون قادرة على إنشاء رمز كس نظيفة ومنظمة من شأنها أن تكون قابلة للقراءة بسهولة والصيانة ، وكذلك قابلة للتطوير بسهولة في تطوير المشروع الخاص بك.
تحديد مسار ملفات كس المستوردة
لاستيراد ملف كس إلى موقعك ، تحتاج إلى تحديد المسار إلى هذا الملف. يشير المسار إلى موقع الملف بالنسبة إلى المجلد الجذر لموقعك.
إذا كان ملف كس موجودا في نفس المجلد مثل ملف هتمل ، فسيتم الإشارة إلى المسار ببساطة باسم الملف:
إذا كان ملف كس في مجلد فرعي ، ثم يشار إلى اسم المجلد الفرعي في المسار ، يتم فصل المتزلجون من اليسار إلى اليمين بواسطة شرطة مائلة:
وبالتالي ، نشير إلى أن ملف كس يسمى "الأنماط.كس "ويقع في مجلد" كس " ، وهو في نفس المجلد مثل ملف هتمل.
إذا كان ملف كس موجودا في المجلد الأصل ، فسيتم الإشارة إلى نقطتين وشرطة مائلة في المسار لترتفع مستوى واحد:
وهذا يعني أن ملف كس موجود في المجلد أعلاه (المجلد الأصل) بالنسبة إلى ملف هتمل ، واسمه هو أيضا "أنماط.المغلق".
عند تحديد مسار ملف كس المستوردة ، فإنه يستحق أيضا النظر في أن البحث عن الملفات حساسة لحالة الأحرف ، لذلك فمن الصحيح لتحديد الإملاء الدقيق لاسم الملف (حساسة لحالة الأحرف).
للتحقق من تحديد المسار بشكل صحيح ، يمكنك استخدام أداة مطور المتصفح ومعرفة ما إذا كان يتم تحميل ملف كس دون أخطاء.
باستخدام ملف كس خارجي
يمكنك استخدام ملف كس خارجي لتنظيم الأنماط على موقع الويب الخاص بك. يحتوي ملف كس الخارجي على مجموعة من القواعد التي تحدد مظهر العناصر على موقعك.
.
دعونا ننظر إلى مثال بسيط:
- إنشاء ملف جديد مع التمديد.كس ، على سبيل المثال الأنماط.المغلق.
- داخل الملف ، حدد قواعد النمط للعناصر المحددة على موقعك. على سبيل المثال ، يمكنك تحديد لون الخلفية للجميع ح1:
ح1 رؤوس{
لون الخلفية: أصفر;
}
- وثيقة أتش تي أم أل الخاصة بك. حدد السمة ريل مع قيمة ورقة الأنماط والسمة هريف مع المسار إلى ملف كس الخاص بك:
- حفظ وتشغيل ملف هتمل الخاص بك في متصفح الويب. سيتم الآن تطبيق الأنماط من ملف كس الخارجي على جميع العناصر ذات الصلة على موقع الويب الخاص بك.
باستخدام ملف كس خارجي يجعل من السهل لتنظيم الأنماط على موقع الويب الخاص بك وضمان إعادة استخدامها في وثائق هتمل مختلفة.
باستخدام رمز كس المضمنة
إذا كنت بحاجة إلى تطبيق أنماط على العناصر الفردية على الصفحة ، يمكنك استخدام رمز كس المدمج. يتم تضمين رمز كس المضمنة في علامة ووضعها مباشرة داخل العلامة من وثيقة هتمل الخاص بك.
هنا مثال على استخدام رمز كس جزءا لا يتجزأ من:
موقعي
هذه فقرة عادية من النص.
تحتوي هذه الفقرة على مجموعة فئات" تمييز " ، ويتم تطبيق الأنماط ذات الخصائص المحددة عليها.
في هذا المثال ، استخدمنا رمز كس المضمن لتطبيق الأنماط على العنصر
والنتيجة هي القائمة التالية:
- الفقرة 1
- الفقرة 2
- الفقرة 3
العلامات