1. إستبعاد الملاحظة

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

الموضوع في 'منتدى الدورات العامة' بواسطة Ibrahem Smart, بتاريخ ‏يونيو 22, 2018.

  1. Ibrahem Smart

    Ibrahem Smart زيزوومى فضى

    إنضم إلينا في:
    ‏يناير 30, 2017
    المشاركات:
    1,829
    الإعجابات :
    1,008
    نقاط الجائزة:
    860
    الجنس:
    ذكر
    الإقامة:
    الاسكندرية
    برامج الحماية:
    ESET
    نظام التشغيل:
    Windows 7


    بسملة.png

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


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


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

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

    @راجية الجنة

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


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

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

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

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

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

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

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

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

    1.png

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

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

    background-color

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

    2.png

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

    3.png

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

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

    background-image

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

    4.png

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

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

    5.png

    6.png

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

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

    background-repeat

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

    7.png

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

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

    background-attachment

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

    8.png

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

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

    background-position

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

    9.png

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

    10.png

    اذا 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 هكذا كل ما ستكتبه سيطبق على الصفحة كلها
    خاتمة.png
     
    أعجب بهذه المشاركة راجية الجنة

مشاركة هذه الصفحة

جاري تحميل الصفحة...