CSS المتقدم

مكتمل

أورَاق الأنمَاط المتتَالية (CSS) هي لغة تحدد نمط صفحة الويب مِن خلال وصف كيفِية عرض عنَاصر HTML الخَاصة بهَا، بمَا فِي ذلك النصوص والخطوط والألوان والخلفِيَات والحدود والهوامش.

يمكن أن يكون تغيير نمط صفحَات موقع الويب الخَاص بك بسيطًا مثل تَطبِيق عبارَات CSS مباشرة عَلى الصفحة. عندمَا تقوم بتحرير محتوى الصفحة باستِخدَام Visual Studio Code، CSS يتوفر كمِلَف مِنفصل. يتم تضمين هذَا المِلَف كجزء مِن محتوى الصفحة، وCSS ينطبق عَلى تلك الصفحة. عَلى سَبِيل المِثَال، إذَا كنت بحَاجة إلى زيَادة ارتفَاع شريط التنقل العلوي فِي الصفحة الرئيسية لملاءمة شعار، فِيمكنك تحرير مِلَف CSS ثم إضَافَة بيَان CSS مخصص.

.navbar-static-top.navbar { min-height: 100px; }

ملاحظة

سيتم تَطبِيق عبارَات CSS التي تمت إضَافتهَا إلى صفحة الويب عَلى صفحة الويب هذه فقط.

يعمل هذَا الأسلوب معَ التسويَات الصغيرة عَلى صفحة واحدة، ولكن الطريقة الأفضل هي تسجيل التخصيصَات فِي مِلَف واحد أو أكثر CSS ثم تَطبِيقهَا عَلى موقع الويب بأكمله أو أجزَاء مِنه.

سمَات Power Pages

يستخدم Power Pages إطَار Bootstrap للواجهة الأمَامية للتحكم فِي تصميم وتخطيط موقع الويب. Bootstrap عبارة عَن حزمة مِن قَوَالب تصميم HTML وCSS للطباعة والنَمَاذِج والأزرَار والتنقل وعنَاصر أخرى، بمَا فِي ذلك ملحقَات JavaScript الاختيَارية. تتمثل إحدى الميزَات الجذَابة والمبتكرة فِي Bootstrap فِي أنه يوفر تخطيطًا سريع الاستجَابة؛ يقوم تلقَائيًا بضبط موقع الويب الخَاص بك بحيث يكون له مظهر ممتع عَلى جميع الأجهزة مِن الهواتف الصغيرة إلى أجهزة الكمبيوتر المكتبية الكبيرة.

يحدد المظهر مظهر جميع الصفحَات عَلى موقع الويب الخَاص بك لضمَان التنَاسق البصري. يتحكم فِي بنية التنقل والرَاية والألوان والخطوط والعنَاصر المرئية الأخرى لصفحة الويب.

يمكنك تطبيق قَوَالب Power Pages باستِخدَام مكونَات Bootstrap القيَاسية معَ الحد الأدنى مِن الأنمَاط المخصصة الأسَاسية. نتيجة لذلك، يمكنك الاستفَادة مِن خيَارَات التخصيص التي يوفرهَا Bootstrap لتخصيص السمَات بطريقة يتم تَطبِيقهَا باستمرَار عَلى موقع الويب بأكمله.

تَطبِيق التخصيصَات

يقدم Power Pages مجموعة شَاملة مِن السمَات والأدوات لتصميم موقع الويب الخَاص بك. اختر مِن بين العديد مِن السمَات لاستخدَامهَا عَلى موقع الويب الخَاص بك وقم بإضفَاء الطَابع الشخصي عليهَا باستِخدَام خيَارَات التصميم.

تتحكم مسَاحة عمل التصميم فِي استوديو تصميم Power Pages فِي أنمَاط CSS التي يتم تَطبِيقهَا عَلى موقع الويب، وتمكنك مِن تطبيق تصميمَات مواقع عالمية. يمكنك دمج تعديلات العلامة التجَارية للشركة وعرض التعديلات فِي إصدَار أولي الجَانب الأيمِن لنَافذة التَطبِيق. يوفر التصميم سمَات متعددة مصممة مسبقًا، ولكل مِنهَا، يمكنك تعديل نظَام الألوان ولون الخلفِية وأنواع الخطوط وتصميمَات الأزرَار وتباعد الأقسَام.

