دروس دورة CSS : شرح الخاصية background xml html
بسم الله , الحمد لله
في درسنا هذا سوف نتعلم الكثير حول خاصية background او الخلفية .
حيث ان هناك أكثر من طريقة لوضع الخلفيات داخل صفحات الإنترنت سواء كانت ألوان أو صور وطريقة التحكم في الصور وعرضها , ايضاً يمكنك وضع صورة واحدة وجعلها تتكرر سواء افقياً او رأسياً او ملئ الصفحة أكلمها.
لا تقتصر هذه الخاصية على الألوان والصور فقط, بل أن لها خصائص أخرى رُبما تعرفها لأول مرة وهذا ما سوف نستعرضه الآن سوياً ,, فنلبدأ درسنا على بركة الله .
ملاحظة هامة,, لرؤية صور الشرح بوضوح تام اضغط على الصورة مرة واحدة فقط.
و الآن سوف نقوم بعمل صفحة HTML كالتالي..
افتح اي محرر نصوص ويستحسن Notepad Plus وتجده بشرح التنصيب على هذا الرابط ( هنا )
ثم افتح صفحة جديد والصق بها التالي..
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body{
background-image: url('http://im41.gulfup.com/z16yp.png');
background-color: #B7FF0F;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<p>Mini Software</p>
<p>Mini Software</p>
<p>Mini Software</p>
<p>Mini Software</p>
<p>Mini Software</p>
</body>
</html>بعد نسخ هذه الصفحة في البرنامج ستجدها عبارة عن كتابة سوداء فافعل التالي
 |
| 1- اضغط لإختيار اللغة 2- قف على حرف H 3- اختر html |
 |
| اضغط هن للحفظ |
 |
| ثم اعطي الملف اي اسم تريد مثل الرقم واحد 2- اضغط Save |
 |
| ستجد الملف وقد أخذ شكل المتصفح الإفتراضي لديك |
 |
| ها هو الملف وقد فتح على المتصفح |
body{
background-image: url('http://im41.gulfup.com/z16yp.png');
background-color: #B7FF0F;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}هذا هو كود CSS الذي يسمى background يعني الخلفية
هذا يعني ان القادم هو رابط لصورة url ودائماً تكون بين قوسين ( )
هذا هو لون الصفحة الاخضر وهو عبارة عن لون من الوان الهيكس ولمعرفة المزيد اليك هذا الرابط به جميع الألوان ( هنا )
وهذا يعني عدم تكرار الصورة و سوف نأخذ المزيد حول هذه الخاصية
هذا يعني انه تم اصلاح رؤية الخلفية في اي منفذ عرض
وهذا يعني ان الصورة تكون في المنتصف تماماً و سوف نأخذ المزيد حول هذه الخاصية
هل يمكن كتابة نفس الكود بطريقة أخرى ؟ نعم يمكن كالتالي
background: #B7FF0F url('http://im41.gulfup.com/z16yp.png') no-repeat fixed center;
حسناً ,, الآن اخذنا فكرة كبيرة عن خاصية background ولكن بقى القليل و هو ,, إذا أردت أن اجعل الصورة متكررة في جميع انجاء الصفحة فيمكنك ان تمسح هذا الكود :
background-repeat: no-repeat;
او تجعله هكذا
background-repeat: repeat repeat;
لتبقى الخلفية هكذا
و الان إذا أحببنا أن نجعل هذه الصورة تتكرر افقياً او رأسياً ماذا نفعل؟
لجعل الصورة متكررة افقياً نجعل الكود السابق هكذا
background-repeat: repeat-x;
لتبقى الصورة هكذا
وإذت أحببنا أن نجعل الصورة تتكرر رأسياً فنجعل الكود هكذا
background-repeat: repeat-y;
لتبقى الصورة هكذا
هل هذا كل شئ ؟ بالطبع لا يمكنك أن تضع الصورة وحدها على اليمين او على الشمال وهذا بتغيير الكود التالي
background-position: center; يجعل الصورة في المنتصف
background-position: right; يجعل الصورة على اليمين
background-position: left; يجعل الصورة على اليسار
هذا ليس كل شئ بالنسبة لشرح الخلفيات او الباك جراوند backgroun ما زال هناك المزيد من الخواص ولكنها تحتاج درس منفصل وهو شرحنا القادم إن شاء الله
السلام عليكم
التعليقات