بشكل عام، ورقة الأنماط عبارة عن مجموعة من قواعد التنسيق التي تتحكم في مظهر محتوى الويب. يمكنك استخدام CSS في صفحاتك بثلاث طرق مختلفة:
مضمنة: أنماط لمرة واحدة مكتوبة في التعليمات البرمجية.
مضمنة: ورقة أنماط يمكنها التحكم في كافة العناصر الموجودة في الصفحة. الخارجية: ورقة أنماط يمكنها التحكم في العناصر الموجودة في العديد من الصفحات.
في الواقع، تستخدم العديد من المواقع مجموعة من هذه الأساليب الثلاثة حسب الحاجة.
من الأشياء المهمة التي يجب مراعاتها عند العمل باستخدام CSS هو حقيقة أن المتصفحات المختلفة والإصدارات المختلفة من نفس المتصفح تقوم بتحليل CSS بطرق مختلفة. بالإضافة إلى الاختلافات في متصفحات الويب، عليك أيضًا أن تدرك أن هناك العديد من المتصفحات الأخرى، مثل متصفحات السمع، والمتصفحات المعتمدة على التلفزيون، والأجهزة المحمولة مثل Palm Pilot وTTY (آلة كاتبة، آلة كاتبة عن بعد).
ما هي أفضل الممارسات؟
معظم التقنيات لها معاييرها المتفق عليها. CSS ليست استثناء. على الرغم من أن ليس كل CSS الموجود على الويب موحدًا، فمن المفيد استخدام CSS وفقًا للمعايير الحالية. بشكل عام، يجب على المطورين فصل المحتوى عن التقارير قدر الإمكان. فوائد ذلك هي:
1: زيادة عمر الموقع
قد تكون أوراق الأنماط غير القياسية ملائمة في ذلك الوقت، ولكن بعد ظهور الإصدار الجديد من المتصفح، من المحتمل أن تحدث مشكلات التوافق. في ذلك الوقت، سيكون تعديل صفحة الموقع بصفحة مهمة تستغرق وقتًا طويلاً للغاية، كما أنه سيجعل استخدام CSS بلا معنى.
2: اجعل موقعك في متناول جميع المستخدمين والمتصفحات.
أصدرت بعض الحكومات المحلية تشريعات تنص على أن مواقع الويب يجب أن تكون متاحة للأشخاص ذوي الإعاقة. تتمتع أجهزة التصفح المصممة للتوعية بالإعاقة، مثل متصفحات السمع، بمتطلبات معيارية صارمة للغاية لـ CSS.
3: تسهيل تحديثات الموقع وصيانته.
عند استخدامه بشكل صحيح، يسمح CSS بتطبيق التعديلات التي تجريها على صفحة واحدة بسرعة على جميع الصفحات.
الخيار الأول الذي يتعين عليك القيام به هو ورقة الأنماط التي تريد استخدامها. فيما يلي تفاصيل لأوراق الأنماط المختلفة عندما يتعلق الأمر بأفضل الممارسات:
ببساطة، يجب أن تحاول تجنب استخدامها. من بين العيوب الأخرى، استخدام CSS المضمن يعني أنك لا تستفيد من الميزة الحقيقية لـ CSS، وهي أنك لا تفصل المحتوى عن التنسيق. يستخدم DW Inline CSS بشكل أساسي لتحديد موضع عناصر الصفحة (تسمى هذه العناصر "الطبقات" في واجهة مستخدم DW)، أو لاستخدام تأثير DHTML معين، الأمر الذي يتطلب استخدام نمط Javascript لتغيير خصائص الكائن.
CSS المضمن: إنه أيضًا أقل من المثالي لأنه يؤثر فقط على الصفحة الحالية. أثناء عملية التحديث، في حالة فقدان إحدى الصفحات، سيكون نمط الموقع غير متناسق، بالإضافة إلى ذلك، عندما يتصفح المستخدمون موقعك، يجب تنزيل معلومات ورقة الأنماط لكل صفحة.
CSS الخارجي: هذا هو خيارك الأول. يسمح CSS الخارجي لجميع الصفحات المرتبطة به بالحفاظ على مظهر ونمط متسقين؛ كما يسمح بتخطيطه وتغييره مرة واحدة وتحديث جميع الصفحات ذات الصلة بسهولة، مما يجعل صفحتك أصغر حجمًا وتتصفح بشكل أسرع. تتم مناقشة أفضل الممارسات الأخرى أدناه عند تحليل ميزات CSS محددة.
إنشاء ورقة أنماط CSS في DW
عند إنشاء ورقة أنماط CSS في DW (نص 》نمط CSS 》ورقة أنماط جديدة)، في مربع الحوار المنبثق، لديك خياران: ملف ورقة أنماط جديد ويستخدم فقط للصفحة الحالية (هذه الوثيقة فقط). حدد "ملف ورقة الأنماط الجديدة" وتبدأ عملية إنشاء CSS خارجي. يتطلب هذا الخيار منك تسمية ورقة الأنماط وتحديد موقع حفظ لها قبل عملية الإنشاء الفعلية؛ أما الخيار الآخر، هذا المستند فقط، فسيقوم بكتابة التعليمات البرمجية ذات الصلة مباشرة إلى الصفحة.
يمكنك أيضًا تحديد ورقة أنماط موجودة لتحرير أو إضافة تعريفات جديدة في مربع الحوار New Style.
هل يجب توصيله بـ CSS خارجي أم استيراده؟
بعد إنشاء ورقة الأنماط الخارجية، يتعين عليك إرفاقها بكل صفحة (أو قالب). للقيام بذلك، انقر فوق الزر "إرفاق ورقة أنماط" في لوحة CSS. سينبثق مربع الحوار "ربط ورقة الأنماط الخارجية"، حيث يمكنك تصفح ورقة الأنماط المستهدفة، وبعد العثور على الاسم، يمكنك اختيار الارتباط أو الاستيراد ورقة الأنماط الخارجية هذه.
يعد الاتصال هو الأسلوب الأكثر استخدامًا. حدد "رابط" لتوصيل ورقة الأنماط بالصفحة. سيضيف الترميز التالي إلى صفحتك:
خيار الاتصال مدعوم من جميع المتصفحات التي تدعم CSS. إذا كنت تريد أن تتمكن بعض المتصفحات القديمة (مثل Netscape 4.x) من "رؤية" ورقة الأنماط هذه، فستحتاج إلى استخدام الطريقة التالية.
إذا حددت خيار "استيراد"، فإن العلامات المستخدمة هي:
سوف يتجاهل NetSscape4 تمامًا ملف CSS المستورد ويفسر الصفحة وفقًا لملف CSS المتصل. بهذه الطريقة، يمكننا استخدام الميزات الجديدة في CSS دون القلق بشأن مشكلات توافق المتصفح.
مفتش خصائص CSS
يمكنك التبديل بسهولة إلى وضع CSS في مفتش خصائص DW. افتراضيًا، يعرض Property Inspector علامات الخطوط في وضع HTML الأولي. انقر على حرف "A" الصغير بجوار القائمة المنسدلة "الخطوط" وسترى أوراق أنماط CSS المتوفرة حاليًا بدلاً من قائمة علامات الخطوط. وفي الوقت نفسه، يمكنك بسهولة العودة إلى وضع HTML.
أوراق أنماط CSS الجاهزة
إحدى ميزات CSS المثيرة في DW هي أنها تتضمن أوراق أنماط CSS جاهزة. يمكن لمستخدمي CSS الجدد تجربتها أولاً. حدد ملف > جديد، وحدد أوراق أنماط CSS في مربع حوار المستند الجديد المنبثق، وستظهر قائمة بجميع CSS المتوفرة في المربع الموجود على اليمين. لممارسة ما نطلق عليه أفضل الممارسات، اختر واحدة تم وضع علامة "يمكن الوصول إليها".
احفظ المستند في مجلد الموقع، ثم قم بإلحاق ملف CSS بالمستند الخاص بك باستخدام الطريقة الموضحة أعلاه.
أوراق أنماط وقت التصميم (أوراق أنماط وقت التصميم)
تتيح لك هذه الميزة في DW تطبيق أوراق الأنماط على الصفحات أثناء العمل في عرض التصميم، مما يمنحك فهمًا أكثر سهولة لمظهر الموقع. لن تظهر أوراق أنماط وقت التصميم داخل الموقع. هذه الميزة مفيدة جدًا من منظور أفضل ممارساتنا. إذا كنت تستخدم طريقتي الاستيراد والانضمام (كما هو موضح أعلاه)، فإن إرفاق ورقة أنماط وقت التصميم يسمح لك بتطوير الموقع باستخدام أي منهما. يمكنك التغيير بسهولة إلى ورقة أنماط أخرى عندما تريد معرفة كيف ستبدو الصفحة ضمن ورقة أنماط أخرى.
تعد أوراق أنماط وقت التصميم مفيدة أيضًا للمطورين الذين يرغبون في تطبيق CSS على جانب الخادم (مثل ASP أو PHP أو ColdFusion) أو على جانب العميل من خلال Javascript. تعد أوراق الأنماط من جانب الخادم أيضًا طريقة أخرى للتعامل مع دعم CSS الضعيف في متصفحات العميل. لكن في الإصدارات السابقة من DW، لم تكن هذه الطريقة تسمح لك بمشاهدة التأثير الفعلي لـ CSS أثناء مرحلة التصميم. تتيح لك أوراق أنماط وقت التصميم عرض تأثيرات أوراق الأنماط في الوقت الفعلي، حتى تتمكن من العمل باستخدام واجهة مرئية في DW. فائدة أخرى هي أنه عند تحميل ملفات الموقع، لن تضطر بعد الآن إلى تصفح الموقع بأكمله بحثًا عن أوراق الأنماط المتكررة.
التحقق من الصحة
سواء قمت بإنشاء ورقة الأنماط الخاصة بك أو تحرير ورقة موجودة، فإن التحقق من الصحة يضمن عدم إساءة استخدام العلامات غير القياسية أو التعليمات البرمجية غير الصحيحة. لا تشتمل DW نفسها على أداة التحقق من صحة CSS، ويمكنك استخدام خدمة التحقق التي يوفرها موقع W3C.
داخل DW، يمكنك التحقق من صحة علامات HTML أو DHTML (ملف > التحقق من الصفحة > التحقق من صحة العلامات (لـ HTML) أو ملف > التحقق من الصفحة > التحقق من صحة XML لـ XHTML.). توفر DW العديد من الأدوات المساعدة عند تطوير المواقع المبنية على CSS. بمساعدة MW MX، إلى جانب الفهم الجيد لـ CSS، يمكنك تطوير موقع سيصمد أمام اختبار الزمن.