الدرس الثاني عشر: التصميم (CSS)


أليس من الجميل أن تتمكن من إعطاء صفحتك التصميم الذي تستحق؟

بالتأكيد، لكن كيف؟


لكي تعطي صفحتك تصميماً يجب أن تستخدم تقنية (CSS)، في هذا الدرس ستجد مقدمة قصيرة إلى CSS، لكن بعد ذلك يمكنك تعلم كل شيء حول CSS بتفاصيلها في [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]. لذلك اعتبر هذا الدرس مجرد فاتحة شهية.

هي النصف الآخر للغة HTML، ففي كتابة الصفحات، كل واحدة لها وظيفة محددة: تهتم بالجوانب الصعبة "هيكلية الصفحة ومحتوياتها" بينما CSS تعطي لمسة أنيقة (التصميم).

كما رأيت [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]، يمكن إضافة CSS من خلال خاصية، فمثلاً يمكنك أن تضع نوع الخط وحجمه:

مثال 1:

style="font-size:20px;">This is typed in size 20

style="font-family:courier;">This is typed in Courier

style="font-size:20px; font-family:courier;">This is typed in Courier size 20

سيظهر بهذا الشكل في متصفحك


This is typed in size 20

This is typed in Courier

This is typed in Courier size 20



في المثال أعلاه اسخدمنا خاصية style لتحديد نوع الخط الذي نريد استخدامه من خلال أمر font-family) وحددنا حجم الخط من خلال أمر font-size)، لاحظ كيف أن الفقرة الأخيرة استخدامنا الأمرين معاً وقمنا بالفصل بينمها من خلال فاصلة منقوطة.

يبدو أن هذا يحتاج إلى الكثير من العمل؟


إحدى أذكى خصائص CSS أنها تمكنك من إدارة التصميم من خلال مكان واحد، فبدلاً من اسخدام خاصية style لكل وسم، يمكن أن تخبر المتصفح مرة واحدة كيف يجب أن يعرض التصميم لكل النصوص في الصفحة:

مثال 2:

My first CSS page

Welcome to my first CSS page

Here you can see how CSS works

• [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  

في المثال أعلاه وضعت في رأس الصفحة، ولذلك يمكن تطبيقها على كل الصفحة، لفعل ذلك عليك فقط أن تضع الوسم