دليل المستخدم إلغاء

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

  1. دليل مستخدم Dreamweaver
  2. مقدمة
    1. أساسيات تصميم الويب التفاعلي
    2. الجديد في Dreamweaver
    3. تطوير الويب باستخدام Dreamweaver - نظرة عامة
    4. Dreamweaver | الأسئلة الشائعة
    5. اختصارات لوحة المفاتيح‬‏‫
    6. متطلبات النظام لبرنامج Dreamweaver
    7. ملخص الميزات
  3. Dreamweaver وCreative Cloud
    1. مزامنة إعدادات Dreamweaver مع Creative Cloud
    2. مكتبات Creative Cloud في Dreamweaver
    3. استخدام ملفات Photoshop في Dreamweaver
    4. العمل باستخدام Adobe Animate وDreamweaver
    5. استخراج ملفات SVG المحسّنة من المكتبات
  4. مساحات عمل Dreamweaver وطرق عرضه
    1. مساحة عمل Dreamweaver
    2. تحسين مساحة عمل Dreamweaver للتطوير المرئي
    3. البحث عن الملفات استنادًا إلى اسم الملف أو المحتوى | Mac OS
  5. إعداد المواقع
    1. حول مواقع Dreamweaver
    2. إعداد إصدار محلي من موقعك
    3. الاتصال بخادم نشر
    4. إعداد خادم اختبار
    5. استيراد إعدادات موقع Dreamweaver وتصديرها
    6. إحضار مواقع ويب موجودة من خادم بعيد إلى جذر موقع الويب المحلي
    7. ميزات الوصول في Dreamweaver
    8. الإعدادات المتقدمة
    9. تعيين تفضيلات الموقع لنقل الملفات
    10. تحديد إعدادات خادم الوكيل في Dreamweaver
    11. مزامنة إعدادات Dreamweaver مع Creative Cloud
    12. استخدام Git في Dreamweaver
  6. إدارة الملفات
    1. إنشاء الملفات وفتحها
    2. إدارة الملفات والمجلدات
    3. إحضار الملفات من الخادم ووضعها فيه
    4. سحب الملفات وإيداعها
    5. مزامنة الملفات
    6. مقارنة الملفات لمعرفة الاختلافات
    7. حماية ملفات ومجلدات في موقع Dreamweaver
    8. تمكين Design Notes لمواقع Dreamweaver وتعطيلها
    9. منع الاستغلال المحتمل لـ Gatekeeper
  7. التخطيط والتصميم
    1. استخدام الأدوات المساعدة المرئية للتخطيط
    2. حول استخدام CSS لتخطيط صفحاتك
    3. تصميم مواقع ويب تفاعلية باستخدام Bootstrap
    4. إنشاء استعلامات الوسائط واستخدامها في Dreamweaver
    5. عرض المحتوى باستخدام الجداول
    6. الألوان
    7. تصميم استجابة باستخدام مخططات الشبكة المرنة
    8. ميزة Extract في Dreamweaver
  8. CSS
    1. فهم أوراق الأنماط المتتالية
    2. تخطيط الصفحات باستخدام CSS Designer
    3. استخدام معالجات CSS الأولية في Dreamweaver
    4. كيفية تعيين تفضيلات أنماط CSS في Dreamweaver
    5. نقل قواعد CSS في Dreamweaver
    6. تحويل CSS مضمنة إلى قاعدة CSS في Dreamweaver
    7. استخدام علامات div
    8. تطبيق تدرجات على الخلفية
    9. إنشاء تأثيرات CSS3 الانتقالية وتحريرها في Dreamweaver
    10. تنسيق التعليمات البرمجية
  9. محتويات الصفحة وأصولها
    1. تعيين خصائص الصفحة
    2. تعيين خصائص عناوين CSS وخصائص ارتباطات CSS
    3. استخدام النص
    4. البحث عن النص والعلامات والسمات واستبدالها
    5. لوحة DOM
    6. التحرير في Live View
    7. ترميز المستندات في Dreamweaver
    8. تحديد العناصر وعرضها في النافذة Document
    9. تعيين خصائص النص في عارض الخصائص
    10. إجراء التدقيق الإملائي لصفحة ويب
    11. استخدام القواعد الأفقية في Dreamweaver
    12. إضافة مجموعات الخطوط وتعديلها في Dreamweaver
    13. استخدام الأصول
    14. إدراج التواريخ وتحديثها في Dreamweaver
    15. إنشاء الأصول المفضلة وإدارتها في Dreamweaver
    16. إدراج الصور وتحريرها في Dreamweaver
    17. إضافة كائنات وسائط
    18. إضافة مقاطع الفيديو في Dreamweaver
    19. إدراج فيديو HTML5
    20. إدراج ملفات SWF
    21. إضافة تأثيرات صوتية
    22. إدراج صوت HTML5 في Dreamweaver
    23. العمل باستخدام عناصر المكتبة
    24. استخدام النصوص العربية والعبرية في Dreamweaver
  10. الربط والتنقل
    1. حول الربط والتنقل
    2. الربط
    3. مخططات الصور
    4. استكشاف أخطاء الارتباطات وحلها
  11. عناصر واجهة jQuery وتأثيراتها
    1. استخدام عناصر واجهة مستخدم jQuery UI والجوال في Dreamweaver
    2. استخدام تأثيرات jQuery في Dreamweaver
  12. كتابة التعليمات البرمجية لمواقع الويب
    1. حول كتابة التعليمات البرمجية في Dreamweaver
    2. بيئة كتابة التعليمات البرمجية في Dreamweaver
    3. تعيين تفضيلات التعليمات البرمجية
    4. تخصيص ألوان التعليمات البرمجية
    5. كتابة تعليمة برمجية وتحريرها
    6. تلميحات التعليمات البرمجية وإكمال التعليمات البرمجية
    7. طي التعليمات البرمجية وتوسيعها
    8. إعادة استخدام التعليمات البرمجية مع أجزاء التعليمات البرمجية
    9. فحص التعليمات البرمجية
    10. تحسين التعليمة البرمجية
    11. تحرير التعليمة البرمجية في طريقة العرض Design
    12. العمل باستخدام محتوى العنوان للصفحات
    13. إدراج تضمينات على جانب الخادم في Dreamweaver
    14. استخدام مكتبات العلامات في Dreamweaver
    15. استيراد علامات مخصصة إلى Dreamweaver
    16. استخدام سلوكيات JavaScript (إرشادات عامة)
    17. تطبيق سلوكيات JavaScript المضمنة
    18. نبذة عن لغتي XML وXSLT
    19. تنفيذ تحويلات XSL على جانب الخادم في Dreamweaver
    20. تنفيذ تحويلات XSL على جانب العميل في Dreamweaver
    21. إضافة كيانات أحرف لـ XSLT في Dreamweaver
    22. تنسيق التعليمات البرمجية
  13. عمليات سير العمل على مستوى المنتجات
    1. تثبيت الملحقات واستخدامها في Dreamweaver
    2. التحديثات من داخل التطبيق في Dreamweaver
    3. إدراج مستندات Microsoft Office في Dreamweaver ‏(Windows فقط)
    4. استخدام Fireworks وDreamweaver
    5. تحرير المحتوى في مواقع Dreamweaver باستخدام Contribute
    6. تكامل Dreamweaver مع تطبيق Business Catalyst
    7. إنشاء حملات إعلانية خاصة عبر البريد الإلكتروني
  14. القوالب
    1. حول قوالب Dreamweaver
    2. التعرف على القوالب والمستندات القائمة على القوالب
    3. إنشاء قالب Dreamweaver
    4. إنشاء مناطق قابلة للتحرير في القوالب
    5. إنشاء مناطق وجداول التكرار في Dreamweaver
    6. استخدام المناطق الاختيارية في القوالب
    7. تحديد سمات العلامات القابلة للتحرير في Dreamweaver
    8. كيفية إنشاء قوالب متداخلة في Dreamweaver
    9. تحرير القوالب وتحديثها وحذفها
    10. تصدير محتوى xml واستيراده في Dreamweaver
    11. تطبيق أو إزالة قالب من مستند موجود
    12. تحرير المحتوى في قوالب Dreamweaver
    13. قواعد بناء الجملة لعلامات القوالب في Dreamweaver
    14. تعيين تفضيلات التمييز لمناطق القالب
    15. فوائد استخدام القوالب في Dreamweaver
  15. شاشات الهاتف المحمول والشاشات المتعددة
    1. إنشاء استعلامات الوسائط
    2. تغيير اتجاه الصفحة للأجهزة الجوالة
    3. إنشاء تطبيقات الويب للأجهزة الجوالة باستخدام Dreamweaver
  16. المواقع والصفحات ونماذج الويب الديناميكية
    1. فهم تطبيقات الويب
    2. إعداد الكمبيوتر لتطوير التطبيقات
    3. استكشاف أخطاء اتصالات قاعدة البيانات وحلها
    4. إزالة برامج الاتصال النصية في Dreamweaver
    5. تصميم صفحات ديناميكية
    6. نظرة عامة على مصادر المحتوى الديناميكي
    7. تعريف مصادر المحتوى الديناميكي
    8. إضافة محتوى ديناميكي إلى الصفحات
    9. تغيير المحتوى الديناميكي في Dreamweaver
    10. عرض سجلات قاعدة البيانات
    11. توفير البيانات المباشرة واستكشاف أخطائها وحلها في Dreamweaver
    12. إضافة سلوكيات خادم مخصصة في Dreamweaver
    13. إنشاء النماذج باستخدام Dreamweaver
    14. استخدام النماذج لجمع معلومات من المستخدمين
    15. إنشاء نماذج ColdFusion وتمكينها في Dreamweaver
    16. إنشاء نماذج الويب
    17. دعم HTML5 محسّن لعناصر النماذج
    18. تطوير نموذج باستخدام Dreamweaver
  17. إنشاء التطبيقات مرئيًا
    1. إنشاء صفحات رئيسية وصفحات تفاصيل في Dreamweaver
    2. إنشاء صفحات البحث والنتائج
    3. إنشاء صفحة إدراج سجل
    4. إنشاء صفحة تحديث سجل في Dreamweaver
    5. إنشاء صفحات حذف سجل في Dreamweaver
    6. استخدام أوامر ASP لتعديل قاعدة البيانات في Dreamweaver
    7. إنشاء صفحة تسجيل
    8. إنشاء صفحة تسجيل دخول
    9. إنشاء صفحة يمكن للمستخدمين المخولين فقط الوصول إليها
    10. تأمين المجلدات في Coldfusion باستخدام Dreamweaver
    11. استخدام مكونات ColdFusion في Dreamweaver
  18. اختبار مواقع الويب ومعاينتها ونشرها
    1. معاينة الصفحات
    2. معاينة صفحات ويب Dreamweaver على أجهزة متعددة
    3. اختبار موقع Dreamweaver

 

استخدم هذا الموضوع لمعرفة المفاهيم الأساسية لـ 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 كذلك بعرض معظم الأنماط المطبقة مباشرةً في طريقة العرض Design. (إلا أن معاينة المستند في نافذة مستعرض يمنحك عرضًا مباشرًا للصفحة بأكبر دقة ممكنة.) يتم عرض بعض أنماط 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 { 
font-family: Arial; 
font-style: italic; 
}

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

body { 
font-family: Arial; 
font-style: italic; 
} 
p { 
font-family: Courier; 
font-style: normal; 
}

تظهر جميع النصوص الأساسية بالخط 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 قد تم تعيينها إلى القيم الافتراضية لها.

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 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 الأولية.
شعار Adobe

تسجيل الدخول إلى حسابك