2 مشترك

} درس الالوان والخلفيات {

ღ m.mshaks ღ: $} درس الالوان والخلفيات { Saudi_aC$

عدد المساهمات : 1080

Power User : 37412

شهرة العضو : 10
العمر : 32
} آخر آخبآري ~ : ربنا وفقنا لما ترضآه

۩ آوسمه الـ ع ـضو ۩

m.mshaks

m.mshaks

مساهمة رقم 1

} درس الالوان والخلفيات {

من طرف ღ m.mshaks ღ الإثنين يوليو 12, 2010 3:48 am

السلام عليكم ورحمة الله وبركاته
....................................
في
هذا الدرس سنتعرف على تطبيق تغيير الألوان ولاخلفيات ووضع الخلفية
اولا
الألون:
لتطبيق لون على عنصر html نستخدم الخاصية color
مثلا لنجعل
العنوان h1 باللون الأحمر :

الرمز:

h1{
color:red;
}

أو

الرمز:

h1{
color:#FA0000;
}

لتطبيق
لون على الخلفية نستخدم الخاصية
background-color
لو أردنا خلفية
الصفحة باللون الأسود سيكون الرمز هو

الرمز:

body{
background-color:#000000;
}

و
كذلك لأي عنصر
فأيضا لو أردنا خلفية العنوان h1 باللون الأبيض سيكون
الرمز هو

الرمز:

h1{
color:red;
background-color:white;
}

هذا
عن الألوان فماذا عن الخلفيات؟؟
طبعا لو أردنا ان تكون الخلفية لونا
معينا سنطبق كما سبق لكن لو أردنا أن نضع صورة للخلفية سنستخدم الرمز
background-image
يعني
لو أردنا وضع صورة كخلفية للصفحة سيكون الرمز هو:

الرمز:

body{
background-image:url('back.jpg');
}

خصائص
الخلفية:
التكرار:
يمكن التحكم في تكرار الخلفية فالوضع الافتراضي
انك لو وضعت خلفية للصفحة ستتكرر
لتملأ الصفحة
ويمكن التحكم في
تكرار الخلفية عن طريق الرمز
background-repeat
يعني لو أردت مثلا
أن اجعل الخلفية تتكرر رأسيا فقط سيكون الرمز هو
body{
background-image:url('back.jpg');
background-repeat:repeat-y;
}
و
يمكن استخدام
repeat-x للتكرار الافقي فقط
repeat للتكرار رأسيا و
أفقيا
no-repeat لعدم التكرار
تثبيت الخلفية:
يمكن التحكم في
ثبوت الخلفية عن طريق
background-attachment
و معنى ثبوت الخلفية
أن تظل مكانها و لا تتحرك مع الصفحة صعودا وهبوطا
لو أردنا فعل ذلك
لخلفية الصفحة و جعلها ثابتة سيكون الرمز هو

الرمز:

body{
background-color:#000000;
background-image:url('back.jpg');
background-repeat:repeat-y;
background-attachment:fixed;
}

fixed
خلفية ثابتة
scroll خلفية متحركة مع الصفحة صعودا و هبوطا
التحكم
في مكان الخلفية:
يمكن التحكم في مكان الخلفية عن طريق
background-position
فممكن
ان نجعلها في المنتصف أو بالاعلى او على اليمين أو اليسار او اعلى اليمين
وهكذا
مستخدمين في ذلك القيم :
center
right
left
يعني
مثلا لو أردنا ان نجعل خلفية الصفحة في أعلى اليمين سيكون الرمز :

الرمز:

body{

background-color:#000000;

background-image:url('back.jpg');

background-repeat:no-repeat;

background-attachment:fixed;
background-position:top
right;

}

يمكن أيضا التحكم في
وضع الخلفية عن طريق الأرقام
يعني مثلا لو أردنا وضع الخلفية في ربع
المسافة من من الاعلى و في منتصف المسافة أفقيا سيكون الرمز هو

الرمز:

body{

background-color:#000000;

background-image:url('back.jpg');

background-repeat:no-repeat;

background-attachment:fixed;
background-position:50%
25%;

}

يمكن استخدام البكسل و
السنتيميتر أيضا في تحديد موضع الخلفية بدلا من النسبة المئوية
مثلا
لو أردنا ان تكون الخلفية على بعد 4cm من اليسار و 2cm من الاعلى سيكون
الرمز هو

الرمز:

body{

background-color:#000000;

background-image:url('back.jpg');

background-repeat:no-repeat;

background-attachment:fixed;

background-position:4cm
2cm;

}

يمكن جمع كل
خصائص الخلفية في سطر واحد هكذا

الرمز:

body{
background:#000000 url('back.jpg')
no-repeat fixed top right;}

انتهى الدرس

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]