الطريقة الصحيحة لكتابة أكواد CSS داخل مدونات بلوجر

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

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

الطريقة الأولى: إدراج ملف CSS مستضاف داخل الوسوم

وهو يكون عبارة عن ملف نصى عادى يحتوى على أكواد CSS بالتنسيق المطلوب وحفظه بإمتداد " CSS." ثم رفعه على إستضافة الموقع ، إذا كان الموقع ليس لديه إستضافة كمدونات بلوجر يمكن رفعه على إستضافة خارجية مثل Google drive أو Dropbox تابع الشرح التالى:

كيفية إستخدام GitHub لإستضافة ملفات CSS 
شرح إستخدام Dropbox لإستضافة ملفات CSS

بعد رفع الملفات يمكن الحصول على رابط مباشر لملف Css

يمكن إستخدام الكود التالى مع إستبدال كلمة mystyle.css بالرابط المباشر لملف CSS 

mystyle.css">

يضاف هذا الكود داخل القالب HTML فى منطقة الهيدر بعد الوسوم 

الطريقة الثانية: كتابة كود CSS مباشرة داخل Html 

غالبًا تستخدم هذه الطريقة فى المنصات التى لاتدعم إستضافة الملفات مثل منصة بلوجر (تابع كيفية حل هذه المشكلة ) ...لذلك تكتب أكواد Css فى القالب قبل الوسوم هكذا:

هنا تكتب أكواد CSS

]]>

• أما إذا كانت صفحة Html لا تحتوى على الوسوم فيجب إحاطة الكود بالوسوم ويمكن أن تستخدم لتنسيق أحد الإضافات المستخدمة فى العمود الجانبى للموقع و تضاف إلى مدونة بلوجر عبر إضافة أداة Html من لوحة التخطيط ثم إضافة كود Css قبل كود Html الخاص بالإضافة المستخدمة.

<style type="text/css">

Add CSS code here

الطريقة الثالثة :  إستخدام import@

وهى غالبًا تستخدم فى القوالب المتجاوبة لإعطاء تنسيق معين عند تصفح الموقع عبر الجوال كإخفاء أو اظهار الادوات على اصدار الجوال وتكتب كالتالى :

يمكن رفع ملف Css بإستضافة خارجية وإستخدام الرابط المباشر بدلا من كلمة style.css بالكود التالى:

@import url(style.css);

• يضاف هذا الكود داخل القالب HTML فى منطقة الهيدر بعد الوسوم 
• يجب مراعاة إحاطة الكود بالوسوم   إذا كان هذا الكود لايستخدم فى منطقة
• يمكن أيضًا كتابة كود 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 بالوسوم تزيد سرعة تصفح الموقع.

أما بالنسبة لإستخدام الوسوم import@ فيمكن أن يستخدم عن التنسيق المتجاوب للشاشات المتعددة ومن عيوبه هو أنه لا يدعم المتصفحات ذات الإصدار القديم.

أما الطريقتين الآخرتين سواء بإستخدام الوسوم  أو بإستخدام Inline Styles فيفضل إستخدامها فى أضيق الحدود لأنها تؤثر على جزء معين من الموقع فقط.

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا