HOME   

المنتدى - دروس css - دروس البي اتش بي - قوالب CSS - دروس السيرفر - العاب فلاشيه - برامج مهمه جدا للويندوز - برنامك فك تشفير مع الشرح - 

 

مكتبة دروس css

كاتب الدرس :كتوم ca2oom

  لمشاهدة مدونة كتوم ودروس css اضغط هنا

الدروس  1  2  3  4  5  6  7 8 9 10 11 12 13 14 15 16 17 18 19 20  21 22 23 24 25  

الدرس الاول

مقدمه عن ال css

CSS اختصار للجملة Cascading Style Sheets والتي معناها باللغة العربية صفحات الأنماط الإنسابية وهي "ليست لغه برمجه" ولكنها تقنية تتهتم بتحديد شكل وتصميم المواقع ، وينطبق ذلك على الألوان والخطوط والصور والخلفيات التى تستخدم فى الصفحات ، بمرونة وسهولة تامه.

وهذه التقنيه تساعدك جدا على إنشاء وإدارة صفحات المواقع بشكل فريد يتميز عن من يعتمد في التصميم على html التى تسبب مشكله وهى ان الموقع لا ينفصل عن محتوياته ..

وتعال نتخيل سوياً على أنك قبلت تنفيذ موقع متوسط الحجم لأحد العملاء ، و بطبيعة الحال تحتاج لبرمجة ما يزيد عن العشر صفحات ـ وفرضاً أيضاً أنك انتهيت من الموقع بعد عمل متواصل ـ وعرضت الموقع على العميل وتعتقد أنه أصبح جاهز للاستخدام الآن . ماذا لو فاجأك العميل بطلب تغيير حجم الخط من القيمة "2" إلى القيمة "3" مثلاً هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من فقراتها لتغير هذه القيمة!

ماذا لو كان الموقع مكوناً من 50 صفحة ؟!
و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟

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

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

فوائد إستخدام تقنية CSS

كيف يتعرف متصفح الإنترنت على هذه التقنية ؟

1- Browser Defaults
..في الحقيقة إننا نستخدم نوعاً من أنواع الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا المثال:

لاحظ فلم يتم تحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة بإستخدام المتصفح ستجد تنسيقاً معيناً لنوع الخط و حجمه و لونه ـ وهذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات الافتراضية للعرض لدى الزائر.

هنا كأننا نقول بأن المتصفح يحتفظ بملف يحتوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد التنسيق بشكل واضح في صفحتك او موقعك .
وتقنية css تعتمد نفس المبدأ . وتقريباً لن تكتب أي تنسيق في الصفحة الأساسية لكنك ستحدد في ملف خارجي واحد التنسيق مفصلاً ـ وبعدها يربط ذلك الملف بالموقع حتى يأخذ المتصفح تنسيق الصفحات منه دون الاعتماد على إفتراضياته هو ويطبق على جميع الصفحات مما يضمن ظهور الموقع بنفس الشكل على كل الأجهزة.

طرق تعريف CSS داخل الصفحات

2- External
ملف منفصل بإمتداد css تسمية بإي أسم يحتوى على كافة تنسيقات الموقع ومن ثم تربط به جميع صفحات الموقع كما في المثال التالي:

 

 

 

 

الوسم <link /> يكتب فيه مسار ملف css سواء كان بمجلد خاص أو بنفس مكان الصفحات ومن ثم يوضع الكود بالكامل برأس كل الصفحات بين الوسم <head

 

وهذا الملف المنفصل المربوط به الصفحات تكتب فيه أكواد css مباشرة داخل ملف txt ومن ثم تحفظ بإمتداد css. كما ذكرنا ولو شاهدنا هذا الملف ستجدة يحتوى على الأكواد فقط كالتال

 

 

3- Internal
فيها يتم إضافة جميع قيم css برأس الصفحه بين وسمين <style> لتعريفهم على المتصفح ومن ثم توضع ايضا داخل برأس الصفحة بين الوسم <head> كما في الحالة السابقة ومنه تطبق هذه الأوامر على جميع فقرات الصفحه

لوسم <style> وهو الوسم الذى من خلالة يتعرف المتصفح على قيم css المختلفة المكتوبة بداخله ويكتب بهذا الشكل برأس الصفحة

4- in-line
وفيها تطبق أوامر الـ css مباشرة داخل اوسمه html كما بالمثال التالي:

- في رأيك أي الطرق أفضل لتطبيق css داخل المتصفحات