درس دورة تعلم لغة CSS | الخلفية وخواصها - Background (5)

المصدر: دورة تعلم لغة CSS | الخلفية وخواصها - Background (5)
في منتدى : منتدى الدّورات العامّة ولُغات البرمجة

مرحبا اخوتي اعضاء منتديات زيزووم للامن والحماية
اليوم نتابع معكم دورة لغة CSS مع الدرس الخامس

Background
الخلفية وخواصها

------------------------------------------------------------

في البداية اشكر الاخت

@راجية الجنة

لعمل الفهرس الخاص بالدورة جزاها الله كل خير

رابط الفهرس من هنا

------------------------------------------------------------

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

رابط الدرس من هنا

لاننا سنستخدم الالوان في الشرح

------------------------------------------------------------

Background لها العديد من الخواص التي تكتب كالتالي مثلًا: background-color / background-image

فكما رأينا يكتب اسم المجموعة اولًا background ثم بعد الشرطة - تكتب الخاصية ثم نكتب قيمتها في اللغة كالتالي مثلًأ



فالقيمة في الاولى هي red (اللون) وفي الثانية القيمة بين () وهي رابط الصورة وسنتعلم كل هذه الخواص وقيمها الان

------------------------------------------------------------

background-color

من اسمها نعرف معناها وهو (لون الخلفية) مثل خاصية color التي شرحناها في الدرس السابق فنفس ما كتبناه في color نكتبه هنا لكن color تحدد لون العنصر نفسه و background-color تحدد لون خلفيته وتستخدم فيها جميع انواع الالوان التي شرحناها في الدرس السابق (اسم اللون / HEX / RGB / RGBA) يمكنك العودة اليه ومراجعتهم فمثلًا هنا كتبت للعنصر (div) الذي الـ class الخاص بيه test ان خلفيته ستكون حمراء (red) ولونه سيكون ابيض (white):



فهذا هو الشكل في المتصفح بعد ما فتحت ملف html فيه



اذا background-color تقوم بتحديد لون خلفية العنصر وتاخذ نفس قيم color

------------------------------------------------------------

background-image

هذه الخاصية ايضًا يعرف معناها من اسمها وهو (صورة الخلفية) فهذه الخاصية تستخدم لاستدعاء صورة سواء من رابط او كتابة مسارها وتكون خلفية للعنصر الذي تعطيه خاصية background-image وتكتب كالتالي



ففي القيمة يتم كتابة url() فنحن نقول للغة (هذه صورة للخلفية: رابط / مسار الصورة () )

نكتب بين القوسين () رابط صورة من الانترنت / نكتب اسم صورة مع الملفات او مسارها (سيفهم ذلك من درس HTML فقط) وسيتم استدعاء الصورة كخلفية للعنصر وهذا مثال:





اذا background-image تقوم بوضع صورة كخلفية للعنصر والصورة توضع في url()

------------------------------------------------------------

background-repeat

معنى هذه الخاصية هي (تكرار الخلفية) فمثلا اذا كانت لديك صورة صغيرة وتريد وضعها كخلفية لعنصر ضخم فسيتم تكرارها عدة مرات حتى نهاية العنصر وانت لا تريد هذه الصورة ان تتكرر انت تريدها ان تظهر مرة واحدة فقط فهنا نستخدم خاصية background-repeat التي يمكنك فيها استخدام قيمتين (repeat / no-repeat) فاذا كانت الصورة صغيرة ويتم تكرارها في الخلفية فقيمة repeat لن تقوم بعمل اي شئ وستستمر الصورة في تكرارها لكن عند اعطاء الخاصية قيمة no-repeat لن يتم تكرار الصورة وستظهر مرة واحدة فقط بدون اي تكرار



اذا background-repeat تقوم بتحديد هل سيتم تكرار صورة الخلفية ام لا (repeat / no-repeat)
وطبعًا يستخدم معها background-image لارفاق صورة الخلفية

