قم بأحد الإجراءات التالية:
تاريخ آخر تحديث
6 مايو 2021
تعرف على كيفية استخدام لوحة CSS Styles في Dreamweaver لتتبع قواعد CSS والخصائص.
ملاحظة:
في Dreamweaver CC والإصدارات اللاحقة، تم استبدال اللوحة CSS Styles بـ CSS Designer. لمزيد من المعلومات، راجع CSS Designer.
تتيح لك اللوحة CSS Styles تعقب قواعد وخصائص CSS التي تؤثر على أحد عناصر صفحة المحددة حاليًا (الوضع Current)، أو جميع القواعد والخصائص المتوفرة للمستند (الوضع All). يتيح لك زر تبديل يوجد بأعلى اللوحة التبديل بين الوضعين. وتتيح لك اللوحة CSS Styles كذلك تعديل خصائص CSS في كلا الوضعين All وCurrent.
اللوحة CSS Styles في الوضع Current
في الوضع Current، تعرض اللوحة CSS Styles ثلاثة أجزاء: الجزء Summary for Selection الذي يعرض خصائص CSS للتحديد الحالي في المستند، والجزء Rules الذي يعرض موقع الخصائص المحددة (أو تتالي للقواعد الخاصة بالعلامة المحددة، تبعًا للتحديد الخاص بك)، والجزء Properties الذي يتيح لك تحرير خصائص CSS للقاعدة المطبقة على التحديد.
يمكنك تغيير حجم أي أجزاء عبر سحب الحدود الفاصلة بين الأجزاء، كما يمكنك تغيير حجم الأعمدة عبر سحب الفواصل.
يعرض الجزء Summary for Selection ملخصًا لخصائص CSS والقيم الخاصة بها للعنصر المحدد حاليًا في المستند النشط. ويوضح الملخص خصائص جميع القواعد التي تنطبق مباشرةً على التحديد. يتم عرض الخصائص التي تم تعيينها فقط.
على سبيل المثال، تؤدي القواعد التالية إلى إنشاء نمط فئة ونمط علامة (تكون في هذه الحالة علامة فقرة):
.foo{
color: green;
font-family: ‘Arial’;
}
p{
font-family: ‘serif’;
font-size: 12px;
}
عند تحديد نص فقرة بنمط الفئة .foo في النافذة Document، يعرض الجزء Summary for Selection الخصائص ذات الصلة لكلتا القاعدتين، نظرًا لأن كلتيهما ينطبقان على التحديد. وفي هذه الحالة، يسرد الجزء Summary for Selection الخصائص التالية:
font-size: 12px font-family: ‘Arial’ color: green
يقوم الجزء Summary for Selection بترتيب الخصائص بحسب زيادة مستوى الخصوصية النوعية. في المثال الوارد أعلاه، يعرّف نمط العلامة حجم الخط بينما يعرّف نمط الفئة عائلة الخط ولونه. (تتجاوز عائلة الخط المعرّفة بواسطة نمط الفئة عائلة الخط المعرّفة بواسطة نمط العلامة نظرًا لأن محددات الفئة تتسم بخصوصية نوعية أعلى عن محددات العلامة. لمزيد من المعلومات حول خصوصية CSS، راجع www.w3.org/TR/CSS2/cascade.html.)
يعرض الجزء Rules طريقتي عرض مختلفتين - طريقة العرض About أو طريقة العرض Rules - تبعًا للتحديد الخاص بك. في طريقة العرض About (طريقة العرض الافتراضية)، يعرض الجزء اسم القاعدة التي تعرّف خاصية CSS المحددة، واسم الملف الذي يشتمل على القاعدة. في طريقة العرض Rules، يعرض الجزء تتاليًا، أو تسلسلاً هيكليًا، لجميع القواعد التي تنطبق بشكل مباشر أو غير مباشر على التحديد الحالي. (تظهر العلامة التي تنطبق عليها القاعدة مباشرةً في العمود الأيمن.) يمكنك التبديل بين طريقتي العرض من خلال النقر فوق الزرين Show Information وShow Cascade في الركن العلوي الأيمن من الجزء Rules.
عند تحديد خاصية في الجزء Summary for Selection، تظهر جميع الخصائص الخاصة بقاعدة التعريف في الجزء Properties. (يتم تحديد قاعدة التعريف كذلك في الجزء Rules، في حالة تحديد طريقة العرض Rules.) على سبيل المثال، إذا كانت لديك قاعدة تسمى .maintext تعرّف عائلة الخط، وحجم الخط، واللون، فإن تحديد أي من هذه الخصائص في الجزء Summary for Selection سيؤدي إلى عرض جميع الخصائص المعرّفة بواسطة القاعدة .maintext في الجزء Properties، بالإضافة إلى قاعدة .maintext المحددة في الجزء Rules. (علاوة على ذلك، يؤدي تحديد أي قاعدة في الجزء Rules إلى عرض خصائص هذه القاعدة في الجزء Properties.) يمكنك حينئذ استخدام الجزء Properties لتعديل CSS سريعًا، سواء كانت مضمنة في المستند الحالي أو مرتبطة من خلال ورقة أنماط مرفقة. افتراضيًا، يعرض الجزء Properties الخصائص التي تم تعيينها بالفعل فقط، ويقوم بترتيبها ترتيبًا أبجديًا.
يمكنك اختيار عرض الجزء Properties في طريقتي عرض آخرتين. تعرض طريقة العرض Category الخصائص مجمعة في فئات، مثل Font، وBackground، وBlock، وBorder وما إلى ذلك، مع عرض الخصائص التي تم تعيينها بأعلى كل فئة، بنص أزرق اللون. وتعرض طريقة العرض List قائمة أبجدية بجميع الخصائص المتوفرة، وبالمثل تقوم بفرز الخصائص التي تم تعيينها بالجزء العلوي، مع عرضها بنص أزرق اللون. للتبديل بين طريقتي العرض، انقر فوق الزر Show Category View، أو Show List View، أو Show Only Set Properties الموجود بالركن السفلي الأيسر من الجزء Properties.
في جميع طرق العرض، يتم عرض الخصائص التي تم تعيينها باللون الأزرق، بينما يتم عرض الخصائص غير المتصلة بالتحديد مع خط أحمر يتوسطه خط. يؤدي إيقاف الماوس فوق إحدى القواعد غير المتصلة بالتحديد إلى عرض رسالة تفسر سبب عدم صلة الخاصية بالتحديد. تكون الخاصية في العادة غير متصلة بالتحديد نظرًا لتجاوزها أو لأنها ليست خاصية موروثة.
يتم تطبيق أي تغييرات تقوم بإجرائها في الجزء Properties على الفور، مما يتيح لك معاينة العمل الذي تقوم به أولاً بأول.
اللوحة CSS Styles في الوضع All
في الوضع All، تعرض اللوحة CSS Styles جزأين: الجزء All Rules (بأعلى)، والجزء Properties (بأسفل). يعرض الجزء All Rules قائمة بالقواعد المعرّفة في المستند الحالي بالإضافة إلى جميع القواعد المعرّفة في أوراق الأنماط المرفقة بالمستند الحالي. ويتيح لك الجزء Properties تحرير خصائص CSS لأي قاعدة محددة في الجزء All Rules.
يمكنك تغيير حجم أي الجزأين عبر سحب الحد الفاصل بين الجزأين، كما يمكنك تغيير حجم أعمدة الجزء Properties عبر سحب الفاصل الخاص بها.
عند تحديد قاعدة في الجزء All Rules، تظهر جميع الخصائص المعرّفة في هذه القاعدة في الجزء Properties. يمكنك حينئذ استخدام الجزء Properties لتعديل CSS سريعًا، سواء كانت مضمنة في المستند الحالي أو مرتبطة في ورقة أنماط مرفقة. افتراضيًا، يعرض الجزء Properties الخصائص التي تم تعيينها سابقًا فقط، ويقوم بترتيبها ترتيبًا أبجديًا.
يمكنك اختيار عرض الخصائص في طريقتي عرض آخرتين. تعرض طريقة العرض Category الخصائص مجمعة في فئات، مثل Font، وBackground، وBlock، وBorder وما إلى ذلك، مع عرض الخصائص التي تم تعيينها بأعلى كل فئة. وتعرض طريقة العرض List قائمة أبجدية بجميع الخصائص المتوفرة، وبالمثل تقوم بفرز الخصائص التي تم تعيينها بالجزء العلوي. للتبديل بين طريقتي العرض، انقر فوق الزر Show Category View، أو Show List View، أو Show Only Set Properties الموجود بالركن السفلي الأيسر من الجزء Properties. في جميع طرق العرض، يتم عرض الخصائص التي تم تعيينها باللون الأزرق.
يتم تطبيق أي تغييرات تقوم بإجرائها في الجزء Properties على الفور، مما يتيح لك معاينة العمل الذي تقوم به أولاً بأول.
أزرار وطرق عرض اللوحة CSS Styles
في الوضعين All وCurrent، تحتوي اللوحة CSS Styles على ثلاثة أزرار تتيح لك تعديل طريقة العرض في الجزء Properties (الجزء السفلي):
A. Category View B. List View C. Set Properties View
Category View
لتقسيم خصائص CSS المدعمة بواسطة Dreamweaver إلى ثمان فئات: الخط، والخلفية، والكتلة، والحد، والمربع، والقائمة، وتعيين الموضع، والملحقات. يتم إدراج الخصائص الخاصة بكل فئة في قائمة يمكنك توسيعها أو طيها عبر النقر فوق الزر Plus (+) الموجود إلى جوار اسم الفئة. تظهر الخصائص التي تم تعيينها (باللون الأزرق) بأعلى القائمة.
List View
لعرض جميع خصائص CSS المدعمة بواسطة Dreamweaver بترتيب أبجدي. تظهر الخصائص التي تم تعيينها (باللون الأزرق) بأعلى القائمة.
Set Properties View
لعرض الخصائص التي تم تعيينها فقط. تعد طريقة العرض Set Properties طريقة العرض الافتراضية.
تحتوي اللوحة CSS Styles في الوضعين All وCurrent على الأزرار التالية كذلك:
A. Attach Style Sheet B. New CSS Rule C. Edit Style D. Disable/enable CSS property E. Delete CSS rule
Attach Style Sheet
لفتح مربع الحوار Link External Style Sheet. حدد ورقة أنماط خارجية للارتباط بها أو استيرادها إلى المستند الحالي.
New CSS Rule
لفتح مربع حوار يمكنك من خلاله تحديد نوع النمط الذي تقوم بإنشائه - على سبيل المثال، لإنشاء نمط فئة، أو لإعادة تعريف علامة HTML، أو لتعريف محدد CSS.
Edit Style
لفتح مربع حوار يمكنك من خلاله تحرير الأنماط الموجودة في المستند الحالي أو في ورقة أنماط خارجية.
Delete CSS Rule
لإزالة القاعدة أو الخاصية المحددة من اللوحة CSS Styles، وإزالة التنسيق من أي عنصر تم تطبيقه عليه. (لكنه لا يقوم بإزالة خصائص الفئة أو المعرّف المشار إليها بواسطة هذا النمط). يمكن فصل (أو "إلغاء ارتباط") ورقة أنماط CSS المرفقة عن طريق الزر Delete CSS Rule كذلك.
ملاحظة:
انقر بزر الماوس الأيمن (في نظام التشغيل Windows) أو انقر مع الضغط على المفتاح Control (في نظام التشغيل Macintosh) فوق اللوحة CSS Styles لفتح قائمة سياق بالخيارات الخاصة باستخدام أوامر ورقة أنماط CSS.
فتح اللوحة CSS Styles
يمكنك استخدام اللوحة CSS Styles لعرض أنماط CSS، وإنشائها، وتحريرها، وإزالتها، وكذلك لإرفاق أوراق أنماط خارجية بالمستندات.
-
حدد Window > CSS Styles.
اضغط على Shift+F11.
انقر فوق الزر CSS في عارض الخصائص.
