تُستخدم الحدود في صفحات HTML لتعيين حدود المحتوى وتمييزه. عندما يكون هناك الكثير من المعلومات على الصفحة وترغب في لفت انتباه المستخدم إلى أجزاء معينة ، فاستخدم الحدود حول هذا المحتوى. في هذه المقالة عن Borders in CSS ، سأناقش المواضيع التالية:
- متى تستخدم الحدود
- الحدود في CSS
- سمات حدود CSS
- القيم الافتراضية لسمات الحدود
- تعريف الحدود باختصار
- نقاط يجب وضعها في الاعتبار أثناء تصميم الحدود في CSS
متى تستخدم الحدود
الممارسة القياسية هي استخدام علامات حدود CSS لتحديد الحدود في صفحات HTML من أجل:
- حول العناوين المهمة
- لتسليط الضوء على التذييل أو الملاحظات الهامة
- لإرفاق الصور والرسوم التوضيحية والاقتباسات من الناس ومقاطع الفيديو
- للفت الانتباه إلى التسعير والجداول الزمنية أو مثل هذه المعلومات الهامة
قد ترغب في قراءة ما يصل إلى قبل الشروع في التعرف على حدود CSS.
للحصول على برنامج تعليمي شامل لـ CSS ، قم بزيارة Edureka CSS تعليمي للمبتدئين . ستحصل على معلومات ممتازة عن طريقة استخدام CSS لزيادة تصميم الويب بتنسيق HTML.
الحدود في CSS
يمكن تعيين حدود CSS لأقسام مختلفة من صفحة HTML ، سواء كان ذلك لتضمين العناوين أو الفقرات. لنبدأ بمثال. هنا نحدد حدًا حول العنوان وحدًا آخر حول نص الفقرة.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}الحدود حول الفقرة أيضا!
سمات حدود CSS
حدود CSS لها 3 سمات رئيسية لملف
- أسلوب:الأسلوبتحدد السمة نمط الحدود.
- اللون: يمكن أن يكون اللون أيًا من المجموعة المحددة بواسطة ألوان CSS.
- عرض: يتم استخدام العرض لتغيير سمك الحد ، لجعله أكثر بروزًا.
في المثال أعلاه ، رأينا أنه يتم تحديد سمة حد واحدة فقط ، وهذا هو نمطها. السمات الأخرى عند عدم تعريفها تأخذ القيم الافتراضية. هناك سمة أخرى تسمى radius ، وهي أقل استخدامًا. يتم استخدامه لجعل حواف الحدود مستديرة.
- نمط الحدود ينسب
| أسلوب | وصف |
| نمط الحدود: صلب | |
| نمط الحدود: مزدوج | |
| نمط الحدود: الأخدود | |
| نمط الحدود: ريدج | |
| نمط الحدود: أقحم | |
| نمط الحدود: البداية | |
| نمط الحدود: لا شيء | |
| نمط الحدود: مخفي | |
| نمط الحدود: منقط | |
| نمط الحدود: متقطع |
ستلاحظ أن هناك خيار 'بلا حدود' و 'حدود مخفية' أيضًا. يمكن للمطور ببساطة تجنب تحديد الحدود ، فلماذا نعرّفها صراحة بأنها 'حدود مخفية'؟ يتم ذلك لاستخدام المساحة ولأغراض المحاذاة مع العناصر الأخرى في الصفحة.
يمكن خلط أنماط الحدود داخل عنصر أيضًا. لهذا الغرض ، يمكن تحديد جوانب الحدود الفردية الأربعة بشكل منفصل بأنماط مختلفة. يمكن القيام بذلك بطريقتين. إما أن تحدد جميع الجوانب الأربعة في علامة واحدة. في هذه الحالة ، يبدأ العد من السطر العلوي ثم يتحرك في اتجاه عقارب الساعة. بدلاً من ذلك ، يمكن تحديد كل من الخطوط الحدودية الأربعة في علامات فردية أيضًا. يتم عرض كلتا الحالتين في المثال التالي.
| أسلوب | وصف |
| نمط الحدود: مزدوج صلب متقطع منقط أعلى نمط الحد: منقط نمط يمين الحد: متقطع نمط الحد السفلي: صلب نمط يسار الحد: مزدوج |
- لون الحدود ينسب
يمكن تعيين سمة اللون للحد بعدة طرق. هذا مشابه لتعيين اللون للعناصر الأخرى. يمكن ضبط الألوان بإحدى الطرق التالية:
- اسم - حدد اسم اللون ، مثل 'أزرق'. يمكنك أيضًا تجربة بعض خيارات الألوان الرائعة مثل 'BlanchedAlmond'!
- عرافة - حدد قيمة سداسية عشرية ، مثل '# ff0000'
- RGB - ضبط كود RGB. على سبيل المثال ، rgb (255،255،0) يعني الأصفر.
- ضبط - مثل 'شفاف' أو 'معتم'
- عرض الحدود ينسب:
تحدد خاصية العرض ، كما يوحي الاسم ، سمك جوانب الحدود الأربعة. إذا تم تحديد قيمة واحدة ، فهي لجميع الجوانب ، وإلا يمكن أيضًا تعيين قيم العرض الفردية.
يمكن تحديد العرض في أي وحدة قياسية مثل وحدات البكسل ('بكسل') أو النقاط ('نقطة') أو بالسنتيمتر ('سم'). يمكنك أيضًا تحديد العرض باستخدام قيم محددة مسبقًا مثل 'سميك' و 'رفيع' و 'متوسط'.
| أسلوب | وصف |
| عرض الحدود: 10 بكسل | |
| عرض الحدود: 0.1 سم | |
| عرض الحدود: متوسط |
- نصف قطر الحد ينسب
الغرض من تحديد نصف القطر هو الحصول على زوايا مستديرة للحدود. يحدد عامل نصف القطر مدى الاستدارة. كلما زادت القيمة ، أصبحت الزوايا منحنية أكثر. كممارسة قياسية ، يتم الاحتفاظ بقيم نصف القطر بين 1-3 أضعاف عرض الحدود.
سيولد الكود التالي:
عرض الحدود: 10 بكسل
نصف قطر الحد: 30 بكسل
القيم الافتراضية لسمات الحدود
السمة الإلزامية الوحيدة هي أسلوب . إذا كان النمط مفقودًا ، فلن تظهر الحدود.
ما هي طريقة tostring في جافا
إذا لم يتم تحديد اللون ، فسيتم أخذ اللون من العنصر الأساسي كقيمة افتراضية. على سبيل المثال ، إذا تم تعريف لون نص الفقرة على أنه 'أزرق' ، فسيكون لون الحد الافتراضي أيضًا باللون الأزرق. في حالة عدم وجود تعريف للون حتى للعنصر ، فإن اللون الافتراضي هو 'أسود'.
القيمة الافتراضية للعرض هي 'متوسط'.
تعريف الحدود باختصار
يفضل بعض المطورين تحديد سمات الحدود في علامة موجزة من سطر واحد. يساعد تنسيق الاختصار هذا في تقليل سطور التعليمات البرمجية ويفضل المطورون الخبراء هذا التنسيق. يوصى باستخدام تنسيق الاختصار عندما يكون تعريف الحدود بسيطًا وموحدًا إلى حد ما. ومع ذلك ، إذا كنت بحاجة إلى تمييز كل جانب من الحدود بنمط مختلف ، فأنت بحاجة إلى الالتزام بتنسيق تحديد العلامات الفردية.
يتم استخدام الكود التالي:
نمط الحدود: متقطع
لون الحدود: أخضر
عرض الحدود: 5 بكسل
الحد: متقطع باللون الأخضر 5 بكسل
نقاط يجب وضعها في الاعتبار أثناء تصميم الحدود في CSS
لا تستخدم الكثير من الحدود في الصفحة ، فقد يؤدي ذلك إلى تشتيت الانتباه ويجعل من الصعب على المستخدم التركيز.
من المهم الحفاظ على التناسق في نمط الحدود وألوانها. يجب أن يكون للعناصر الموجودة في نفس المستوى من التدرج الهرمي في الصفحة نفس نمط الحدود وعرضها لتحقيق التوحيد. على سبيل المثال ، إذا فقرة تم تعريفه بحدود صلبة وعرض 5 بكسل ، حافظ على هذا التنسيق في جميع أنحاء الأخرى فقرة العناصر أثناء تصميم موقع الويب.
التزم بأسلوب واحد من تعريفات العلامات. يشعر بعض المطورين بالارتياح مع تعريفات الاختصارات مع تعيين جميع القيم إلى واحدة الحدود بطاقة شعار. يفضل البعض الآخر سردًا واضحًا لجميع العلامات للعرض واللون والنمط. الاصطلاح هو أنه عندما تكون هناك حاجة إلى زخارف حدودية معقدة في الصفحة ، يتم سرد العلامات الفردية بشكل منفصل. هذا يساعد أثناء تصحيح مثل هذه التعريفات الحدود المخصصة. بالنسبة للحالات العادية ، فإن مجرد تعريف الاختصار سيفي بالغرض.
آمل أن تكون قد وجدت المعلومات التي كنت تبحث عنها على حدود CSS ، و wبهذا ، نصل إلى نهاية مقالة Borders in CSS.
تحقق من الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. يجعلك هذا التدريب بارعًا في مهارات العمل باستخدام تقنيات الويب الخلفية والأمامية. يتضمن التدريب على تطوير الويب ، jQuery ، Angular ، NodeJS ، ExpressJS ، و MongoDB.
لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في مدونة 'Border in CSS' وسنقوم بالرد عليك.