أكواد CSS
كتابة أكواد CSS داخل مدونات بلوجر بطريقة صحيحة
المتعارف عليه أن اكواد css
هى المسئولة عن تنسيق شكل صفحة الويب بالموقع أو المدونة من خلفيات وألوان
وغير ذلك من تحديد الشكل النهائى لقالب الموقع وهى توفر وقت كبير فى
التنسيق حيث أنه يمكن لملف CSS واحد ان يكون مسئول عن تنسيق عدة صفحات أو
عناصر وبالتالي عند تغيير شكل العرض فانك تحتاج لتعديل ملف واحد فقط وهذا
يعني وقت اقل وتعديل أكبر واشمل.
ولمستخدمى مدونات بلوجر توجد عدة آليات لإضافة أكواد Css فيمكن إضافتها عن
طريق تحرير القالب أو من خلال مصمم النماذج أو داخل أداة HTML أو حتى داخل
تبويب Html للمشاركة أو الصفحة ولكن ماهى الصيغة المناسبة لإدراج الكود
داخل قالب المدونة فهناك أكثر من طريقة لكتابة أكواد CSS، لذلك سأقدم فى
هذا الموضوع أفضل طريقة لكتابة هذه الأكواد ولكن بعد شرح مبسط عن الطرق
المختلفة لإدراج
أكواد
CSS داخل صفحة HTML والفرق بينهما.
الطريقة الأولى:
إدراج ملف CSS مستضاف داخل الوسوم <link>
وهو يكون عبارة عن ملف نصى عادى يحتوى على أكواد CSS بالتنسيق المطلوب
وحفظه بإمتداد " CSS." ثم رفعه على إستضافة الموقع ، إذا كان الموقع ليس
لديه إستضافة كمدون بلوجر
يمكن رفعه على إستضافة خارجية مثل Google drive أو Dropbox تابع الشرح التالى:
<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>
والآن نتعرف على أى الطرق أفضل لإستخدامها داخل مدونات بلوجر:
أما بالنسبة لإستخدام الوسوم import@ فيمكن أن يستخدم عن التنسيق المتجاوب للشاشات المتعددة ومن عيوبه هو أنه لا يدعم المتصفحات ذات الإصدار القديم.
أما الطريقتين الآخرتين سواء بإستخدام الوسوم <style> ، </style> أو بإستخدام Inline Styles فيفضل إستخدامها فى أضيق الحدود لأنها تؤثر على جزء معين من الموقع فقط.
منقول بتصرف
منقول بتصرف
0 تعليقات