استخدم هذا الموضوع لمعرفة المفاهيم الأساسية لـ CSS مثل قواعد CSS والمحددات، والوراثة، والمزيد. وكذلك تعرف على كيفية ربط CSS مع صفحات الويب الخاصة بك في Dreamweaver.
حول أوراق الأنماط المتتالية
أوراق الأنماط المتتالية (CSS) هي مجموعة من قواعد التنسيق التي تتحكم في مظهر المحتوى في صفحة الويب. يؤدي استخدام أنماط CSS لتنسيق الصفحة إلى فصل المحتوى عن العرض. يتواجد محتوى صفحتك—كود HTML—في ملف HTML، بينما تتواجد قواعد CSS التي تحدد عرض الكود في ملف آخر (ورقة أنماط خارجية) أو في جزء آخر من مستند HTML (عادة في قسم الرأس). يسهل فصل المحتوى عن العرض بشكل كبير صيانة مظهر موقعك من موقع مركزي لأنك لا تحتاج إلى تحديث كل خاصية في كل صفحة كلما أردت إجراء تغيير. كما يؤدي فصل المحتوى عن العرض إلى كود HTML أبسط وأنظف، مما يوفر أوقات تحميل أقصر للمتصفح، ويبسط التنقل للأشخاص الذين يواجهون مشكلات في إمكانية الوصول (على سبيل المثال، أولئك الذين يستخدمون قارئات الشاشة).
تمنحك CSS مرونة كبيرة وتحكمًا في المظهر الدقيق لصفحتك. باستخدام CSS يمكنك التحكم في العديد من خصائص النص بما في ذلك خطوط معينة وأحجام الخطوط؛ والنص العريض والمائل والتسطير السفلي وظلال النص؛ ولون النص ولون الخلفية؛ ولون الروابط وتسطير الروابط؛ والكثير غير ذلك. باستخدام CSS للتحكم في الخطوط الخاصة بك، يمكنك أيضًا ضمان معاملة أكثر اتساقًا لتخطيط صفحتك ومظهرها عبر متصفحات متعددة.
بالإضافة إلى تنسيق النص، يمكنك استخدام CSS للتحكم في تنسيق وموضع العناصر على مستوى الكتلة في صفحة الويب. العنصر على مستوى الكتلة هو جزء مستقل من المحتوى، يتم فصله عادة بسطر جديد في HTML، ويتم تنسيقه بصريًا ككتلة. على سبيل المثال، علامات h1 وعلامات p وعلامات div كلها تُنشئ عناصر على مستوى الكتلة في صفحة الويب.يمكنك تعيين الهوامش والحدود للعناصر على مستوى الكتلة، ووضعها في موقع محدد، وإضافة لون خلفية لها، وتعويم النص حولها، وما إلى ذلك. التحكم في العناصر على مستوى الكتلة هو في الأساس الطريقة التي تنظم بها الصفحات باستخدام CSS.
حول قواعد CSS
تتكون قاعدة التنسيق في CSS من جزأين—المحدد والإعلان (أو في معظم الحالات، كتلة من الإعلانات). المحدد هو مصطلح (مثل p، h1، اسم فئة، أو مُعرِّف) يحدد العنصر المنسق، وكتلة التصريح تُعرِّف خصائص النمط.في المثال التالي، h1 هو المحدد، وكل ما يقع بين الأقواس المجعدة ({}) هو كتلة الإعلان:
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
يتكون الإعلان الفردي من جزأين، الخاصية (مثل 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 (.css) منفصل وخارجي (وليس ملف HTML). يتم ربط هذا الملف بصفحة واحدة أو أكثر في موقع باستخدام رابط أو قاعدة @import في قسم الرأس من المستند.
أوراق أنماط CSS الداخلية (أو المضمّنة)
مجموعات من قواعد CSS مضمنة في علامة style في الجزء الرأسي من مستند HTML.
الأنماط السطرية
تكون معرّفة ضمن مثيلات معينة من العلامات عبر مستند HTML. (لا يوصى باستخدام الأنماط السطرية.)
يتعرف Dreamweaver على الأنماط المحددة في المستندات الموجودة طالما أنها تتوافق مع إرشادات أنماط CSS. يعرض Dreamweaver أيضًا معظم الأنماط المطبقة مباشرة في عرض التصميم. (ومع ذلك، فإن معاينة المستند في نافذة المتصفح تمنحك عرضاً "مباشراً" دقيقاً للصفحة.)يتم عرض بعض أنماط CSS بشكل مختلف في Microsoft Internet Explorer أو Netscape أو Opera أو Apple Safari أو متصفحات أخرى، وبعضها غير مدعوم حاليًا من أي متصفح.
حول الأنماط المتتالية
يشير مصطلح التتالي إلى الطريقة التي يعرض بها المتصفح الأنماط في النهاية لعناصر محددة على صفحة ويب.ثلاثة مصادر مختلفة مسؤولة عن الأنماط التي تراها على صفحة الويب: ورقة الأنماط التي أنشأها مؤلف الصفحة، واختيارات الأنماط المخصصة للمستخدم (إن وجدت)، والأنماط الافتراضية للمتصفح نفسه.تصف الموضوعات السابقة إنشاء الأنماط لصفحة ويب كمؤلف لكل من صفحة الويب وورقة الأنماط المرفقة بتلك الصفحة.لكن المتصفحات لديها أيضًا أوراق أنماط افتراضية خاصة بها تحدد عرض صفحات الويب، وبالإضافة إلى ذلك، يمكن للمستخدمين تخصيص متصفحاتهم عن طريق إجراء اختيارات تعدل عرض صفحات الويب.المظهر النهائي لصفحة الويب هو نتيجة قواعد هذه المصادر الثلاثة جميعها تجتمع معًا (أو "تتتالى") لعرض صفحة الويب بطريقة مثلى.
علامة شائعة—علامة الفقرة، أو علامة <p>—توضح المفهوم. افتراضيًا، تأتي المتصفحات مع أوراق أنماط تحدد الخط وحجم الخط لنص الفقرة (أي النص الذي يقع بين علامات <p> في كود HTML). في Internet Explorer، على سبيل المثال، يظهر جميع نص المحتوى، بما في ذلك نص الفقرة، بخط Times New Roman وبحجم Medium افتراضياً.
كمؤلف لصفحة ويب، مع ذلك، يمكنك إنشاء ورقة أنماط تتجاوز النمط الافتراضي للمتصفح لخط الفقرة وحجم الخط. على سبيل المثال، يمكنك إنشاء القاعدة التالية في ورقة الأنماط الخاصة بك:
p {
font-family: Arial;
font-size: small;
}
عندما يحمّل المستخدم الصفحة، فإن إعدادات الخط وحجم الخط للفقرة التي تحددها كمؤلف تتجاوز إعدادات نص الفقرة الافتراضية في المتصفح.
يمكن للمستخدمين إجراء تحديدات لتخصيص عرض المتصفح بطريقة مثلى لاستخدامهم الشخصي.في Internet Explorer، على سبيل المثال، يمكن للمستخدم تحديد View > Text Size > Largest لتوسيع خط الصفحة إلى حجم أكثر قابلية للقراءة إذا كان يعتقد أن الخط صغير جداً.في النهاية (على الأقل في هذه الحالة)، يتجاوز تحديد المستخدم كلاً من أنماط المتصفح الافتراضية لحجم خط الفقرة وأنماط الفقرة التي أنشأها مؤلف الصفحة الإلكترونية.
تعد الوراثة جزءًا مهمًا آخرًا من التتالي. خصائص معظم العناصر على الصفحة الإلكترونية موروثة—على سبيل المثال، تورث علامات الفقرة خصائص معينة من علامات body، وتورث علامات span خصائص معينة من علامات الفقرة، وهكذا.وبالتالي، إذا أنشأت القاعدة التالية في ورقة الأنماط الخاصة بك:
body {
font-family: Arial;
font-style: italic;
}
تظهر جميع نصوص الفقرات الموجودة على صفحة الويب لديك (بالإضافة إلى النصوص التي ترث خصائص من علامة الفقرة) بالخط Arial ومائلة نظرًا لأن علامة الفقرة ترث هذه الخصائص من علامة النص الأساسي. ولكن يمكنك تحديد القواعد الخاصة بك بشكل أكبر، وإنشاء أنماط تتجاوز الصيغة القياسية للوراثة. على سبيل المثال، في حالة إنشاء القواعد التالية في ورقة الأنماط الخاصة بك:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
سيكون كل نص body بخط Arial ومائل باستثناء نص الفقرة (والموروث)، والذي سيُعرض كـ Courier عادي (غير مائل).من الناحية التقنية، ترث علامة الفقرة أولاً الخصائص المُعيّنة لعلامة body، ولكنها تتجاهل تلك الخصائص لأن لديها خصائص محددة خاصة بها.بمعنى آخر، بينما تورث عناصر الصفحة الخصائص من الأعلى بشكل عام، فإن التطبيق المباشر لخاصية على علامة يؤدي دائماً إلى تجاوز الصيغة المعيارية للوراثة.
إن مزيج جميع العوامل المذكورة أعلاه، بالإضافة إلى عوامل أخرى مثل خصوصية 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.
حول خصائص CSS المختصرة
تسمح مواصفات CSS بإنشاء الأنماط باستخدام صيغة مختصرة تُعرف باسم shorthand CSS.يتيح لك Shorthand 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 قد تم تعيين قيمها الافتراضية.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
عند إعادة كتابتها كخاصية مختصرة واحدة، قد تظهر نفس القاعدة كما يلي:
h1 { font: bold 16pt/18pt Arial }
عند الكتابة باستخدام الترميز المختصر، يتم تعيين القيم المحذوفة تلقائيًا إلى قيمها الافتراضية. وبالتالي، يحذف المثال المختصر السابق علامات font-variant، وfont-style، وfont-stretch، وfont-size-adjust.
إذا كانت لديك أنماط محددة في أكثر من موقع واحد (على سبيل المثال، مدمجة في صفحة HTML ومستوردة من ورقة أنماط خارجية) باستخدام كلا النموذجين المختصر والطويل لبناء جملة CSS، كن على علم بأن الخصائص المحذوفة في قاعدة مختصرة قد تتجاوز (أو تتدرج) الخصائص المحددة صراحة في قاعدة أخرى.
لهذا السبب، يستخدم Dreamweaver النموذج الطويل لترميز CSS افتراضيًا. يمنع هذا المشاكل المحتملة الناجمة عن قاعدة مختصرة تتجاوز قاعدة طويلة. إذا فتحت صفحة ويب مُرمزة بترميز CSS مختصر في Dreamweaver، كن على علم أن Dreamweaver سينشئ أي قواعد CSS جديدة باستخدام النموذج الطويل. يمكنك تحديد كيفية إنشاء وتحرير Dreamweaver لقواعد CSS عن طريق تغيير تفضيلات تحرير CSS في فئة أنماط CSS في مربع حوار التفضيلات (تحرير > التفضيلات في Windows؛ Dreamweaver > التفضيلات على Macintosh).
Dreamweaver وCSS
في Dreamweaver، يمكنك العمل مع CSS بطرق متعددة:
- يمكنك استخدام CSS Designer لإنشاء CSS الخاص بك من خلال الحد الأدنى من التعليمات البرمجية. لمزيد من المعلومات، راجع تخطيط الصفحات باستخدام CSS Designer.
- يمكنك أيضًا كتابة التعليمات البرمجية لـ CSS يدويًا. لمزيد من المعلومات حول ميزات الترميز التي يوفرها Dreamweaver، راجع بيئة الترميز في Dreamweaver.
- إذا كنت تفضل العمل باستخدام ملفات Sass أو Scss أو Less، فيمكنك كتابة التعليمات البرمجية لملفاتك باستخدام بناء الجملة المفضل واستخدامها في Dreamweaver. لمزيد من المعلومات، راجع معالجات CSS المسبقة.
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
