CSS

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

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

التاريخ

13 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1695

المواضيع

24
الشروحات chevron_left CSS Border Shorthand chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

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

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


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

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


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

  • type قيمة النوع.
  • color قيمة اللون.
  • width قيمة العرض.
CSS border syntax
border:value;
border values

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

border:border-style border-color border-width|initial|inherit;
ملاحظة
  • يتم الفصل بين كل قيمة ويمة من قيم خاصية border بعلامة المسافة space.
  • الترتيب ليس أمراً ضرورياً بداخل خاصية border بين قيمة النوع والسُمك واللون يمكنك ترتيبهم بأي شكل.

</> 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.

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.

p
{
  border-left: 5px solid red;
}
CSS Border right shorthand

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

p
{
  border-right: 5px solid red;
}
CSS Border top shorthand

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

p
{
  border-top: 5px solid red;
}
CSS Border bottom shorthand

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

p
{
  border-bottom: 5px solid red;
}
مصطلحات الدرس
Shorthand
Shorthand

إختصار

Property
Property

خاصية

Properties
Properties

خصائص

Width
Width

عرض

Required
Required

مطلوب

Color
Color

لون

Left
Left

يسار

Bottom
Bottom

أسفل

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.