فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

حدود العنصر في لغة CSS

يمكن التحكم في شكل الحدود والوصول الي الشكل المطلوب عن طريق بعض الأوامر الخاصة باللغة CSS المسؤلة عن التحكم في الحدود من حيث اللون والسمك وشكل الأطار , وفيما يلي سنعرض عليك طريقة تعيين وتركيب حدود لأي عنصر عن طريق خاصية Border  .

حدود من الأعلي

حدود من الأربع جوانب

حدود من اليمين

حدود من الشمال

حدود من الأسفل

حدود منحنية من الأربع جوانب

حدود منحنية من اعلي الشمال وأسفل اليمين


شكل الحدود Border-style

شكل الحدود هو شكل الأطار من حيث التصميم , لأن هناك اشكال حدود كثيرة في لغة CSS ,ويجب ان نقوم بتحديد الشكل المطلوب ,وفيما يلي بعض من أشكال الحدود المتوفرة في لغة CSS

  • dotted  : حدود منقطة
  • dashed  : حدود مقطعة
  • solid  : حدود طبيعي
  • double : حدود مزدوجة
 

حدود نقطية

حدود مقطعة

حدود طبيعية

حدود مزدوجة

يوجد الكثير من أشكال الحدود الأضافية سوف نعرضها لك في نهاية الدرس ,ولكن الأن سنتعلم كيفية تعيين شكل الحدود و اختيار الشكل المناسب وذلك عن طريق الأمر border-style

}p
	;border-style:solid  
}

الان يمكن تعيين شكل الحدود عن طريق border-style ,ويمكن ايضاً التحكم في سمك ولون الحدود عن طريق border-color و border-width

google

الأن سوف نقوم بتغيير لون الحدود وسمكها عن طريق الأوامر التالية

	}p 
;border-style:solid
	;border-color:red
	 ;border-width:10px
}


أتجاة الحدود border

يمكنك تعيين الحدود من أتجاة محدد ,"يمين","شمال","أعلي","اسفل" , وذلك عن طريق الأمر border ولكن مع تحديد الأتجاة التي تريد تعيين الحدود علية مثل border-right :solid ويمكنك التحكم في الأتجاة عن طريق تغيير قيمة right الي اي اتجاة

لتعيين الحدود في الاعلي نستخدم Top والأسفل نستخدم Bottom واليمين نستخدم Right والشمال نستخدم Left وللتعين في الاربع أتجاهات نتركها كما هي border

 
border-right:solid
border-left:solid
border-bottom: solid
border-top:solid


الكود المختصر

الكود المختصر عبارة عن أمر توفرة لنا لغة CSS مسؤول عن تجميع أوامر الخاصية border في امر واحد فقد ,ولتوضيح الفكرة سوف نفترض وجود عنصر يحتاج الي border ,في تلك الحالة ستستخدم الأمر المسؤول عن تحديد لون الحدود والأمر المسؤول عن تحديد حجم الحدود والأمر المسؤول عن شكل الحدود ,ولكن الحقيقة تقول بأنة لا يجب كتابة كل الأوامر السابقة ويمكن أستخدام الأمر التالي فقد وهو أمر يجمع الثلاثة اوامر في أمر واحد 3x1

;  border: 6px solid red
  • border-width = 6 px
  • border-style = solid
  • border-color = red
 


أنحناء الحدود border-radius

انحناء الحدود سوف تستخدمة في الكثير من الأمور ,ومنها انشاء الدوائر عن طريق اعطاء قيمة قصوي للحدود ليتم تحويلها الي شكل دائرة, ويمكنك أستخدامها لأنشاء انحناء بسيط يتناسق مع نوعية الموقع وتصميمة ,ويمكن أستخدام الحدود لتحويل صورة من شكل مربع الي شكل دائري أو تحويل زر من شكل مربع الي شكل دائري ويوجد الكثير من الأمور التي يمكنك استعمال الخاصية عليها وفيما يلي بعض الأمثلة علي أستخدام border-radius .بحيث سنقوم بتحويل شكل مربع الي شكل منحني بالتدريج حتي الوصول الي الشكل الدائري الكامل. 

         
}div
	background-color: #28BAA2
;	height:100px
;	width:100px
;	border-radius:10px
}


أنحناء الحدود من أتجاة محدد 

يمكن أنشاء انحناء من زاوية واحدة للعنصر ويجب اولاً التعرف علي زوايا العنصر الأساسية وعددهم 4 زوايا , أعلي اليمين أو أسفل اليمين ,او اعلي الشمال أو اسفل الشمال ,ولتتحكم في زاوية واحدة يجب تحديد الأتجاة اولاً ومن ثم تحديد قيمة الأنحناء . وفيما يلي بعض الأمثلة علي أنحنائات من اتجاهات مختلفة,

       

هذة الأنحنائات يمكنك انشائها بشكل بسيط عن طريق تحديد الأتجاة ,ولتحديد الأتجاة في خاصية border-raduis ,عن طريق الأوامر التالية .

انحناء من اعلي اليمين :

 
}div
	border-top-right-raduis: 30px 
}

انحناء من اعلي اليسار :

 
}div
	border-top-left-raduis: 30px 
}

انحناء من اسفل اليمين :

 
}div
	border-bottom-right-raduis: 30px 
}

انحناء من اسفل اليسار :

 
}div
	border-bottom-left-raduis: 30px 
}


أساسيات التضمين الألوان الخلفيات الحدود الهوامش الهوامش الداخلية العرض والأرتفاع الصناديق حدود خارجية النصوص الخطوط الأيقونات