CSS المتقدم

مكتمل

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

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

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

ملاحظة

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

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

سمات المدخل

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

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

يتم تنفيذ قوالب الويب المضمنة في مدخل بادئ تشغيل باستخدام مكونات Bootstrap القياسية مع الحد الأدنى من الأنماط المخصصة أخرى. نتيجة لذلك، يمكنك الاستفادة من خيارات التخصيص التي يوفرها Bootstrap لتخصيص السمة بطريقة يتم تطبيقها باستمرار على مدخل إلكتروني بالكامل.

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

في مداخل Power Apps، تتحكم ميزة تمكين السمة الأساسية في كيفية تطبيق تخصيصات CSS على المدخل.

السمات

عند تشغيل ميزة تمكين السمة الأساسية، يمكنك استخدام السمات الافتراضية المسماة الإعدادات المسبقة. يمكنك أيضاً إنشاء نسخ من السمات المعدة مسبقاً لتخصيص آخر.

لقطة شاشة لاختيار الموضوعات في استوديو المداخل.

تخلق السمات مظهراً وأسلوباً شاملين للموقع من خلال تحديد الألوان لمناطق مختلفة.

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

تحرير CSS

عند إيقاف تشغيل ميزة تمكين السمة الأساسية، يمكنك فقط تطبيق التخصيصات عن طريق تحرير ملفات CSS الحالية أو إضافة ملفات جديدة.

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

لقطة شاشة لخيارات تحرير السمات من شريط الأدوات للتعليمة البرمجية CSS.

تحتاج إلى التفكير في كيفية التعامل مع تعديلات النمط للمدخل:

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

تحذير

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

تطبيق التخصيصات على مناطق مدخل معينة

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

لقطة شاشة لعمود الصفحة الرئيسية في سجل ملف الويب.

هام

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

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

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

تلميح

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

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

صور الخلفية

عندما تبدأ في تخصيصات المدخل، فإن أحد أكثر الطلبات شيوعاً التي قد تكون لديك هو استبدال صور الخلفية. يتم تطبيق هذه الصور باستخدام CSS، ولكن يمكن استبدالها دون تغيير CSS. ابحث عن ملفات الويب .jpg أسفل الصفحة الرئيسية للمدخل، على سبيل المثال `homehero.jpg``. مطلبك الوحيد هو استبدال مرفقات ملفات الويب هذه بصورك الخاصة. تأكد من أن حجم الصور الجديدة متوافق للحفاظ على تنسيق متسق.

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

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

  • اضبط تسمية على مسافة واحدة.
  • اضبط فئة CSS لـ إخفاءها.
  • قم بتعيين القيمة الافتراضية على النحو المطلوب.

لقطة شاشة للجدول الجديد من بيانات التعريف مع التسمية، CSS فئة، وتعيين القيمة عند حفظ الأعمدة.

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

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