بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
من المعروف أن أكواد CSS هى المسئولة عن تنسيق شكل صفحة الويب بالموقع أو المدونة من خلفيات وألوان وغير ذلك من تحديد الشكل النهائى لقالب الموقع وهى توفر وقت كبير فى التنسيق حيث أنه يمكن لملف CSS واحد ان يكون مسئول عن تنسيق عدة صفحات أو عناصر وبالتالي عند تغيير شكل العرض فانك تحتاج لتعديل ملف واحد فقط وهذا يعني وقت اقل وتعديل أكبر واشمل.
ولمستخدمى مدونات بلوجر توجد عدة آليات لإضافة أكواد Css فيمكن إضافتها عن طريق تحرير القالب أو من خلال مصمم النماذج أو داخل أداة HTML أو حتى داخل تبويب Html للمشاركة أو الصفحة ولكن ماهى الصيغة المناسبة لإدراج الكود داخل قالب المدونة فهناك أكثر من طريقة لكتابة أكواد CSS، لذلك سأقدم فى هذا الموضوع أفضل طريقة لكتابة هذه الأكواد ولكن بعد شرح مبسط عن الطرق المختلفة لإدراج أكواد CSS داخل صفحة HTML والفرق بينهما.
الطريقة الأولى: إدراج ملف CSS مستضاف داخل الوسوم <link>
وهو يكون عبارة عن ملف نصى عادى يحتوى على أكواد CSS بالتنسيق المطلوب وحفظه بإمتداد " CSS." ثم رفعه على إستضافة الموقع ، إذا كان الموقع ليس لديه إستضافة كمدونات بلوجر يمكن رفعه على إستضافة خارجية مثل Google drive أو Dropbox تابع الشرح التالى:
بعد رفع الملفات يمكن الحصول على رابط مباشر لملف Css
يمكن إستخدام الكود التالى مع إستبدال كلمة mystyle.css بالرابط المباشر لملف CSS
يمكن إستخدام الكود التالى مع إستبدال كلمة mystyle.css بالرابط المباشر لملف CSS
<link rel="stylesheet" type="text/css" href="mystyle.css">
يضاف هذا الكود داخل القالب HTML فى منطقة الهيدر بعد الوسوم <head>
الطريقة الثانية: كتابة كود CSS مباشرة داخل Html
غالبًا تستخدم هذه الطريقة فى المنصات التى لاتدعم إستضافة الملفات مثل منصة بلوجر (تابع كيفية حل هذه المشكلة ) ...لذلك تكتب أكواد Css فى القالب قبل الوسوم </head> هكذا:
<b:skin><![CDATA[هنا تكتب أكواد CSS]]></b:skin>
- أما إذا كانت صفحة Html لا تحتوى على الوسوم <head> فيجب إحاطة الكود بالوسوم <style> ، </style> ويمكن أن تستخدم لتنسيق أحد الإضافات المستخدمة فى العمود الجانبى للموقع و تضاف إلى مدونة بلوجر عبر إضافة أداة Html من لوحة التخطيط ثم إضافة كود Css قبل كود Html الخاص بالإضافة المستخدمة.
<style type="text/css">
Add CSS code here
</style>
الطريقة الثالثة : إستخدام import@
وهى غالبًا تستخدم فى القوالب المتجاوبة لإعطاء تنسيق معين عند تصفح الموقع عبر الجوال كإخفاء أو اظهار الادوات على اصدار الجوال وتكتب كالتالى :
يمكن رفع ملف Css بإستضافة خارجية وإستخدام الرابط المباشر بدلا من كلمة style.css بالكود التالى:
@import url(style.css);
- يضاف هذا الكود داخل القالب HTML فى منطقة الهيدر بعد الوسوم <head>
- يجب مراعاة إحاطة الكود بالوسوم <style> ، </style> إذا كان هذا الكود لايستخدم فى منطقة <head>
- يمكن أيضًا كتابة كود Css مباشرة بدون رفعه بإستضافة خارجية ويكون كالمثال التالى:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
الطريقة الرابعة: إستخدام Css داخل Inline Styles
وتستخدم هذه الطريقة لتنسيق جزء محدد بالصفحة مثلا تنسيق العنوان أو جزء معين من النص ، تابع المثال التالى:
<h1 style="color:blue;margin-left:30px;">العنوان</h1>
والآن نتعرف على أى الطرق أفضل لإستخدامها داخل مدونات بلوجر:
عامةً عند إستخدام ملف Css منفصل يكون أفضل ، لأنه عند تصفح الزائر للموقع لصفحة معينة فى موقعك فإنه يحتاج إلى تحميل ملف Css بالإضافة إلى Html للصفحة ولكن عند تصفح أى صفحة أخرى فى الموقع فإنه يحتاج إلى تحميل جزء Html فقط للصفحة حيث يتم تخزين ملف CSS بحيث لا تحتاج إلى تحميلها مرة أخرى. وبالتالى ربط ملف Css بالوسوم <link>تزيد سرعة تصفح الموقع.
أما بالنسبة لإستخدام الوسوم import@ فيمكن أن يستخدم عن التنسيق المتجاوب للشاشات المتعددة ومن عيوبه هو أنه لا يدعم المتصفحات ذات الإصدار القديم.
أما الطريقتين الآخرتين سواء بإستخدام الوسوم <style> ، </style> أو بإستخدام Inline Styles فيفضل إستخدامها فى أضيق الحدود لأنها تؤثر على جزء معين من الموقع فقط.
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
بقلم Dr.Rasha Omran
مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة
جميل
ردحذفشكرا لك
ردحذف