CSS

CSS Background Shorthand
إختصارات خاصية background في لغة CSS

ستتعلم في هذا الدرس جميع إختصارات خاصية background في لغة CSS كيفية إختصارتها وكتابة جميع القيم أو جزء من القيم بداخلها.

التاريخ

23 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2552

المواضيع

24
الشروحات chevron_left CSS Background Shorthand chevron_left CSS

CSS Background Shorthand
إختصارات خاصية background في لغة CSS

</> CSS Background Shorthand
إختصارات خاصية background في لغة CSS

في لغة CSS يمكن أختصار جميع الخصائص [<background-color>] [<background-image>] [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>] بداخل خاصية واحدة وهي background وتكتب جميع القيم بالترتيب بداخلها بدلاً من قيمة واحدة.

Background Shorthand syntax

يتم صف القيم بهذا الترتيب حتي تعمل جميع الخصائص بطريقة صحيحة مع إختصار background.

background: [<background-color>] [<background-image>] [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];
CSS Background without Shorthand

بدون إختصارة تكتب جميع الخصائص كاملة بدلاً من إستخدام الأختصار background.

body
{
  background-color: pink;
  background-image:url('https://www.closetag.com/images/background.jpg');
  background-position: right top;
  background-attachment:fixed;
  background-size:100px;
  background-repeat: no-repeat;
}

</> CSS background property
خاصية background في لغة CSS

تستخدم خاصية background في لغة CSS لأختصار جميع خصائص الخلفيات  في لغة CSS يمكن أختصار جميع الخصائص [<background-color>] [<background-image>] [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>] بداخل خاصية واحدة وهي background,ويتم كتابة جميع القيم بداخلها.

CSS Background without Shorthand

إختصارة جميع الخصائص في خاصية واحده وهي background.

body
{
  background:pink url('https://www.closetag.com/images/background.jpg') right top / 100px 100px fixed  no-repeat;
}
CSS Background less Shorthand

ليس من الضروري كتابة جميع الأختصارات يمكن أستخدام خاصية واحدة أو أكثر علي حسب الأحتياج لا داعي لكتابة جميع القيم.

body
{
  background:pink url('https://www.closetag.com/images/background.jpg') no-repeat;
}
الترتيب ليس ضرورياً ولكن عند أستخدام خاصية background-size يجب أن تتبع خاصية background-position ونفصل بينهم بعلامة slash /.
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات