الدرس الثاني: تصميم صفحات التنسيق النمطية (٢)
انظر إلى الشيفرة البرمجية بالأعلى، لديك ملفان: الأول بلغة الهتمل والثاني ملف تنسيق خارجي. في ملف الهتمل، ربطنا التنسيق بوسم الربط داخل قسم الرأس. لاحظ كيف كتبنا الوسم بدقة لتحديد اسم الملف. في أسفل الصفحة، ترى نتيجة هذا الربط في المتصفح: العنوان الرئيسي ظهر بلون أخضر، والعنوان الفرعي بلون فاتح، بينما الفقرة العادية ظهرت بلون درجات الأزرق الرقمية التي حددناها في ملف التنسيق. كل عنصر في الهتمل يأخذ خصائصه اللونية مباشرة من قاعدة التنسيق المرتبطة به.
يقوم الدرس على تنظيم مظهر صفحات الويب عبر لغة تنسيق النمطية لتتحكم في ألوان الخطوط وأحجامها وأنواعها وزخرفتها. تبنى الفكرة بإنشاء ملف تزمين أو كتابة الأنماط داخل الوسم لتغيير شكل العناصر بدقة. فمثلاً لتغيير لون عنوان رئيسي إلى الأخضر وحجمه إلى خمسين بكسل تكتب تحدد فيها العنصر ثم تفتح أقواس حاصرة وتكتب color: green; font-size: 50px; ليظهر التغيير مباشرة على المتصفح.
الفكرة الأساسية
تعتمد صفحات الويب على لغة تنسيق لتغيير مظهر النصوص والعناصر بدل الاعتماد على الشكل الافتراضي. تربط صفحة التنسيق بملف المستند لتتحكم في خصائص الخطوط مثل الحجم والعائلة والنمط والزخرفة بوضوح.
الشرح
تتكون قاعدة التنسيق من عنصر مستهدف يليه قوسان حاصران وبداخلهما الخصائص وقيمها مفصولة بفاصلة منقوطة. لتحديد حجم الخط تستخدم خاصية تتيح القياس بالبكسل أو النسبة المئوية. لعائلة الخطوط تحدد قائمة خطوط مفصولة بفواصل لضمان ظهور البديل إذا لم يكن الخط مثبتا. لنمط الخط تتحكم في جعله مائلا أو عاديا، بينما عرض الخط يجعله غامقا أو عاديا. ولزخرفة النص تضيف خطوطا أعلى أو أسفل النص أو عبره.
مثال محلول خطوة بخطوة
لتنسيق عنوان رئيسي من مستوى أول بحيث يكون لونه أخضر وحجمه خمسين بكسل وعائلته تاهوما ونمطه مائلا، اكتب الكود التالي داخل ملف التنسيق: h1 { color: green; font-size: 50px; font-family: Tahoma,sans-serif; font-style: italic; } عند تشغيل الصفحة يقرأ المتصفح القاعدة ويطبق هذه الخصائص فورا على العنوان.
أخطاء شائعة
نسيان الفاصلة المنقوطة بعد كل قيمة خصائص في لغة التنسيق. كتابة اسم عائلة الخطوط دون فصلها بفواصل صحيحة. عدم إغلاق الأقواس الحاصرة الخاصة بالقاعدة البرمجية.
سؤالان للتدريب مع الإجابة
السؤال الأول: ما الخاصية المستخدمة لتحديد عرض الخط ليكون غامقا؟ الإجابة: عرض الخط عبر الخاصية font-weight بقيمة bold. السؤال الثاني: ما قيمة زخرفة النص التي تضيف خطا أسفل النص؟ الإجابة: underline.