انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 37
دورة لغة CSS

إختصار خصائص border في لغة CSSCSS Border Shorthand

سوف تتعلم في هذا الدرس إختصار جميع خصائص [ border-size-border-style-border-width ] border في خاصية واحدة وهي  border بإستخدام لغة CSS.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
7
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,464
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

CSS Shorthand Border إختصار خصائص border في لغة CSS

تُستخدم خاصية border للإستغناء عن جميع خصائص borders لكي يتم إختصار مجموعة سطورة في سطر واحد فقط وكتابة خاصية بدلاً من مجموعة خصائص ليكون حجم ملف CSS في النهاية أقل حجماً مما يًساعد علي سرعة موقع الويب.


الخصائص التي تم إختصارتها في خاصية border:

  • border-style (ضروري ليظهر الإطار) نوع الإطار.
  • border-width سُمك (حجم) الإطار.
  • border-color لون الإطار.


قيم خاصية border في لغة CSS:

  • type قيمة النوع.
  • color قيمة اللون.
  • width قيمة العرض.

CSS border syntax

HTML 
border:value;

border values

قيم خاصية border في لغة CSS.

HTML 
border:border-style border-color border-width|initial|inherit;

CSS border Property خاصية border في لغة CSS

تُستخدم خاصية border في لغة CSS لاختصار جميع الخصائص [border-style,border-color,border-width] في خاصية واحدة وهي border ويتم إضافة جميع قيم الخصائص في خاصية border كقيمة واحدة بشكل متتالي ونفصل بين القيم بمسافة space.


لماذا نستخدم خاصية border؟

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

CSS Shorthand Border Property

خاصية border في لغة CSS.

HTML 
p
{
  border: 5px solid red;
}
جرّب بنفسك

CSS border side shorthand إختصار جوانب border في لغة CSS

يمكن اختصار أيضاً خصائص جوانب الإطارات في لغة CSS في خاصية واحدة فمثلاً بدلاً من كتابة [border-left-style,border-left-color,border-left-width] يمكن اختاصرهم بخاصية واحدة وهي border-left ونكتب جميع القيم بداخلها وهذا ينطبق علي جميع الجوانب [left-right-top-bottom].

CSS Border left shorthand

إختصار خصائص border left في لغة CSS.

HTML 
p
{
  border-left: 5px solid red;
}
جرّب بنفسك

CSS Border right shorthand

إختصار خصائص border right في لغة CSS.

HTML 
p
{
  border-right: 5px solid red;
}
جرّب بنفسك

CSS Border top shorthand

إختصار خصائص border top في لغة CSS.

HTML 
p
{
  border-top: 5px solid red;
}
جرّب بنفسك

CSS Border bottom shorthand

إختصار خصائص border bottom في لغة CSS.

HTML 
p
{
  border-bottom: 5px solid red;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات9

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 9 مفهومةأول بطاقة، أول خطوة
01 Shorthand إختصار
للمراجعة
02 Border حد
للمراجعة
03 Property خاصية
للمراجعة
04 Properties خصائص
للمراجعة
05 Width عرض
للمراجعة
06 Required مطلوب
للمراجعة
07 Color لون
للمراجعة
08 Left يسار
للمراجعة
09 Bottom أسفل
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

2أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي2 أسئلة تنتظرك
01

هل يمكننا اختصار جميع خصائص الاطار في خاصية واحدة ؟

02

ماهي الخاصية التي يمكننا من خلالها اختصار جميع خصائص الاطار ؟

____