فهم أوراق الأنماط المتتالية
أوراق الأنماط المتتالية (CSS) عبارة عن سلسلة من قواعد التنسيق التي تتحكم في مظهر محتوى صفحة الويب. عند استخدام CSS لتنسيق صفحة، افصل المحتوى عن العرض التقديمي. محتوى الصفحة (أي كود HTML) موجود في ملف HTML نفسه، بينما قواعد CSS التي تحدد عرض الكود موجودة في ملف آخر (ورقة أنماط خارجية) أو في جزء آخر من مستند HTML ( عادةً ما يكون رأس الملف). يمنحك استخدام CSS مرونة كبيرة وتحكمًا أكبر في المظهر الدقيق لصفحتك، بدءًا من تحديد موضع التخطيط بدقة ووصولاً إلى خطوط وأنماط محددة.
يتيح لك CSS التحكم في العديد من الخصائص التي لا يستطيع HTML وحده التحكم فيها. على سبيل المثال، يمكنك تحديد أحجام الخطوط والوحدات المختلفة (البكسل، أحجام النقاط، وما إلى ذلك) للنص المحدد. باستخدام CSS لتعيين أحجام الخطوط بالبكسل، فإنك تضمن أيضًا اتباع نهج أكثر اتساقًا لتخطيط الصفحة ومظهرها عبر متصفحات متعددة.
بالإضافة إلى تنسيق النص، يمكنك استخدام CSS للتحكم في تنسيق العناصر على مستوى الكتلة وموضعها في صفحة الويب. على سبيل المثال، يمكنك تعيين الهوامش والحدود للعناصر على مستوى الكتلة، وتعويم النص حول نص آخر، والمزيد.
تتكون قواعد تنسيق CSS من جزأين: المحددات والإعلانات. المحدد هو مصطلح يحدد عنصر التنسيق (مثل P أو H1 أو اسم الفئة أو المعرف)، ويتم استخدام التصريح لتحديد نمط العنصر. في المثال التالي، H1 هو المحدد وكل ما بين القوسين ({}) هو إعلان:
ح1 {
حجم الخط: 16 بكسل؛
عائلة الخط: هلفتيكا؛
وزن الخط: غامق
}
يتكون الإعلان من جزأين: الخصائص (مثل عائلة الخطوط) والقيم (مثل Helvetica). تنشئ قاعدة CSS أعلاه نمطًا محددًا لعلامات H1: سيكون حجم نص جميع علامات H1 المرتبطة بهذا النمط 16 بكسل، وخط Helvetica، وعريضًا.
يشير المصطلح المتتالي إلى القدرة على تطبيق أنماط متعددة على نفس العنصر. على سبيل المثال، يمكنك إنشاء قاعدة CSS واحدة لتطبيق اللون، وقاعدة CSS أخرى لتطبيق الهوامش، ثم تطبيق كليهما على نفس النص في الصفحة. "تتتالي" الأنماط المحددة وصولاً إلى العناصر الموجودة على صفحة الويب الخاصة بك، مما يؤدي في النهاية إلى إنشاء التصميم الذي تريده.
تتمثل الميزة الرئيسية لـ CSS في أنها توفر إمكانات تحديث ملائمة؛ فعندما تقوم بتحديث قاعدة CSS في مكان واحد، يتم تحديث تنسيق جميع المستندات باستخدام هذا النمط المحدد تلقائيًا إلى النمط الجديد.
يمكن تعريف أنواع الأنماط التالية في Dreamweaver:
تسمح لك قواعد CSS المخصصة (وتسمى أيضًا أنماط الفئة) بتطبيق خصائص النمط على أي نطاق أو كتلة نصية. (راجع تطبيق أنماط الفئة.)
تعيد أنماط علامات HTML تعريف تنسيق علامات محددة (مثل h1). عندما تقوم بإنشاء أو تغيير نمط CSS لعلامة h1، يتم تحديث كل النص المنسق بعلامة h1 على الفور.
تعيد أنماط محدد CSS (الأنماط المتقدمة) تعريف التنسيق لمجموعات معينة من العناصر، أو لنماذج التحديد الأخرى التي يسمح بها CSS (على سبيل المثال، تطبيق المحدد td h2 عندما يظهر رأس h2 داخل خلية جدول). يمكن للأنماط المتقدمة أيضًا إعادة تعريف تنسيق العلامات التي تحتوي على سمة معرف محددة (على سبيل المثال، يمكن تطبيق النمط المحدد بواسطة #myStyle على جميع العلامات التي تحتوي على زوج قيمة السمة id="myStyle").
يمكن وضع قواعد CSS في المواقع التالية:
ورقة أنماط CSS الخارجية عبارة عن سلسلة من قواعد CSS مخزنة في ملف CSS خارجي منفصل (.css) (وليس ملف HTML). يتم ربط المستند بصفحة واحدة أو أكثر في موقع الويب باستخدام الارتباطات الموجودة في جزء الرأس من ملف المستند.
ورقة أنماط CSS الداخلية (أو المضمنة) هي عبارة عن سلسلة من قواعد CSS المضمنة ضمن علامة النمط في رأس مستند HTML.
يتم تعريف الأنماط المضمنة داخل مستند HTML بأكمله في مثيل محدد للعلامة.
يتعرف Dreamweaver على الأنماط المحددة في المستندات الموجودة طالما أنها تتوافق مع إرشادات أنماط CSS.
تلميح
لعرض دليل O'Reilly CSS المرجعي المضمن في Dreamweaver، حدد Help > Reference، ثم حدد O'Reilly CSS Reference من القائمة المنبثقة في اللوحة Reference.
يؤدي تعيين تنسيق HTML يدويًا إلى تجاوز التنسيق المطبق من خلال CSS. لكي تتحكم قواعد CSS في تنسيق الفقرة، يجب إزالة كافة تنسيقات HTML التي تم تعيينها يدويًا.
يعرض Dreamweaver معظم خصائص الأنماط التي تطبقها مباشرةً في النافذة Document. يمكنك أيضًا معاينة المستند في نافذة المتصفح لمعرفة كيفية تطبيق الأنماط. تظهر بعض خصائص أنماط CSS بشكل مختلف في Microsoft Internet Explorer وNetscape Navigator وOpera وApple Safari، وبعضها غير مدعوم حاليًا بواسطة أي متصفح.