السمَات

تُنشئ النُسق مظهرًا وسلوكًا شَاملين للموقع عَن طريق تحديد أنمَاط لعنَاصر نصية متنَوعة وأزرَار وارتباطَات وتخطيطَات أقسَام. إذَا كان الموقع يتطلب تخصيصَات أخرى، فِيمكنك استخدَام ميزة إدَارة CSS.

فِي مسَاحة عمل الأنمَاط، يمكنك الاختيَار مِن بين السمَات المتَاحة. بَعد تحديد سمة، يمكنك تخصيص عنَاصر فردية بشكل أكبر لإنشَاء التصميم المطلوب.

إدَارة CSS

للوُصُول إلى ميزة إدَارة CSS، حدد علامة الحذف (...) ثم حدد إدَارة CSS فِي اللوحة.

تحتوي جميع مواقع ويب Power Pages عَلى المِلَفَات التَالِية مضمِنة بالفعل فِي جميع الصفحَات: bootstrap.min.css, theme.css وportalbasictheme.css. تحدد هذه المِلَفَات أنمَاطَا لموقع الويب بالكامل. يمكنك تحميل المزيد مِن مِلَفَات CSS باستِخدَام الارتباط تحميل ثم التحرير فِي محرر Visual Studio Code. لمزيد مِن المعلومَات، رَاجع إدَارة مِلَفَات CSS فِي Power Pages.

ضع فِي اعتبارك العوامل التَالِية عند تحديد كيفِية التعامل معَ تعديلات الأنمَاط لموقع الويب الخَاص بك:

• أنشئ تصميمَا كاملا للموقع بالكامل ثم استبدل محتوى مِلَف CSS. تعمل هذه العملية بصورةٍ جيدةٍ إذَا كنت تمتلك حق الوُصُول إلى مصممين بمستوى جيد يمكنهم ضمَان تحديد جميع العنَاصر ذَات الصلة. ينشئ هذَا النهج تصميمَا يتم التحكم فِيه مركزيَا ويضمِن الاتسَاق فِي جميع جوانب موقع الويب.

• أعد تحديد العنَاصر التي تتطلب التعديل فقط، مثل اللون وحجم الخط. قم بإنشَاء وتحميل مِلَف CSS الذي يحتوي فَقَط عَلى هذه التسويَات المتزَايدة. تعمل هذه العملية بشكل جيد إذَا كان تصميمك المستهدف قريبًا مِن التصميم المضمِن فِي القَالبِ المحدَّد والمطلوب فَقَط تعديلات طفِيفة عَلى التصميم. يسمح هذَا الأسلوب بالتعديلات الإضَافِية التي يمكن للمطورين الترَاجع عنهَا.

تَحذِير

إذَا قَررت الكتَابة فوق مِلَفَات bootstrap.min.css أو theme.css، فتأكد مِن تنزيل نسخة احتيَاطية مِن هذه المِلَفَات قبل استبدَالهَا. إذَا كان CSS البديل الخَاص بك غير صَالحٍ أو غير مكتملٍ، فقد لا تتَمكن مِن الترَاجع عَن الاستبدَال وسيتعين عليك استعادة محتوى هذه المِلَفَات إذَا أصبحت المدخل غير صَالحة للعمل.

تَطبِيق التخصيصَات عَلى مِنَاطق موقع ويب معينة

يمكنك إضَافَة تخصيصَات إلى صفحَات أو أقسَام معينة مِن موقع ويب عَن طريق إضَافَة سجل مِلَف الويب باستِخدَام تَطبِيق Power Pages Management معَ مرفق CSS إلى مِلَف. سَوفَ تحتَاج إلى تحديد الصفحة الرئيسية فِي سجل مِلَف الويب حتى يتم تَطبِيق السمة عَلى الصفحة الرئيسية وجميع العنَاصر المتفرعة مِن تلك الصفحة. يتيح لك هذَا الأسلوب إمكانية إنشَاء أقسَام مخصصة بالكامل مِن موقعك.

