تشرح هذه المقالة كيفية استخدام Cascading Style Sheets (CSS) لتنسيق النص على صفحة في Dreamweaver. يمكنك استخدام CSS لتنسيق النص ووضعه بطرق لا تستطيع HTML القيام بها، مما يمنحك مزيدًا من المرونة والتحكم في مظهر صفحتك.
فهم
أوراق الأنماط المتتالية لـ CSS (CSS) هي مجموعة من قواعد التنسيق التي تتحكم في مظهر المحتوى على صفحة الويب. عند استخدام CSS لتنسيق صفحة، يتم الاحتفاظ بالمحتوى والعرض التقديمي بشكل منفصل. محتوى الصفحة (رمز HTML) موجود في ملف HTML خاص به، بينما قواعد CSS التي تحدد تمثيل الكود موجودة في ملف آخر (ورقة أنماط خارجية) أو جزء آخر من مستند HTML (قسم عادةً). يمنحك استخدام CSS مرونة كبيرة وتحكمًا أكبر في مظهر صفحتك، بدءًا من تحديد موضع التخطيط بدقة ووصولاً إلى خطوط وأنماط محددة.
يتيح لك CSS التحكم في العديد من الخصائص التي لا يمكنك التحكم فيها باستخدام HTML وحده. على سبيل المثال، يمكنك تحديد أحجام خطوط ووحدات مختلفة (وحدات البكسل والنقاط وما إلى ذلك) للنص المحدد. باستخدام CSS لتعيين حجم الخط بالبكسل، يمكنك أيضًا ضمان اتباع نهج أكثر اتساقًا لتخطيط الصفحة ومظهرها عبر متصفحات متعددة.
تتكون قواعد تنسيق CSS من جزأين: المحددات والإعلانات. المحددات عبارة عن مصطلحات تحدد العناصر المنسقة (مثل P أو H1 أو اسم الفئة أو المعرف)، بينما يتم استخدام التعريفات لتحديد عناصر النمط. في المثال التالي، H1 هو المحدد وكل شيء بين الأقواس المتعرجة ({}) هو إعلان:
هذا هو المحتوى المقتبس:
H1 {
حجم الخط: 16 بكسل؛
الخط
-الوزن: غامق
}
يتكون الإعلان من جزأين: الخصائص (مثل عائلة الخطوط) والقيم (مثل Helvetica). ينشئ المثال أعلاه نمطًا لعلامة H1: سيكون حجم نص جميع علامات H1 المرتبطة بهذا النمط 16 بكسل ويستخدم الخط Helvetica والخط الغامق.
يشير المصطلح "المتتالي" إلى القدرة على تطبيق أنماط متعددة على نفس العنصر أو صفحة الويب. على سبيل المثال، يمكنك إنشاء قاعدة CSS واحدة لتطبيق اللون، وقاعدة أخرى لتطبيق الهوامش، ثم تطبيق كليهما على نفس النص في الصفحة. "تتتالي" الأنماط المحددة على العناصر الموجودة على صفحة الويب الخاصة بك، مما يؤدي في النهاية إلى إنشاء التصميم الذي تريده.
الميزة الرئيسية لـ CSS هي أنه من السهل التحديث طالما تم تحديث قاعدة CSS واحدة، فسيتم تحديث تنسيق جميع المستندات باستخدام النمط المحدد تلقائيًا إلى النمط الجديد.
يمكن تعريف أنواع القواعد التالية في Dreamweaver:
تسمح لك قواعد CSS المخصصة (وتسمى أيضًا "أنماط الفئة") بتطبيق خصائص النمط على أي نطاق نصي أو كتلة نصية. تبدأ كافة أنماط الفصل بنقطة (.). على سبيل المثال، يمكنك إنشاء نمط فئة يسمى .red، وتعيين خاصية اللون الخاصة بالقاعدة إلى اللون الأحمر، ثم تطبيق النمط على جزء من نص الفقرة المصمم.
تعيد قواعد علامات HTML تحديد تنسيق علامات محددة (مثل p أو h1). عندما تقوم بإنشاء أو تغيير قاعدة CSS لعلامة h1، يتم تحديث كل النص المنسق بعلامة h1 على الفور.
تعيد قواعد محدد CSS (الأنماط المتقدمة) تعريف تنسيق مجموعات معينة من العناصر، أو نماذج التحديد الأخرى التي يسمح بها CSS (على سبيل المثال، تطبيق المحدد td h2 عندما يظهر عنوان h2 داخل خلية جدول). يمكن للأنماط المتقدمة أيضًا إعادة تعريف تنسيق العلامات التي تحتوي على سمة معرف محددة (على سبيل المثال، يمكن تطبيق النمط المحدد بواسطة #myStyle على جميع العلامات التي تحتوي على زوج السمة/القيمة id="myStyle").
إنشاء ورقة أنماط جديدة
أولاً، ستقوم بإنشاء ورقة أنماط خارجية تحتوي على قواعد CSS التي تحدد أنماط نص الفقرة. عندما تقوم بإنشاء أنماط في ورقة أنماط خارجية، يمكنك التحكم في مظهر صفحات ويب متعددة في وقت واحد من موقع مركزي دون الحاجة إلى تعيين أنماط لكل صفحة ويب على حدة.
يمكن وضع قواعد CSS في المواقع التالية:
ورقة أنماط CSS الخارجية عبارة عن سلسلة من قواعد CSS مخزنة في ملف .css خارجي منفصل (وليس ملف HTML). يتم ربط ملف .css بصفحة واحدة أو أكثر في موقع الويب باستخدام الارتباطات الموجودة في القسم الرئيسي للمستند.
ورقة أنماط CSS الداخلية (أو المضمنة) هي عبارة عن سلسلة من قواعد CSS المضمنة ضمن علامة النمط في القسم الرئيسي لمستند HTML. على سبيل المثال، يحدد المثال التالي حجم الخط لكل النص في مستند يحتوي على مجموعة علامات فقرة:
:<head>
<نمط>
ص {
حجم الخط: 80 بكسل
}
</نمط>
</الرأس>:
يتم تعريف الأنماط المضمنة ضمن مثيلات علامات محددة داخل مستند HTML. على سبيل المثال،
"نمط p = "حجم الخط: 9 بكسل""
يحدد حجم الخط فقط للفقرات المنسقة بعلامات تحتوي على أنماط مضمنة.
يعرض Dreamweaver معظم خصائص الأنماط التي تقوم بتطبيقها ويعرضها في النافذة Document. يمكنك أيضًا معاينة المستند في نافذة المتصفح لمعرفة كيفية تطبيق الأنماط. تظهر بعض خصائص أنماط CSS بشكل مختلف في Microsoft Internet Explorer وNetscape Navigator وOpera وApple Safari.
حدد "ملف">"جديد".
في مربع الحوار New Document، حدد Base Page في عمود الفئة، وحدد CSS في عمود الصفحة الأساسية، ثم انقر فوق Create.
ستظهر ورقة أنماط فارغة في نافذة Document. تم تعطيل أزرار عرض التصميم وعرض التعليمات البرمجية. أوراق أنماط CSS هي ملفات نصية عادية ولن يتم استخدام محتوياتها للعرض في المتصفح.
احفظ ("ملف">"حفظ") هذه الصفحة باسم Cafe_townsend.css.
عندما تقوم بحفظ ورقة الأنماط الخاصة بك، تأكد من حفظها في المجلد Cafe_townsend (المجلد الجذر لموقع الويب الخاص بك).
اكتب الكود التالي في ورقة الأنماط:
p{
عائلة الخط: Verdana، sans-serif؛
حجم الخط: 11 بكسل؛
اللون: #000000؛
ارتفاع الخط: 18 بكسل؛
الحشو: 3 بكسل؛
}
أثناء قيامك بكتابة التعليمات البرمجية، يستخدم Dreamweaver تلميحات التعليمات البرمجية لاقتراح خيارات لمساعدتك في إكمال الإدخال الخاص بك. عندما ترى التعليمات البرمجية التي تريد أن يكملها Dreamweaver لك، اضغط على Enter (في Windows) أو Return (في Macintosh).
لا تنس إضافة فاصلة منقوطة بعد قيمة السمة في نهاية كل سطر.
سيبدو الكود المكتمل كالمثال التالي:
لعرض الدليل، اختر Help > References، ثم اختر O'Reilly CSS Reference من القائمة المنبثقة في لوحة References. احفظ ورقة الأنماط.
ورقة الأنماط المرفقة
عند إرفاق ورقة أنماط بصفحة ويب، يتم تطبيق القواعد المحددة في ورقة الأنماط على العناصر المقابلة في الصفحة. على سبيل المثال، عندما تقوم بإرفاق ورقة أنماط Cafe_townsend.css بصفحة Index.html، يتم تنسيق نص الفقرة بالكامل (النص المنسق بعلامات في تعليمات HTML البرمجية) وفقًا لقواعد CSS التي تحددها.
في نافذة المستندات، افتح ملف Index.html الخاص بـ Cafe Townsend. (إذا كان الملف مفتوحًا بالفعل، فانقر فوق علامة التبويب الخاصة به.)
حدد النص الأول الذي قمت بلصقه في الصفحة في البرنامج التعليمي: إضافة محتوى إلى الصفحة.
ابحث في عارض الخصائص وتأكد من تنسيق الفقرة باستخدام علامات الفقرة.
إذا كانت القائمة المنبثقة Format في عارض الخصائص تشير إلى Paragraph، فهذا يعني أن الفقرة قد تم تنسيقها باستخدام علامة الفقرة. إذا كانت قائمة التنسيق المنبثقة في عارض الخصائص تشير إلى لا شيء أو أي شيء آخر، فحدد فقرة لتنسيق الفقرة.
كرر الخطوة 3 للفقرة الثانية.
في لوحة CSS Styles (Window > CSS Styles)، انقر فوق الزر Attach Style Sheet في الركن الأيمن السفلي من اللوحة.
في مربع الحوار إرفاق ورقة أنماط خارجية، انقر فوق "استعراض" واستعرض للوصول إلى ملف Cafe_townsend.css الذي تم إنشاؤه في القسم السابق.
انقر فوق موافق.
سيتم تنسيق النص الموجود في نافذة Document وفقًا لقواعد CSS الموجودة في ورقة الأنماط الخارجية.
استكشف لوحة CSS Styles
تتيح لك لوحة CSS Styles تتبع قواعد وخصائص CSS التي تؤثر على عنصر الصفحة المحدد حاليًا، أو تؤثر على المستند بأكمله، وتعديل خصائص CSS دون فتح ورقة أنماط خارجية.
الرجاء التأكد من أن صفحة Index.html مفتوحة في النافذة Document.
في لوحة CSS Styles (Window > CSS Styles)، انقر فوق All في الجزء العلوي من اللوحة، ثم تحقق من قواعد CSS الخاصة بك.
في الوضع "الكل"، تعرض لك لوحة CSS جميع قواعد CSS التي تنطبق على المستند الحالي، سواء كانت في ورقة أنماط خارجية أو في المستند الخاص. يجب أن تشاهد فئتين رئيسيتين في جزء "جميع القواعد": فئة العلامات وفئة Cafe_townsend.css.
إذا لم يتم توسيع فئة التسمية، فانقر فوق علامة الزائد (+) لتوسيع الفئة.
انقر على قاعدة الجسم.
تظهر خاصية لون الخلفية بقيمة #000000 في جزء الخصائص السفلي.
لاحظ أنك قد تحتاج إلى طي اللوحات الأخرى، مثل لوحة File، لرؤية لوحة CSS Styles كاملة، ويمكنك أيضًا تغيير طول لوحة CSS Styles عن طريق سحب الحدود بين الأجزاء.
يمكنك تعيين لون خلفية الصفحة في البرنامج التعليمي: إنشاء تخطيط صفحة يستند إلى الجدول باستخدام مربع الحوار تعديل خصائص الصفحة. عندما تقوم بتعيين خصائص الصفحة بهذه الطريقة، يقوم Dreamweaver بكتابة نمط CSS المضمن في المستند.
انقر فوق علامة الجمع (+) لتوسيع فئة Cafe_townsend.css.
انقر فوق القاعدة.
ستظهر جميع الخصائص والقيم المحددة في ورقة الأنماط الخارجية للقاعدة p في جزء الخصائص أدناه.
في النافذة Document، انقر مرة واحدة في أي مكان في الفقرتين اللتين قمت بتنسيقهما للتو.
في لوحة CSS Styles، انقر فوق Current في الجزء العلوي من اللوحة، ثم افحص أنماط CSS الخاصة بك. في الوضع الحالي، تعرض لك لوحة CSS ملخصًا لخصائص التحديد الحالي. تتوافق الخصائص المعروضة مع خصائص القاعدة p في ورقة الأنماط الخارجية.
في القسم التالي، ستستخدم لوحة CSS Styles لإنشاء قاعدة جديدة. يعد إنشاء قواعد جديدة باستخدام لوحة CSS Styles أسهل بكثير من كتابة القواعد يدويًا، تمامًا كما حدث عندما قمت في الأصل بإنشاء ورقة أنماط خارجية.
إنشاء قواعد CSS جديدة
في هذا القسم، يمكنك استخدام لوحة CSS Styles لإنشاء قاعدة CSS مخصصة أو نمط فئة. تسمح لك أنماط الفئة بتعيين خصائص النمط لأي نطاق أو كتلة نصية ويمكن تطبيقها على أي علامة HTML. لمزيد من المعلومات حول الأنواع المختلفة لقواعد CSS، راجع فهم CSS.
في لوحة CSS Styles، انقر فوق New CSS Rule في الركن الأيمن السفلي من اللوحة.
في مربع الحوار New CSS Rule، حدد Class من خيار Selector Type. يجب تحديد هذا الخيار بشكل افتراضي.
أدخل .bold في مربع النص الاسم.
تأكد من كتابة نقطة (.) قبل كلمة "غامق". يجب أن تبدأ جميع أنماط الفصول الدراسية بنقطة
في القائمة المنبثقة "التعريف في"، حدد Cafe_townsend.css. يجب تحديد هذا الملف بشكل افتراضي.
انقر فوق موافق.
يظهر مربع الحوار تعريف قاعدة CSS، مما يشير إلى أنك تقوم بإنشاء نمط فئة يسمى .bold في ملف Cafe_townsend.css.
في مربع الحوار "تعريف قاعدة CSS"، قم بما يلي:
في مربع النص "الخط"، أدخل Verdana, sans-serif.
في مربع النص الحجم، أدخل 11 وحدد Pixels في القائمة المنبثقة الموجودة على اليمين مباشرةً.
في مربع النص Row Height، أدخل 18 وحدد Pixels في القائمة المنبثقة الموجودة على اليمين مباشرةً.
اختر غامق من القائمة المنبثقة الوزن.
في مربع النص اللون، أدخل #990000.
تلميح لمزيد من المعلومات حول خصائص CSS، راجع دليل O'Reilly المرجعي المضمن في Dreamweaver. لعرض الدليل، اختر Help > References، ثم اختر O'Reilly CSS Reference من القائمة المنبثقة في لوحة References.
انقر فوق موافق.
انقر فوق الزر All الموجود أعلى لوحة CSS Styles.
إذا لم يتم توسيع فئة Cafe_townsend.css، فانقر فوق زر علامة الجمع (+) بجوار الفئة.
يمكنك أن ترى أن Dreamweaver قد أضاف نمط الفئة .bold إلى قائمة القواعد المحددة في ورقة الأنماط الخارجية. إذا قمت بالنقر فوق قاعدة .bold في جزء All Rules، فستظهر خصائص القاعدة في جزء Properties. تظهر القواعد الجديدة أيضًا في القائمة المنبثقة Style في عارض الخصائص.
تطبيق نمط الفصل على النص
لقد قمت الآن بإنشاء قاعدة الفصل وتطبيقها على نص فقرة ما.
في النافذة Document، حدد الكلمات الأربع الأولى من النص في الفقرة الأولى: Chef Townsend's Visioner Chef.
في عارض الخصائص (Window > Properties)، اختر الخط الغامق من القائمة المنبثقة Style.
سيتم تطبيق نمط النمط "الغامق" على النص الخاص بك.
كرر الخطوة 2 لتطبيق نمط النمط "الغامق" على الكلمات الأربع الأولى من الفقرة الثانية.
احفظ الصفحة.
تنسيق نص شريط التنقل
بعد ذلك، ستستخدم CSS لتطبيق الأنماط على نص رابط شريط التنقل. تستخدم العديد من صفحات الويب صورًا مستطيلة ملونة مع نص مضمن لإنشاء أشرطة التنقل. ومع ذلك، إذا كنت تستخدم CSS، فكل ما تحتاج إلى تعيينه هو نص الرابط وبعض التنسيق. باستخدام خاصية العرض: الكتلة وتعيين عرض الكتلة، يمكنك إنشاء مستطيل بشكل فعال دون استخدام صورة إضافية.
إنشاء قاعدة جديدة للتنقل
افتح ملف Cafe_townsend.css إذا لم يكن مفتوحًا بالفعل، أو انقر فوق علامة التبويب الخاصة به لعرض الملف.
قم بتعريف قاعدة جديدة عن طريق كتابة التعليمة البرمجية التالية بعد نمط الفئة .bold في الملف:
.navigation {
}
هذه قاعدة فارغة.
يجب أن يبدو الكود الموجود في الملف مثل المثال التالي:
احفظ ملف Cafe_townsend.css.
بعد ذلك، ستستخدم لوحة CSS Styles لإضافة خصائص إلى القاعدة.
إذا لم يكن الملف Index.html مفتوحًا، فافتح الملف.
في لوحة CSS Styles، تأكد من تحديد الوضع All، وحدد قاعدة .navigation الجديدة، وانقر فوق Edit Styles في الزاوية اليمنى السفلية من اللوحة.
في مربع الحوار "تعريف قاعدة CSS"، قم بما يلي:
في مربع النص "الخط"، أدخل Verdana, sans-serif.
حدد 16 من القائمة المنبثقة "الحجم"، ثم حدد Pixels من القائمة المنبثقة الموجودة على يمينها مباشرةً.
حدد عادي من قائمة النمط المنبثقة.
حدد لا شيء من قائمة التعديل.
اختر غامق من القائمة المنبثقة الوزن.
في مربع النص اللون، أدخل #FFFFFF.
لعرض الدليل، اختر Help > References، ثم اختر O'Reilly CSS Reference من القائمة المنبثقة في لوحة References.
انقر فوق موافق.
ستستخدم الآن لوحة CSS Styles لإضافة المزيد من الخصائص إلى قاعدة .navigation.
في لوحة CSS Styles، تأكد من تحديد قاعدة التنقل، ثم انقر فوق Show List View.
تؤدي طريقة عرض القائمة إلى قيام جزء الخصائص بعرض كافة الخصائص المتوفرة بترتيب أبجدي (على عكس طريقة عرض مجموعة الخصائص، التي تعرض الخصائص التي تم تعيينها فقط).
انقر في العمود الموجود على يمين خاصية لون الخلفية.
لرؤية المحتويات الكاملة للخاصية، ضع مؤشر الماوس فوق الخاصية.
أدخل القيمة السداسية العشرية #993300 واضغط على Enter (في Windows) أو Return (في Macintosh).
تلميح لرؤية تأثير عملك على ورقة أنماط خارجية، احتفظ بملف Cafe_townsend.css مفتوحًا في النافذة Document أثناء عملك. عندما تقوم بإجراء تحديدات في لوحة CSS Styles، سترى أيضًا أن Dreamweaver يكتب تعليمات برمجية CSS في ورقة الأنماط.
ابحث عن خاصية العرض (قد تحتاج إلى التمرير لأسفل)، وانقر مرة واحدة في العمود الأيمن، ثم حدد كتلة من القائمة المنبثقة.
ابحث عن خاصية الحشو، وانقر مرة واحدة في العمود الأيمن، وأدخل قيمة 8 بكسل، ثم اضغط على Enter (في Windows) أو Return (في Macintosh).
ابحث عن خاصية العرض، وانقر مرة واحدة في العمود الأيمن، وأدخل 140 في مربع النص الأول، وحدد Pixels من القائمة المنبثقة، ثم اضغط على Enter (في Windows) أو Return (في Macintosh).
انقر فوق إظهار خصائص الإعدادات لعرض الخصائص التي قمت بتعيينها في جزء الخصائص فقط.
انقر فوق الملف Cafe_townsend.css لعرضه. ستلاحظ أن Dreamweaver قام بإضافة كافة الخصائص التي حددتها إلى الملف.
احفظ وأغلق ملف Cafe_townsend.css.
لقد قمت الآن بإنشاء قاعدة تقوم بتنسيق نص شريط التنقل. بعد ذلك، عليك تطبيق القاعدة على الروابط المحددة.
تطبيق القواعد
مع فتح صفحة Index.html في النافذة Document، انقر فوق الكلمة Cuisine لوضع نقطة الإدراج في مكان ما في الكلمة.
في محدد التسمية، انقر فوق التسمية الموجودة في أقصى اليمين.
ستحدد هذه العملية كل النص الخاص بالتسمية أو الارتباط المحدد.
في عارض الخصائص (Window > Properties)، حدد Navigation من القائمة المنبثقة Style.
في النافذة Document، تغير مظهر نص المطبخ بالكامل. تم الآن تنسيق النص كزر شريط تنقل استنادًا إلى الخصائص التي حددتها لقاعدة .navigation في القسم السابق.
كرر الخطوات من 1 إلى 3 لكل رابط في شريط التنقل.
يجب عليك تعيين نمط فئة التنقل لكل تسمية أو رابط، لذلك من المهم تحديد كل رابط على حدة باستخدام محدد التسمية ثم تعيين نمط فئة لكل رابط واحدًا تلو الآخر.
إذا كانت لديك مشكلة في تنسيق نص الارتباط، فتأكد من وجود مسافات (وليس أحرف إرجاع) بين كل (أو مجموعة) كلمات مرتبطة. تأكد أيضًا من أن المسافة بين الرابطين غير مرتبطة بحد ذاتها. إذا كانت المسافات مرتبطة، فحدد المسافات المرتبطة بعناية، وقم بإلغاء تحديد مربع النص Link في عارض الخصائص، ثم اضغط على Enter (في Windows) أو Return (في Macintosh).
عند الانتهاء من تنسيق جميع الكلمات في شريط التنقل، احفظ الصفحة وقم بمعاينة عملك في المتصفح (ملف > معاينة في المتصفح).
يمكنك الضغط على الرابط للتأكد من أنه يعمل.
إضافة تأثير تمرير الماوس
ستضيف الآن تأثير تمرير يؤدي إلى تغيير لون خلفية شريط التنقل في كل مرة يمر فيها مؤشر الماوس فوق الرابط. لإضافة تأثير تمرير الماوس، قم بإضافة قاعدة جديدة تحتوي على الفئة الزائفة :hover.
حول... حول:hover الفئات الزائفة الفئات الزائفة هي طريقة للتأثير على عناصر معينة في مستند HTML، لا تعتمد على كود HTML للمستند نفسه، ولكن تعتمد على الشروط الخارجية الأخرى التي يطبقها متصفح الويب. يمكن أن تكون الفئات الزائفة ديناميكية، مما يعني أنه أثناء تفاعل المستخدم مع المستند، قد تكتسب العناصر الموجودة على الصفحة فئات زائفة أو تفقدها.
تؤثر الفئة الزائفة :hover على التغييرات التي تطرأ على عنصر الصفحة المنسق عندما يقوم المستخدم بتمرير مؤشر الماوس فوق العنصر. على سبيل المثال، عند إضافة الفئة الزائفة :hover إلى نمط فئة .navigation (.navigation:hover) لإنشاء قاعدة جديدة، فإن جميع عناصر النص المنسقة بقاعدة .navigation ستتغير بناءً على خصائص .navigation: قاعدة تحوم.
افتح الملف Cafe_townsend.css.
حدد قاعدة التنقل بأكملها.
انسخ النص ("تحرير"> "نسخ").
انقر مرة واحدة في نهاية القاعدة، ثم اضغط على Enter (في Windows) أو Return (في Macintosh) عدة مرات أخرى لتوفير بعض المساحة.
الصق ("تحرير" > "لصق") النص المنسوخ في المساحة التي أنشأتها للتو.
أضف الفئة الزائفة :hover إلى محدد التنقل الذي تم لصقه كما يلي:
في قاعدة .navigation:hover الجديدة، استبدل لون الخلفية الحالي (#993300) بـ #D03D03.
احفظ وأغلق الملف.
افتح ملف Index.html في النافذة Document وقم بمعاينة الصفحة في المستعرض (File > Preview in Browser).
عند وضع مؤشر الماوس على أي رابط، يمكنك رؤية تأثير تمرير الماوس الجديد.