تعلم CSS بالعربية 2023 _ #3 CSS Border

الحواف (box edges) CSS Border هي الحدود الظاهرة حول العنصر، والتي تتكون من أربعة جوانب: الحافة العلوية (top edge) والحافة اليمنى (right edge) والحافة السفلية (bottom edge) والحافة اليسرى (left edge). يمكن التحكم في خصائص الحواف باستخدام CSS.

يمكن تعيين خصائص الحواف باستخدام الخاصية “border” في CSS. وبشكل عام، يمكن تحديد سمك الحواف، ونوع الحواف، ولون الحواف، وشكل الحواف.

1. سمك الحواف:
   يمكن تعيين سمك الحافة باستخدام الخاصية “border-width”. على سبيل المثال، يمكنك تعيين سمك الحواف إلى 2 بكسل باستخدام هذا الكود:

border-width: 2px;

2. نوع الحواف:
   يمكن تعيين نوع الحواف باستخدام الخاصية “border-style”. يمكن استخدام أنواع مختلفة من الحواف، مثل الحواف الصلبة (solid) والحواف المنقطة (dotted) والحواف المتقطعة (dashed) والحواف المزدوجة (double) وغيرها. على سبيل المثال، يمكنك تعيين نوع الحواف إلى حافة صلبة باستخدام هذا الكود:

border-style: solid;

3. لون الحواف:
   يمكن تعيين لون الحواف باستخدام الخاصية “border-color”. يمكن استخدام قيم مختلفة لتعيين لون الحواف، مثل الأسماء القياسية للألوان (مثل “red” و “green” و “blue”) والقيم الرقمية للألوان (مثل “#FF0000” و “#00FF00” و “#0000FF”). على سبيل المثال، يمكنك تعيين لون الحواف إلى اللون الأحمر باستخدام هذا الكود:

border-color: red;

4. شكل الحواف:
   يمكن تعيين شكل الحواف باستخدام الخاصية “border-radius”. يمكن استخدام قيم مختلفة لتحديد شكل الحواف، مثل الحواف المستديرة (rounded) والحواف البيضوية (elliptical). على سبيل المثال، يمكنك تعيين شكل الحواف إلى الحواف المستديرة باستخدام هذا الكود:

border-radius: 10px;

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

يمكن تعيين خصائص الحواف لعناصر HTML باستخدام الـ class والـ ID في CSS. يمكن استخدام الـ class لتعيين خصائص الحواف لمجموعة من العناصر في نفس الوقت، ويمكن استخدام الـ ID لتعيين خصائص الحواف لعنصر واحد فقط وهو يجب أن يكون فريدًا في الصفحة.

لتعيين خصائص الحواف باستخدام الـ class، يمكن استخدام الكود التالي في CSS:

.my-class {
   border: 1px solid black;
   border-radius: 5px;
}

ويمكن تعيين الـ class “my-class” لأي عنصر HTML، عن طريق إضافة الكلاس إلى العنصر كما يلي:

<div class="my-class">...</div>

وبهذا سيتم تطبيق خصائص الحواف المحددة في CSS على هذا العنصر.

أما لتعيين خصائص الحواف باستخدام الـ ID، فيمكن استخدام الكود التالي في CSS:

#my-id {
   border: 1px solid black;
   border-radius: 5px;
}

ويمكن تعيين الـ ID “my-id” لأي عنصر HTML، عن طريق إضافة الـ ID إلى العنصر كما يلي:

<div id="my-id">...</div>

وبهذا سيتم تطبيق خصائص الحواف المحددة في CSS على هذا العنصر الوحيد الذي يحمل هذا الـ ID.

استخدام الـ CSS Padding لتحديد المسافة بين النصوص داخل عناصر مختلفة؟

لا، الـ Padding لا يمكن استخدامه لتحديد المسافة بين النصوص داخل عناصر مختلفة، بل يستخدم لتحديد المسافة بين النصوص داخل نفس العنصر.

بدلاً من ذلك، يمكن استخدام الـ Margin لتحديد المسافة بين النصوص داخل عناصر مختلفة. يمكن تعيين الـ Margin للعناصر الفردية أو المجموعات من العناصر، ويمكن تحقيق ذلك بتعيين الـ Margin للعناصر التي تحتوي على النصوص، بحيث يتم تحديد المسافة بين العناصر وتحقيق الفراغ بينها.

يمكن أيضًا استخدام الـ Margin في تنسيق العناصر الأخرى في صفحة الويب، مثل الصور والشرائح والجداول وغيرها، لتحديد المسافة بين العناصر وتحسين تصميم الصفحة.

لذلك، يمكن استخدام الـ Margin بشكل متكرر في صفحات الويب الخاصة بك لتحديد المسافات بين العناصر وتحسين تصميم الصفحة.