فهم أوراق الأنماط المتتالية

تعد أوراق الأنماط المتتالية (CSS) مجموعة من قواعد التنسيق التي تتحكم في الشكل الذي يظهر به المحتوي في صفحة الويب. يعمل استخدام أنماط CSS لتنسيق الصفحات على فصل المحتوى عن العرض. حيث يوجد محتوى الصفحة الخاصة بك - التعليمات البرمجية بلغة HTML - في ملف HTML، بينما توجد قواعد CSS التي تعرّف عرض التعليمات البرمجية في ملف آخر (ورقة أنماط خارجية) أو في جزء آخر من مستند HTML (ويكون في العادة جزء العنوان). يُسهّل فصل المحتوى عن العرض من الحفاظ على شكل الموقع الخاص بك من مكان مركزي نظرًا لأنك لن تحتاج إلى تحديث كل خاصية بكل صفحة عندما تريد إجراء تغيير. يؤدي فصل المحتوى عن العرض كذلك إلى الحصول على تعليمات برمجية بلغة HTML أكثر بساطةً ووضوحًا، مما يوفر أوقات تحميل أقل للمستعرض، ويسهّل من عملية التنقل للأشخاص الذين لديهم مشكلات في إمكانية الوصول (على سبيل المثال، الأشخاص الذين يستخدمون أجهزة قراءة شاشات).

تمنحك CSS قدرًا كبيرًا من المرونة والتحكم في الشكل الذي تريده لصفحتك بدقة. يمكنك باستخدام CSS التحكم في العديد من الخصائص النصية بما في ذلك استخدام خطوط وأحجام خطوط معينة، وألوان غامقة، ونصوص مائلة، وتسطير، وظلال وألوان النصوص، وألوان الخلفية، وألوان الارتباطات، وتسطير الارتباطات، بالإضافة إلى المزيد من الخصائص الأخرى. عبر استخدام CSS للتحكم في الخطوط لديك، يمكنك كذلك ضمان الحصول على معالجة أكثر تناسقًا لتخطيط الصفحة وشكلها في العديد من المستعرضات.

بالإضافة إلى تنسيق النصوص، يمكنك استخدام CSS للتحكم في تنسيق العناصر على مستوى الكتلة وتعيين مواضعها في صفحات الويب. عناصر مستوى الكتلة هي أجزاء مستقلة من المحتوى، تكون في العادة مفصولة بسطر جديد في HTML، ويتم تنسيقها مرئيًا ككتلة. على سبيل المثال، تؤدي علامات h1، وعلامات p، وعلامات div جميعها إلى الحصول على عناصر مستوى كتلة في صفحات الويب. يمكنك تعيين هوامش وحدود لعناصر مستوى الكتلة، ووضعها في موقع محدد، وإضافة لون خلفية إليها، وتعويم نص حولها...إلخ. وتعد معالجة عناصر مستوى الكتلة الطريقة الأساسية لتخطيط الصفحات باستخدام CSS.

حول قواعد CSS

تتكون قاعدة تنسيق CSS من جزأين، المحدد والإقرار (أو في معظم الحالات، كتلة من الإقرارات). يمثل المحدد مصطلحًا (مثل p، أو h1، أو اسم فئة، أو معرّف) يعرّف العنصر الذي تم تنسيقه، بينما تعرّف كتلة الإقرار طبيعة خصائص النمط. في المثال التالي، يمثل h1 المحدد، بينما تمثل جميع العناصر التي تندرج بين القوسين ({}) كتلة الإقرار:

يتكون الإقرار الفردي من جزأين، الخاصية (مثل font-family) والقيمة (مثل Helvetica). في قاعدة CSS السابقة، تم إنشاء نمط خاص لعلامات h1 كالتالي: تكون النصوص الخاصة بجميع علامات h1 المرتبطة بهذا النمط بحجم 16 بكسل، وخط Helvetica، وغامق.

يوجد النمط (المستمد من قاعدة، أو مجموعة من القواعد) في مكان منفصل عن النص الفعلي الذي يتم تنسيقه بناءً على هذا النمط، وعادةً ما يوجد في ورقة أنماط خارجية، أو في جزء العنوان لمستند HTML. ومن ثم، يمكن أن تنطبق قاعدة واحدة لعلامات h1 على العديد من العلامات مرة واحدة (وفي حالة أوراق الأنماط الخارجية، يمكن أن تنطبق القاعدة على العديد من العلامات مرة واحدة بصفحات متعددة). وبذلك، توفر CSS إمكانية تحديث فائقة السهولة. فعند تحديث قاعدة CSS في مكان واحد، يتم تحديث تنسيق جميع العناصر التي تستخدم النمط المعرّف تلقائيًا إلى النمط الجديد.

