برمجة أجاكس- الدرس الثالث - لغة تنسيق الوثائق CSS

Cascading Style Sheet : هي العنصر الأهم في عملية بناء التصميم (Design) في صفحات الوب و يمكن اعتبارها القاعدة التي يبنى عليها أي تصميم مهما كانت الأدوات الرسومية التي يستخدمها و تبرز أهمية CSS في عملية إدارج العناصر في صفحة الوب و تموضعها و إضافة كافة التنسيقات إلى هذه العناصر و هنا تكمن أهمية هذه التقنية و هي الفصل بين المحتوى و التنسيق.
الطريقة الأفضل لإضافة CSS إلى الموقع هي عن طريق ملف منفصل تماما عن الصفحة و من الأخطاء الشائعة هي محاولة بعض المبرمجين إضافة أكواد CSS داخل صفحة الوب لحل مشكلة ما لم يمكن حلها ضمن الملف الأساسي و هو شيء يعبر عن الضعف... لا يجب أبدا كتابة أكواد CSS ضمن صفحة الوب لذلك نقوم دائما باستيراد التصميم عن طريق الوسم <LINK REL="StyleSheet" HREF="style.css" TYPE="text/css" >
و يمكن تقسيم ملف الCSS إلى عدة ملفات من أجل سهولة إدارة التصميم و لكن يفضل دائماً أن يتم تضمين ملف واحد داخل الصفحة و هو الملف الذي يحوي كافة الملفات الأخرى و من أجل أن نضمن ملف CSS ضمن ملف آخر نستخدم العبارة @import
و بعد ربط الملفات نمرر الملف الذي يحوي جميع الملفات إلى الصفحة.
على كلن هناك مجموعة من الأمور التي ينبغي معرفتها في CSS و هي:
1- تنسيق الوسوم.
2- إضافة المعرفات. id # and . class
3-تقسيم الصفحة إلى مناطق أو ما يعرف بعملية الـ Layout .

عند التصميم بـ CSS يتم اعتبار أي وسم في لغة HTML و خاصة الوسم div كصناديق boxes ثم يتم تغيير خصائص هذا الصندوق و إدراجه في الصفحة.
و بالتالي تنحصر مهمتنا في إعداد كل صندوق منها.
أولاً:تنسيق الوسوم:
يمكن تنسيق أي وسم في HTML بشكل مباشر عن طريق إضافته إلى ملف CSS متبوعاً بقوسين ثم تنسيقه من حيث اللون(color),العرض(width),الطول(height),الهامش(margin),الحشوة(padding) بالإضافة لخصائص أخرى أكثر تفصيلاً.
ملاحظة: المقصود بالهامش أي المسافة التي تفصل العنصر (الصندوق) عن العناصر الأخرى (الصناديق الأخرى) و ذلك بكافة الاتجاهات (أعلى أسفل يمين يسار)
و المقصود بالحشوة: المسافة التي تفصل ما يحويه العنصر (سواءاً عناصر أخرى أو حروف او صورة أو فيديو فلاش) عن حدوده (هل محتوى الصندوق بعيد عن حوافه أو أن الصندوق ممتلىء تماماً...).
ثانياً: إضافة المعرفات:
أي نغلف مجموعة من الخصائص تحت اسم معين كأن نقول أن تنسيق الترويسة له مجموعة من الخصائص اسمها #header ثم نعطي هذا الاسم إلى صندوق الترويسة div و بالتالي بإمكاننا استخدام الوسم div قدر ما نشاء في الصفحة و في كل مرة نعطيعه اسم احدى المعرفات عن طريق الواصفة id اي مثلا
<DIV id=header > و في قسم المحتوى <div id=content> و في التذييل <div id=footer> لاحظ أنه تصبح صفحة HTML عبارة عن مجموعة صناديق div و كل ما علينا عمله هو تنسيق هذه العناصر عبر إضافة معرفات لها في ملف CSS ثم ملؤها بالمحتوى (أي بعناصر html أو صناديق أخرى أو كتابات أو صور).
ثالثاً:تقسيم الصفحة:
كما ذكرنا يجب أن تبدأ عملية تصميم أي موقع بتخطيطه أولاً لمعرفة القالب العام الذي ستضاف إليه العناصر و بعد تخطيطه (على ورقة مثلاً) تبدأ عملية نقل التصميم إلى الـ CSS عبر إنشاء صناديق و إعطاء كل صندوق خاصية الموضع position و الطفو float و أرجو دراسة عمل الخاصيتين لأنه هناك الكثير عنهما و السؤال عن أي شيء غامض...
لا بد من تطبيق مثال عملي من أجل التعامل مع CSS و المشاكل التي تظهر فيها حتى نكون قادرين على تعديل ملفات CSS المعقدة بشكل سليم.
هناك أيضاً من الأمور الهامة في اللغة (المعرفات المتداخلة) أي أن عمل معرف ما يتوقف على وجوده ضمن معرف آخر (أترك اكتشاف أهمية المعرفات المتداخلة لكم).
ملاحظة هامة:الدرس ليس دليل استخدام أو مرجع في CSS إنما محاولة لتوضيح كافة الأمور التي تحتاجها لتحترف اللغة و تبيين للطرق المستخدمة فيها
روابط هامة منتقاة بدقة يرجى الاطلاع عليها:
http://www.csstutorial.net
http://css.maxdesign.com.au
http://www.westciv.com/style_master/academy/css_tutorial/index.html

يرجى تحميل هذا الكتاب www.mediafire.com/?3t4phrgb4hog5ke