linnou
11-01-2013, بتوقيت غرينيتش 04:33 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط¯ط±ط³ 3 : ط¯ظˆط±ط© html ط§ظ„ظ…ط³طھظˆظ‰ ط§ظ„ط«ط§ظ†ظٹ ظ…طھظ‚ط¯ظ… طھظ‚ظ†ظٹط© ط§ظ„ظ€ CSS (http://www.dzbatna.com/t2174095/)
http://www.alshrera.com/losha/1-losha.gif (http://www.losha.net/)
بكل الحبhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gif نلتقى من جديد
http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gif (http://www.losha.net/)http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gif
http://www.alshrera.com/losha/9-losha.gif (http://www.losha.net/)
http://www.dzbatna.com/images/icons/iconrote.gif (http://sa.ae/4239505/)http://www.arabw-pearl.com/vb/images/icons/tanbeh.gif (http://sa.ae/4239505/)http://www.dzbatna.com/images/icons/iconrote.gif (http://sa.ae/4239505/) الرجاء قرائة الموضوع كاملاً وعدم الق (http://www.losha.net/)فز بين السطور لتوضيح ما قد يغيب عنك والإستفادة من إستخدام الشرح طريقة لأقصى درجة .
http://www.losha.net/wp-content/uploads/html.jpg
http://upload.dzbatna.net/upfiles/2N436803.gif- الدرس مفصل 3: الألوان والخلفيات
http://upload.dzbatna.net/upfiles/uRY02504.png
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif الألوان والخلفيات http://upload.dzbatna.net/upfiles/Owl01370.gifhttp://upload.dzbatna.net/upfiles/rnI37149.gif
http://www.dzbatna.com/images/Google/new.png لون المقدمة: خاصية 'color'
http://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png خاصية 'background-color'
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png الصورة كخلفية "background-image"
http://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png تكرار صورة الخلفية "background-repeat"
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png تثبيت setup صورة الخلفية "background-attachment"
http://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png مكان صورة الخلفية "background-position"
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png جمع كل الخصائص "background"
في هذا الدرس مفصل سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك ،
سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية ،
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif نشرح طريقة هذه الخصائص في CSS:
http://upload.dzbatna.net/upfiles/uRY02504.png
• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif لون المقدمة : خاصية ' Color'
http://upload.dzbatna.net/upfiles/uRY02504.png
خاصية color تصف لون عنصر HTML .
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن ،
كل العناوين رمزت باستخدام وسم <h1> ،
المثال أدناه سيقوم بتوضيح كيفية تحويل كل <h1> إلى اللون الأحمر:
رمز Code:
h1{ color: #ff0000; }
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه ،
أو بأن تختار اسم اللون "red" ،
أو من خلال قيمة RGB والتي تعني Red و Green و Blue ،
مثال: (rgb(255,0,0)) .
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif خــاصـيــة 'background-color'
http://upload.dzbatna.net/upfiles/uRY02504.png
خاصية background-color تحدد لون خلفية أي عنصر.
العنصر <body> يضم كل محتويات وثيقة HTML ،
لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر <body>.
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص ،
في المثال أدناه قمنا باختيار ألوان خلفية لعنصري <body> و<h1>.
رمز Code:
body { background-color: #FFCC66; } h1{ color: #990000; background-color: #FC9804; }
لاحظ أننا قمنا بتفعيل خاصيتين للعنصر <h1> وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة.
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif الصورة كخلفية "background-image"
http://upload.dzbatna.net/upfiles/uRY02504.png
خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر.
فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه ،
يمكنك إنزال الصورة لتجرب بنفسك على حاسةبك ،
قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك ،
أو يمكنك استخدام أي صورة تناسبك.
http://upload.dzbatna.net/upfiles/lkY92920.jpg
لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر <body> وحدد مسار الصورة:
رمز Code:
body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1{ color: #990000; background-color: #FC9804; }
http://upload.dzbatna.net/upfiles/Owl01370.gif انتبه (http://www.losha.net/): لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif") ،
هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم ،
يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام
رمز Code:
url("../images/butterfly.gif")
أو حتى العنوان الكامل للملف:
رمز Code:
url("http://www.html.net/butterfly.gif") .
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif تكرار صورة الخلفية "background-repeat"
http://upload.dzbatna.net/upfiles/uRY02504.png
هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة ؟
الخاصية background-repeat تتحكم بتكرار الصورة.
في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat .
http://upload.dzbatna.net/upfiles/DFu92960.jpg
http://upload.dzbatna.net/upfiles/rnI37149.gif مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل ::-
رمز Code:
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1{ color: #990000; background-color: #FC9804; }
http://upload.dzbatna.net/upfiles/Owl01370.gif تثبيت setup صورة الخلفية "background-attachment"
http://upload.dzbatna.net/upfiles/KSk99732.png
الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة ،
بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها .
في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية background-attachment ،
شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة .
خاصة ب IE فقط
http://upload.dzbatna.net/upfiles/asR93100.jpg
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت setup صورة الخلفية:
رمز Code:
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1{ color: #990000; background-color: #FC9804; }
http://upload.dzbatna.net/upfiles/Owl01370.gif مكان صورة الخلفية "background-position"
http://upload.dzbatna.net/upfiles/KSk99732.png
تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة ،
الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.
هناك طرق مختلفة لتحديد قيمة background-position ،
لكن كلها تنظم على نسق واحد ،
فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و 200 بكسل من أعلى نافذة المتصفح .
هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر ،
أو من خلال استخدام كلمات مثل top و bottom و center و left و right .
http://upload.dzbatna.net/upfiles/luN93041.jpg
الجدول أدناه يوضح بالمزيد من الأمثلة
http://upload.dzbatna.net/upfiles/d2192996.jpg
http://upload.dzbatna.net/upfiles/rnI37149.gif المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة :
رمز Code:
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1{ color: #990000; background-color: #FC9804; }
http://upload.dzbatna.net/upfiles/Owl01370.gif جمع كل الخصائص "background"
http://upload.dzbatna.net/upfiles/KSk99732.png
الخاصية background هي اختصار لكل خصائص خلفية العناصر التي قرأتها في هذا الدرس مفصل.
باستخدام background يمكنك جمع عدة خصائص وبالتالي تقليل عدد الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة.
فمثلاً يمكن اختصار هذه الأسطر:
رمز Code:
background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
http://upload.dzbatna.net/upfiles/Owl01370.gif باستخدام background يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط:
http://upload.dzbatna.net/upfiles/uRY02504.png
رمز Code:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
القائمة ترتب بهذا الشكل - من اليسار إلى اليمين :
رمز Code:
background-color | background-image | background-repeat | background-attachment | background-position
إذا لم تكتب خاصية ما سيقوم المتصفح بوضع القيمة التلقائية لهذه الخاصية ،
فمثلاً لم نضع الخاصية background-attachment و background-position في المثال :
رمز Code:
background: #FFCC66 url("butterfly.gif") no-repeat;
الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll و top left.
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/IrK49652.gif تهانينا !
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifلقد إنتهى الدرس مفصلhttp://www.losha.net/vb/images/smilies/vip/sm258.gif !
http://upload.dzbatna.net/upfiles/rnI37149.gif- يستقبل الاستفسارات
الاخ الفاضل / ثامر الصعيدي (http://www.dzbatna.com/u57988/)
كل يوم من الساعة 7.30 مساء حتى الساعة 10 .
http://upload.dzbatna.net/upfiles/uRY02504.png http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifيتبع
ولله الحمد تم الدرس مفصل الثالث
فإن كان به خطأ فإنه منى وأنسانى إياه الشيطان الرجيم
وإن أصبت فإنه من فضل الله عز وجل علينا
http://www.losha.net/mypictures/fasl02.gif
وفي ختام هذا الشرح طريقة أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ....
http://i151.photobucket.com/albums/s133/moooon_light30/icons/1.gif (http://www.losha.net/)
سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha
http://www.alshrera.com/losha/4-losha.gif
http://upload.dzbatna.net/upfiles/1zR85007.png
مصدر الدرس مفصل : درس مفصل 3 : دورة html المستوى الثاني متقدم تقنية الـ CSS (http://localhost/387/www.losha.net/%C3%98%C2%AF%C3%98%C2%B1%C3%98%C2%B3-3-%C3%98%C2%AF%C3%99%C2%88%C3%98%C2%B1%C3%98%C2%A9-html-%C3%98%C2%A7%C3%99%C2%84%C3%99%C2%85%C3%98%C2%B3%C 3%98%C2%AA%C3%99%C2%88%C3%99%C2%89-%C3%98%C2%A7%C3%99%C2%84%C3%98%C2%AB%C3%98%C2%A7%C 3%99%C2%86%C3%99%C2%8A-%C3%99%C2%85%C3%98%C2%AA%C3%99%C2%82%C3%98%C2%AF%C 3%99%C2%85-%C3%98%C2%AA%C3%99%C2%82%C3%99%C2%86%C3%99%C2%8A%C 3%98%C2%A9/)
http://www.losha.net/wp-content/themes/sahifa/images/logo.png (http://www.losha.net/)
http://upload.dzbatna.net/upfiles/e4W93375.jpg
التعديل الأخير كان بواسطة Losha; 12 - 10 - 2014 الساعة 06:09
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://www.alshrera.com/losha/1-losha.gif (http://www.losha.net/)
بكل الحبhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gif نلتقى من جديد
http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gif (http://www.losha.net/)http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gif
http://www.alshrera.com/losha/9-losha.gif (http://www.losha.net/)
http://www.dzbatna.com/images/icons/iconrote.gif (http://sa.ae/4239505/)http://www.arabw-pearl.com/vb/images/icons/tanbeh.gif (http://sa.ae/4239505/)http://www.dzbatna.com/images/icons/iconrote.gif (http://sa.ae/4239505/) الرجاء قرائة الموضوع كاملاً وعدم الق (http://www.losha.net/)فز بين السطور لتوضيح ما قد يغيب عنك والإستفادة من إستخدام الشرح طريقة لأقصى درجة .
http://www.losha.net/wp-content/uploads/html.jpg
http://upload.dzbatna.net/upfiles/2N436803.gif- الدرس مفصل 3: الألوان والخلفيات
http://upload.dzbatna.net/upfiles/uRY02504.png
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif الألوان والخلفيات http://upload.dzbatna.net/upfiles/Owl01370.gifhttp://upload.dzbatna.net/upfiles/rnI37149.gif
http://www.dzbatna.com/images/Google/new.png لون المقدمة: خاصية 'color'
http://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png خاصية 'background-color'
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png الصورة كخلفية "background-image"
http://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png تكرار صورة الخلفية "background-repeat"
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png تثبيت setup صورة الخلفية "background-attachment"
http://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png مكان صورة الخلفية "background-position"
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://www.dzbatna.com/images/Google/new.png جمع كل الخصائص "background"
في هذا الدرس مفصل سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك ،
سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية ،
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif نشرح طريقة هذه الخصائص في CSS:
http://upload.dzbatna.net/upfiles/uRY02504.png
• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif لون المقدمة : خاصية ' Color'
http://upload.dzbatna.net/upfiles/uRY02504.png
خاصية color تصف لون عنصر HTML .
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن ،
كل العناوين رمزت باستخدام وسم <h1> ،
المثال أدناه سيقوم بتوضيح كيفية تحويل كل <h1> إلى اللون الأحمر:
رمز Code:
h1{ color: #ff0000; }
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه ،
أو بأن تختار اسم اللون "red" ،
أو من خلال قيمة RGB والتي تعني Red و Green و Blue ،
مثال: (rgb(255,0,0)) .
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif خــاصـيــة 'background-color'
http://upload.dzbatna.net/upfiles/uRY02504.png
خاصية background-color تحدد لون خلفية أي عنصر.
العنصر <body> يضم كل محتويات وثيقة HTML ،
لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر <body>.
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص ،
في المثال أدناه قمنا باختيار ألوان خلفية لعنصري <body> و<h1>.
رمز Code:
body { background-color: #FFCC66; } h1{ color: #990000; background-color: #FC9804; }
لاحظ أننا قمنا بتفعيل خاصيتين للعنصر <h1> وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة.
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif الصورة كخلفية "background-image"
http://upload.dzbatna.net/upfiles/uRY02504.png
خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر.
فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه ،
يمكنك إنزال الصورة لتجرب بنفسك على حاسةبك ،
قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك ،
أو يمكنك استخدام أي صورة تناسبك.
http://upload.dzbatna.net/upfiles/lkY92920.jpg
لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر <body> وحدد مسار الصورة:
رمز Code:
body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1{ color: #990000; background-color: #FC9804; }
http://upload.dzbatna.net/upfiles/Owl01370.gif انتبه (http://www.losha.net/): لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif") ،
هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم ،
يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام
رمز Code:
url("../images/butterfly.gif")
أو حتى العنوان الكامل للملف:
رمز Code:
url("http://www.html.net/butterfly.gif") .
http://upload.dzbatna.net/upfiles/rnI37149.gifhttp://upload.dzbatna.net/upfiles/Owl01370.gif تكرار صورة الخلفية "background-repeat"
http://upload.dzbatna.net/upfiles/uRY02504.png
هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة ؟
الخاصية background-repeat تتحكم بتكرار الصورة.
في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat .
http://upload.dzbatna.net/upfiles/DFu92960.jpg
http://upload.dzbatna.net/upfiles/rnI37149.gif مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل ::-
رمز Code:
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1{ color: #990000; background-color: #FC9804; }
http://upload.dzbatna.net/upfiles/Owl01370.gif تثبيت setup صورة الخلفية "background-attachment"
http://upload.dzbatna.net/upfiles/KSk99732.png
الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة ،
بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها .
في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية background-attachment ،
شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة .
خاصة ب IE فقط
http://upload.dzbatna.net/upfiles/asR93100.jpg
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت setup صورة الخلفية:
رمز Code:
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1{ color: #990000; background-color: #FC9804; }
http://upload.dzbatna.net/upfiles/Owl01370.gif مكان صورة الخلفية "background-position"
http://upload.dzbatna.net/upfiles/KSk99732.png
تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة ،
الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.
هناك طرق مختلفة لتحديد قيمة background-position ،
لكن كلها تنظم على نسق واحد ،
فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و 200 بكسل من أعلى نافذة المتصفح .
هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر ،
أو من خلال استخدام كلمات مثل top و bottom و center و left و right .
http://upload.dzbatna.net/upfiles/luN93041.jpg
الجدول أدناه يوضح بالمزيد من الأمثلة
http://upload.dzbatna.net/upfiles/d2192996.jpg
http://upload.dzbatna.net/upfiles/rnI37149.gif المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة :
رمز Code:
body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1{ color: #990000; background-color: #FC9804; }
http://upload.dzbatna.net/upfiles/Owl01370.gif جمع كل الخصائص "background"
http://upload.dzbatna.net/upfiles/KSk99732.png
الخاصية background هي اختصار لكل خصائص خلفية العناصر التي قرأتها في هذا الدرس مفصل.
باستخدام background يمكنك جمع عدة خصائص وبالتالي تقليل عدد الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة.
فمثلاً يمكن اختصار هذه الأسطر:
رمز Code:
background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
http://upload.dzbatna.net/upfiles/Owl01370.gif باستخدام background يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط:
http://upload.dzbatna.net/upfiles/uRY02504.png
رمز Code:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
القائمة ترتب بهذا الشكل - من اليسار إلى اليمين :
رمز Code:
background-color | background-image | background-repeat | background-attachment | background-position
إذا لم تكتب خاصية ما سيقوم المتصفح بوضع القيمة التلقائية لهذه الخاصية ،
فمثلاً لم نضع الخاصية background-attachment و background-position في المثال :
رمز Code:
background: #FFCC66 url("butterfly.gif") no-repeat;
الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll و top left.
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/IrK49652.gif تهانينا !
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifلقد إنتهى الدرس مفصلhttp://www.losha.net/vb/images/smilies/vip/sm258.gif !
http://upload.dzbatna.net/upfiles/rnI37149.gif- يستقبل الاستفسارات
الاخ الفاضل / ثامر الصعيدي (http://www.dzbatna.com/u57988/)
كل يوم من الساعة 7.30 مساء حتى الساعة 10 .
http://upload.dzbatna.net/upfiles/uRY02504.png http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gif http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifيتبع
ولله الحمد تم الدرس مفصل الثالث
فإن كان به خطأ فإنه منى وأنسانى إياه الشيطان الرجيم
وإن أصبت فإنه من فضل الله عز وجل علينا
http://www.losha.net/mypictures/fasl02.gif
وفي ختام هذا الشرح طريقة أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ....
http://i151.photobucket.com/albums/s133/moooon_light30/icons/1.gif (http://www.losha.net/)
سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha
http://www.alshrera.com/losha/4-losha.gif
http://upload.dzbatna.net/upfiles/1zR85007.png
مصدر الدرس مفصل : درس مفصل 3 : دورة html المستوى الثاني متقدم تقنية الـ CSS (http://localhost/387/www.losha.net/%C3%98%C2%AF%C3%98%C2%B1%C3%98%C2%B3-3-%C3%98%C2%AF%C3%99%C2%88%C3%98%C2%B1%C3%98%C2%A9-html-%C3%98%C2%A7%C3%99%C2%84%C3%99%C2%85%C3%98%C2%B3%C 3%98%C2%AA%C3%99%C2%88%C3%99%C2%89-%C3%98%C2%A7%C3%99%C2%84%C3%98%C2%AB%C3%98%C2%A7%C 3%99%C2%86%C3%99%C2%8A-%C3%99%C2%85%C3%98%C2%AA%C3%99%C2%82%C3%98%C2%AF%C 3%99%C2%85-%C3%98%C2%AA%C3%99%C2%82%C3%99%C2%86%C3%99%C2%8A%C 3%98%C2%A9/)
http://www.losha.net/wp-content/themes/sahifa/images/logo.png (http://www.losha.net/)
http://upload.dzbatna.net/upfiles/e4W93375.jpg
التعديل الأخير كان بواسطة Losha; 12 - 10 - 2014 الساعة 06:09
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