------------------------------------------------------------

background-attachment

معنى هذه الخاصية (هل ستتحرك الصورة مع التحرك في الصفحة (الـ scroll) ام ستبقى ثابته) ومعنى ذلك ان قيم هذه الخاصية (scroll / fixed) فعند كتابة قيمة scroll سيتم تكبير الصورة حتى تتحرك كلما قمت بعمل scroll (نزول) في الصفحة أما قيمة fixed فمعناها ان الصورة سوف تنزل بحجمها الاصلي وستبقى ثابته ولن تتحرك نهائيًأ عند الطلوع او النزول في الصفحة



اذا background-attachment لتحديد هل تتحرك الصورة عند الطلوع او النزول في الصفحة ام تكون ثابته (scroll / fixed) (ثابتة / غير ثابته) وتستخدم عند عمل صورة كخلفية للصفحة كاملة

------------------------------------------------------------

background-position

اخر خاصية من خواص background في لغة css وهي background-position لتحديد مكان الصورة (اذا لم تأخذ مساحة الصفحة او العنصر كله) وتأخذ خواص الأماكن ( bottom / center / top / left / right )



ويمكن استخدام قيمتين للخاصية مثلًا (center top) ومعناها (الأعلى في المنتصف)



اذا background-position لتحديد مكان الصورة اذ لم تأخذ مساحة العنصر كلها او مساحة الصفحة كلها وقيمها ( bottom / center / top / left / right ) ويمكن استخدام قيمتين في وقت واحد لكن لا يمكن استخدام left مع right ولا يمكن استخدام top مع bottom ولكن يمكن استخدام مثلًا center مع top

------------------------------------------------------------

تجميع الخواص

بدلًا من ان تكتب كل الخواص في عدة اسطر يمكنك كتابتها في سطر واحد باسم مجموعة الخواص background فتكتب كالتالي

background: color image repeat attachment position;

نكتب قيم اللون ثم الصورة ( url() ) ثم التكرار ثم حركة الصورة مع الطلوع والنزول وفي النهاية مكانها ونقفل الخاصية ; ونفصل بين كل قيمة بمسافة واحدة والمتصفح سيتعرف عليهم وفي حالة نقص قيمة واحدة يجب الكتابة في اسطر مقسمة وكتابة اللون مع الصورة معناه انه سيتم عرض الصورة واذا حذفت من الرابط او المسار سيظهر بدلًا منها اللون

واذا طبقت الخواص على وسم البودي (يكون العنصر المستدعى body) سيتم تطبيق الخلفية التي اخترتها كخلفية لصفحة الموقع كلها

------------------------------------------------------------

خلاصة الدرس

• background معناها الخلفية والخواص الخاصة بها
• background-color لعمل لون لخلفية العنصر ويأخذ خواص color
• background-image لارفاق صورة كخلفية للعنصر وتوضع في ( url() )
• background-repeat لتحديد هل سيتم تكرار الصورة ام لا اذا كانت اصغر من مساحة العنصر (repeat / no-repeat)
• background-attachment لتحديد هل ستتحرك الصورة عند الطلوع او النزول في الصفحة ام ستبقى ثابتة (scroll / fixed)
• background-position لتحديد مكان الصورة اذا كانت اصغر من حجم العنصر وقيمها ( bottom / center / top / left / right ) ويمكنك كتابة قيمتين مثل center top
• اذا اردت التجميع في سطر واحد تكتب كالتالي background: color image repeat attachment position; وبين كل قيمة والاخرى مسافة واحدة والمتصفح يتعرف عليهم
• عند التجميع في سطر واحد وكتابة لون ورابط صورة خلفية سيعرض المتصفح الصورة واذا تم حذفها يعرض اللون بدلًأ منها
• عندما يكون اسم العنصر المستدعى body هكذا كل ما ستكتبه سيطبق على الصفحة كلها