يمكن للمطورين تطبيق خصائص CSS متعددة لجعل صفحات الويب الخاصة بهم أكثر جاذبية ، مثل ' ارتفاع ' و ' عرض 'لتعيين الحجم ،' محاذاة النص 'لتعديل النص ،' نمط الحدود ' و ' نصف قطر الحد 'لتعيين الحدود حول العنصر. بالإضافة إلى ذلك ، يمكنك إضافة حد وفقًا لمتطلباتك ، على سبيل المثال على جانب واحد من العنصر ، فقط لجعل الأشياء خلف الكائنات أكثر وضوحًا.
سيوضح هذا المنشور:
الطريقة الأولى: تعيين الحدود على جانب واحد
في CSS ، يمكن للمستخدمين تعيين الحد على جانب واحد من العنصر المطلوب. لهذا الغرض ، فإن ' يسار الحد '،' يمين الحدود '،' أعلى الحد ' و ' الحد السفلي 'تستخدم لإضافة حدود على الجانب الأيسر أو الأيمن أو العلوي أو السفلي.
في هذا القسم ، سنقوم على وجه التحديد بتعيين الحد على الجانب الأيسر من الحاوية. للقيام بذلك ، اتبع التعليمات المذكورة أدناه.
الخطوة 1: إنشاء حاوية div
أولاً ، أنشئ حاوية div بمساعدة ' الخطوة 2: أدخل العنوان بعد ذلك ، استخدم '< h1> 'لإضافة عنوان داخل حاوية div. علاوة على ذلك ، يمكنك أيضًا استخدام علامات عناوين أخرى وفقًا للمتطلبات ، مثل '< h1> 'إلى' < h6> 'العلامات: الآن ، قم بالوصول إلى حاوية HTML div ، وقم بالوصول إلى اسم الفئة. للقيام بذلك ، محدد فئة ' # 'مع اسم الفئة. الخطوة 4: أدخل الحدود على جانب واحد فقط بعد الوصول إلى حاوية div ، قم بتطبيق خصائص CSS المذكورة أدناه: تظهر الصورة الناتجة الحد مع جانب واحد فقط: لتعيين الحدود من جميع الجوانب بألوان مختلفة ، استخدم كود HTML أعلاه. بعد ذلك ، قم بالوصول إلى حاوية div بمساعدة اسم المعرف والمحدد: نتيجة لذلك ، سيتم تطبيق الحدود ذات الأنماط المختلفة على كل جانب: لتعيين الحد على جانب واحد فقط ، أولاً ، أنشئ div باستخدام '
< h1 > الحدود في جانب واحد h1 >
شعبة >
يمكن ملاحظة أن الحاوية قد تم إنشاؤها بنجاح:
الخطوة 3: الوصول إلى حاوية div
يسار الحد: 5 بكسل صلبة أحمر ؛
الخلفية: RGB ( 56 و 239 و 245 ) ؛
الهامش: 20 بكسل 100 بكسل ؛
العرض: 200 بكسل ؛ الارتفاع: 150 بكسل
}
هنا:
الطريقة 2: ضع الحدود على جميع الجوانب بأنماط مختلفة
الهامش: 80 بكسل ؛
عرض الحدود: 8 بكسل 2 بكسل 1 بكسل 10 بكسل ؛
نصف قطر الحدود: 50 بكسل ؛
نمط الحدود: منقطة مزدوجة صلبة داخلية ؛
لون الحدود: RGB ( 40 و 5 و 235 ) RGB ( 238 و 146 و 9 ) RGB ( 255 و 0 و 242 ) RGB ( 19 و 19 و 18 ) ؛
}
في الكود المذكور أعلاه:
في هذه المقالة ، تعلمت طرقًا مختلفة لتعيين حدود CSS على جانب واحد ومتعدد الجوانب. خاتمة