موقع تصميم معايير الويب، الطريقة الرئيسية هي استخدام XHTML+CSS، ورقة أنماط CSS ضرورية. لإنشاء موقع ويب يتوافق مع معايير الويب، لا يمكنك تصميم صفحات جميلة دون معرفة CSS.
في الواقع، يجب تنفيذ جميع جوانب العرض باستخدام CSS. لقد اعتدنا استخدام الجداول لتحديد الموضع والتخطيط، ولكن يتعين علينا الآن استخدام DIV لتحديد الموضع والتخطيط. هذا تغيير في طريقة التفكير، وهو أمر غير مريح بعض الشيء في البداية، ومن أجل الاستمتاع بـ "الفوائد" التي تجلبها المعايير، فإن الأمر يستحق التخلي عن بعض الممارسات التقليدية القديمة.
استدعاء أوراق الأنماط خارجيًا
في الماضي، كنا نستخدم عادةً أوراق الأنماط بطريقتين:
طريقة الصفحة المضمنة: تتم كتابة ورقة الأنماط مباشرة في منطقة الرأس لرمز الصفحة. شيء من هذا القبيل:
وفيما يلي المحتوى المقتبس: <style type="text/css"> <!-- body { الخلفية: أبيض اللون: أسود } --> </style> |
طريقة الاستدعاء الخارجي: اكتب ورقة الأنماط في ملف .css منفصل، ثم اتصل بها باستخدام رمز مشابه لما يلي في منطقة الرأس بالصفحة.
وفيما يلي المحتوى المقتبس: <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /> |
في التصميم المتوافق مع معايير الويب، نستخدم طريقة الاتصال الخارجي والفوائد واضحة بذاتها. يمكنك تغيير نمط الصفحة دون تعديل الصفحة وتعديل ملف .css فقط. إذا كانت جميع الصفحات تستدعي نفس ملف ورقة الأنماط، فإن تغيير ملف ورقة أنماط واحد يمكن أن يؤدي إلى تغيير أنماط جميع الملفات.
استخدم أسلوب الجدول المزدوج لاستدعاء ورقة الأنماط لعرض التعليمات البرمجية الأصلية لبعض المواقع المتوافقة مع المعايير. قد ترى الجملتين التاليتين حيث يتم استدعاء ورقة الأنماط:
وفيما يلي المحتوى المقتبس: <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /> <style type="text/css" media="all"> @import url(css/style01.css );</style> |
لماذا أكتبها مرتين؟
في الواقع، في الظروف العادية، يكفي استخدام طريقة الارتباط الخارجي (أي الجملة الأولى). إن استدعاء الجدول المزدوج الذي أستخدمه هنا هو مجرد مثال. يتم استخدام الأمر "@import" لإدخال ورقة الأنماط. الأمر "@import" غير صالح في متصفحات Netscape 4.0. بمعنى آخر، عندما تريد إخفاء تأثيرات معينة في متصفح Netscape 4.0 وعرضها في الإصدار 4.0 أو أعلى أو في متصفحات أخرى، يمكنك استخدام أسلوب الأمر "@import" لاستدعاء ورقة الأنماط.