هَام

يجب أن ينتهي عنوان URL الجزئي بـ .css Power Pages للتعرف عليه وتَطبِيقه عَلى صفحة الويب والصفحَات الفرعية الخَاصة بهَا.

تخصيص تمهيد التشغيل

الطريقة القيَاسية لإنشَاء إصدَار مخصص مِن Bootstrap هي مِن خلال موقع Bootstrap الرسمي. ومعَ ذلك، نظرًا لشعبية Bootstrap، أصبح هنَاك الآن العديد مِن المواقع الأخرى التي تم إنشَاؤهَا لهذَا الغرض. قد توفر هذه المواقع واجهة سهلة الاستخدَام لتخصيص Bootstrap أو إصدَارَات مصممة مسبقًا مِن Bootstrap لتنزيلهَا. أدَاة تخصيص Bootstrap الرسمية يحتَوي المَوقعُ عَلى مزيدٍ مِن المَعلومَات حول تخصيص Bootstrap.

‏‫نَصِيحة

عندمَا تقوم بتخصيص Bootstrap، حدد فَقَط العنَاصر التي تتطلب التعديل. عَلى سَبِيل المِثَال، إذَا كنت تريد استبدَال الخطوط القيَاسية بالخطوط القيَاسية لشركتك، فحدد مكون الطباعة مِن Bootstrap. سيسَاعد هذَا الأسلوب فِي تقليل فرص إعادة كتَابة عنَاصر CSS الأخرى عَن طريق الخطأ.

بَعد أن تقوم بتخصيص Bootstrap، فإنه سينشئ مِلَفًا واحدًا أو أكثر تريد تحميله كمِلَفَات ويب. مَا لم يكن هدفك هو استبدَال الأنمَاط الأصلية تمَامًا، فتأكد مِن تجنب استخدَام bootstrap.cssأو bootstrap.min.cssأو theme.css أو theme.min.css المِلَفَات الموجودة فِي عنَاوين URL الجزئية بسبب قيَام Power Pages بمعالجة مِلَفَات CSS.

CSS لإجرَاء تسويَات بسيطة

غالبًا مَا يتجَاهل المطورون CSS عند الحَاجة إلى تسويَات بسيطة، مثل إخفَاء العنصر أو ضبط الهوامش لتنَاسب تسمية عريضة. إطَار عمل Bootstrap هو أسَاس التصميم فِي مواقع ويب Power Pages، وهو يحدد العديد مِن الأنمَاط التي تتحكم فِي المظهر والتخطيط المتجَاوب متعدد الأعمدة. عَلى سَبِيل المِثَال، إذَا كنت تريد إخفَاء عمود معين وإرسَال قيمة افترَاضية بدلا مِن تجميع مدخلات المستخدم، فِيمكنك استخدَام جدول بيَانَات تعريف للعمود ثم تحديد المعلمَات التَالِية:

• اضبط تسمية عَلى مسَافة واحدة.

• اضبط فئة CSS لـ إخفَاءهَا.

• قم بتعيين القيمة الافترَاضية عَلى النحو المطلوب.

بدلا مِن اللجوء إلى JavaScript، يمكنك إنجَاز هذه المهمة باستِخدَام التَكوِين فقط. استخدَام CSS، حيثمَا أمكن، له مزَايَا معينة:

• ينطبق CSS عند التحميل؛ إنه أسرع لأنه لا يتعين عليك الانتظَار حتى ينتهي تحميل المستند.

• يكون CSS دَائمًا قيد التشغيل ويستمر فِي التَطبِيق عَلى العنَاصر ذَات الصلة، حتى إذَا غيّرت JavaScript بنية المستند وتضيف العنَاصر أو تزيلهَا.

• بالنسبة إلى مهَامٍ معينةٍ مرتبطةٍ برؤية عنصرٍ مَا وتخطيطه سريع الاستجَابة، يمكن أن تكون CSS أسهل فِي الاستخدَام مِن JavaScript، ممَا يعني صيَانة أقل ومسَاحة أقل للخطأ.