يمكنك تعريف الأنواع التالية من الأنماط في Dreamweaver:

• تتيح لك أنماط الفئات تطبيق خصائص الأنماط على أي عنصر أو عناصر بالصفحة.

• تقوم أنماط علامات HTML بإعادة تعريف التنسيق الخاص بعلامة معينة، مثل h1. عند إنشاء نمط CSS أو تغييره لعلامة h1، يتم تحديث جميع النصوص التي تم تنسيقها باستخدام علامة h1 على الفور.

• تقوم الأنماط المتقدمة بإعادة تعريف التنسيق الخاص بمجموعة معينة من العناصر، أو الخاص بنماذج المحدد الأخرى على النحو المسموح به من خلال CSS (على سبيل المثال، يتم تطبيق المحدد td h2 عند ظهور عنوان h2 داخل خلية جدول.) قد تقوم الأنماط المتقدمة كذلك بإعادة تعريف التنسيق الخاص بالعلامات التي تحتوي على سمة id معينة (على سبيل المثال، يتم تطبيق الأنماط التي تم تعريفها بواسطة #myStyle على جميع العلامات التي تحتوي على زوج السمة-القيمة id="myStyle").

قد توجد قواعد CSS في المواقع التالية:

مجموعات قواعد CSS المخزنة في ملف CSS خارجي منفصل (.css) (وليس ملف HTML). يتم ربط هذا الملف بصفحة واحدة أو أكثر في موقع الويب باستخدام ارتباط أو قاعدة @import في مقطع رأس العنوان بالمستند.

مجموعات قواعد CSS المضمّنة في علامة style في جزء رأس العنوان بمستند HTML.

تكون معرّفة ضمن مثيلات معينة من العلامات عبر مستند HTML. (لا يوصى باستخدام الأنماط السطرية.)

يقوم Dreamweaver بتمييز الأنماط المعرّفة في المستندات الحالية طالما كانت مطابقة لإرشادات أنماط CSS. كما يقوم Dreamweaver كذلك بعرض معظم الأنماط المطبقة مباشرةً في طريقة العرض Design. (إلا أن معاينة المستند في نافذة مستعرض يمنحك عرضًا مباشرًا للصفحة بأكبر دقة ممكنة.) يتم عرض بعض أنماط CSS بشكل مختلف في مستعرضات Microsoft Internet Explorer، أو Netscape، أو Opera، أو Apple Safari، أو المستعرضات الأخرى، بينما لا يدعم أي مستعرض حاليًا عرض بعض الأنماط الأخرى.

حول الأنماط المتتالية

يشير المصطلح تتالي إلى الطريقة النهائية التي يقوم من خلالها المستعرض بعرض الأنماط الخاصة بعناصر معينة على صفحة ويب. هناك ثلاثة مصادر مختلفة مسؤولة عن الأنماط التي تظهر على صفحة الويب وهي: ورقة الأنماط التي يقوم مؤلف الصفحة بإنشائها، وتحديدات الأنماط المخصصة للمستخدم (في حالة وجود أي منها)، والأنماط الافتراضية للمستعرض نفسه. توضح الموضوعات السابقة إنشاء أنماط لصفحة ويب كمؤلف لكل من صفحة الويب وورقة الأنماط المرفقة بهذه الصفحة. إلا أن المستعرضات تتميز كذلك بأوراق أنماط افتراضية خاصة بها تحدد طريقة عرض صفحات الويب، وعلاوة على ذلك، يمكن للمستخدمين تخصيص المستعرضات الخاصة بهم عبر إجراء تحديدات لضبط عرض صفحات الويب. يعد الشكل النهائي لصفحة الويب نتاجًا لقواعد جميع المصادر الثلاثة هذه مجتمعة (أو "تتاليها") لعرض صفحة الويب على النحو الأمثل.

علامة شائعة - علامة الفقرة، أو علامة <p> - توضح المبدأ. افتراضيًا، تكون المستعرضات مزودة بأوراق أنماط تعرّف الخط وحجم الخط الخاص بنص الفقرة (أي، النص الذي يندرج ضمن علامات <p> في التعليمات البرمجية بلغة HTML). ففي مستعرض Internet Explorer، على سبيل المثال، يتم عرض جميع النصوص الأساسية، بما في ذلك نص الفقرة، بخط Times New Roman، وحجم خط Medium افتراضيًا.

ولكن باعتبارك مؤلف صفحة الويب، يمكنك إنشاء ورقة أنماط تتجاوز النمط الافتراضي الخاص بالمستعرض بالنسبة لخط الفقرة وحجم الخط. على سبيل المثال، يمكنك إنشاء القاعدة التالية في ورقة الأنماط الخاصة بك:

عند قيام مستخدم بتحميل الصفحة، تقوم إعدادات خط الفقرة وحجم الخط التي قمت بتعيينها بوصفك مؤلف الصفحة بتجاوز إعدادات نص الفقرة الافتراضية للمستعرض.

ويستطيع المستخدمون إجراء تحديدات لتخصيص عرض المستعرض بالشكل الأمثل الذي يناسب استخدامهم. ففي مستعرض Internet Explorer، على سبيل المثال، يمكن للمستخدم تحديد View > Text Size > Largest لتوسيع خط الصفحة إلى حجم أكثر قابلية للقراءة إذا كان يرى أن حجم الخط صغير للغاية. في النهاية (في هذه الحالة على الأقل)، يتجاوز التحديد الخاص بالمستخدم كلاً من الأنماط الافتراضية للمستعرض بالنسبة لحجم خط الفقرة وأنماط الفقرة التي قام مؤلف صفحة الويب بإنشائها.

تعد الوراثة جزءًا مهمًا آخرًا من التتالي. تتم وراثة خصائص أغلب العناصر الموجودة على صفحة الويب - على سبيل المثال، ترث علامات الفقرة خصائص معينة من علامات النص الأساسي، وترث علامات الامتداد خصائص معينة من علامات الفقرة، وهكذا. ومن ثم، ففي حالة إنشاء القاعدة التالية في ورقة الأنماط الخاصة بك:

تظهر جميع نصوص الفقرات الموجودة على صفحة الويب لديك (بالإضافة إلى النصوص التي ترث خصائص من علامة الفقرة) بالخط Arial ومائلة نظرًا لأن علامة الفقرة ترث هذه الخصائص من علامة النص الأساسي. ولكن يمكنك تحديد القواعد الخاصة بك بشكل أكبر، وإنشاء أنماط تتجاوز الصيغة القياسية للوراثة. على سبيل المثال، في حالة إنشاء القواعد التالية في ورقة الأنماط الخاصة بك:

تظهر جميع النصوص الأساسية بالخط Arial ومائلة فيما عدا نصوص الفقرات (والنصوص الموروثة منها)، والتي تظهر بالخط Courier وعادية (غير مائلة). من الناحية الفنية، ترث علامة الفقرة أولاً الخصائص التي تم تعيينها لعلامة النص الأساسي، ولكنها تتجاهل بعد ذلك هذه الخصائص لأن لديها خصائص معرّفة خاصة بها. بعبارة أخرى، بينما ترث عناصر الصفحة بوجه عام الخصائص من أعلى، فإن التطبيق المباشر لخاصية ما على العلامة يؤدي دائمًا إلى تجاوز الصيغة القياسية للوراثة.

يؤدي الجمع بين جميع العوامل التي تمت مناقشتها أعلاه، بالإضافة إلى عوامل أخرى مثل الخصوصية النوعية لـ CSS (نظام يمنح أهمية مختلفة لأنواع معينة من قواعد CSS)، وترتيب قواعد CSS، في النهاية إلى إنشاء تتالي مركب تتجاوز فيه العناصر التي تتسم بأولويات أعلى الخصائص التي تتسم بأولويات أقل. لمزيد من المعلومات حول القواعد التي تحكم التتالي، والوراثة، والخصوصية النوعية، قم بزيارة www.w3.org/TR/CSS2/cascade.html.

حول تنسيق النصوص وCSS

افتراضيًا، يستخدم Dreamweaver أوراق الأنماط المتتالية (CSS) لتنسيق النصوص. وتقوم الأنماط التي تقوم بتطبيقها على النصوص باستخدام عارض الخصائص أو أوامر القوائم بإنشاء قواعد CSS يتم تضمينها برأس المستند الحالي.

يمكنك كذلك استخدام اللوحة CSS Designer لإنشاء قواعد وخصائص CSS وتحريرها. تعد اللوحة CSS Designer محررًا أكثر فاعلية بكثير عن عارض الخصائص، وتقوم بعرض جميع قواعد CSS المعرّفة للمستند الحالي، سواء كانت هذه القواعد مضمنة برأس المستند أو بورقة أنماط خارجية. توصي شركة Adobe باستخدام اللوحة CSS Designer (بدلاً من عارض الخصائص) باعتبارها الأداة الأساسية لإنشاء CSS وتحريرها. ومن ثم، فسوف تكون التعليمات البرمجية الخاصة بك أكثر وضوحًا وأسهل في الحفاظ عليها.

للحصول على معلومات حول CSS Designer، راجع تخطيط الصفحات باستخدام CSS Designer.

بالإضافة إلى الأنماط وأوراق الأنماط التي تقوم بإنشائها، يمكنك استخدام أوراق الأنماط المرفقة مع Dreamweaver لتطبيق أنماط على المستندات الخاصة بك.

للحصول على تدريب حول تنسيق النصوص باستخدام CSS، انظر www.adobe.com/go/vid0153_ae.

حول خصائص CSS المختصرة

تتيح مواصفات CSS إنشاء أنماط باستخدام بناء جملة مختصر يعرف باسم CSS المختصرة. تتيح لك CSS المختصرة تحديد قيم خصائص متعددة باستخدام إقرار واحد. على سبيل المثال، تتيح لك الخاصية font تعيين الخصائص font-style، وfont-variant، وfont-weight، وfont-size، وline-height، وfont-family من سطر واحد.

أحد الأمور الأساسية التي يجب ملاحظتها عند استخدام CSS المختصرة، هو أن القيم التي يتم حذفها من إحدى خصائص CSS المختصرة يتم تعيينها إلى القيمة الافتراضية لها. قد يؤدي ذلك إلى عرض الصفحات بشكل غير صحيح عند تعيين قاعدتين أو أكثر من قواعد CSS إلى نفس العلامة.

على سبيل المثال، تستخدم القاعدة h1 الموضحة أدناه بناء جملة CSS مطولاً. لاحظ أن الخصائص font-variant، وfont-stretch، وfont-size-adjust، وfont-style قد تم تعيينها إلى القيم الافتراضية لها.

عند إعادة كتابتها كخاصية واحدة مختصرة، قد تظهر نفس القاعدة بالشكل التالي:

وعند كتابتها باستخدام علامة مختصرة، يتم تعيين القيم المحذوفة تلقائيًا إلى القيم الافتراضية لها. ومن ثم، فإن المثال المختصر السابق يقوم بحذف علامات font-variant، وfont-style، وfont-stretch، وfont-size-adjust.

إذا كانت لديك أنماط معرّفة في أكثر من موقع (على سبيل المثال، مضمّنة في صفحة HTML وأيضًا تم استيرادها من ورقة أنماط خارجية) باستخدام الصيغتين المختصرة والمطولة من بناء جملة CSS، ضع في اعتبارك أن الخصائص المحذوفة في القواعد المختصرة قد تتجاوز (أو تأتي متتالية) للخصائص التي تم تعيينها بشكل صريح في قاعدة أخرى.

ولهذا السبب، يستخدم Dreamweaver الصيغة المطولة لعلامة CSS افتراضيًا. يحول ذلك دون حدوث المشكلات المحتملة الناتجة عن تجاوز القاعدة المختصرة للقاعدة المطولة. في حالة فتح صفحة ويب تم إنشاؤها بتعليمات برمجية باستخدام علامة CSS مختصرة في Dreamweaver، ضع في اعتبارك أن Dreamweaver سيقوم بإنشاء أي قواعد CSS جديدة باستخدام الصيغة المطولة. يمكنك تحديد كيفية قيام Dreamweaver بإنشاء قواعد CSS وتحريرها عبر تغيير تفضيلات تحرير CSS في الفئة CSS Styles بمربع الحوار Preferences (Edit > Preferences في نظام التشغيل Windows، Dreamweaver > Preferences في نظام التشغيل Macintosh).

Dreamweaver وCSS

في Dreamweaver، يمكنك العمل باستخدام CSS بعدة طرق:

• يمكنك استخدام CSS Designer لإنشاء CSS الخاص بك من خلال الحد الأدنى من التعليمات البرمجية. لمزيد من المعلومات، راجع تخطيط الصفحات باستخدام CSS Designer.
• يمكنك أيضًا كتابة التعليمات البرمجية لـ CSS يدويًا. لمزيد من المعلومات حول ميزات كتابة التعليمات البرمجية المقدمة بواسطة Dreamweaver، راجع بيئة كتابة التعليمات البرمجية في Dreamweaver.
• إذا كنت تفضل العمل باستخدام ملفات Sass أو Scss أو Less، فيمكنك كتابة التعليمات البرمجية لملفاتك باستخدام بناء الجملة المفضل واستخدامها في Dreamweaver. لمزيد من المعلومات، راجع معالجات CSS الأولية.