ط§ظ„ط¯ط±ط³ ط§ظ„ط«ط§ظ†ظٹ ظˆط§ظ„ط«ط§ظ„ط« ظ…ظ† ط¯ظˆط±ط© css !


بعد ما شرح طريقةنا الـ css في الدرس مفصل الاول بنرجع نشرح طريقة بعض الخواص !

اولا اعطي للصفحة جمآلية !! ..
في هذا الدرس مفصل سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك، سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية، نشرح طريقة هذه الخصائص في CSS:

color
background-color
background-image
background-repeat
background-attachment
background-position
background

، !

خآًصية color ! اعطاء الشيء لون .. مثلا نريد جعل االوسم h1 باللون الاحمر ..

رمز Code:
h1 { color: #ff0000; }

نلاحظ من الكود code ان الخاصية تاخد القيمة : #اللون !
Html Color Codes
^
هذا الموقع جميل لمعرفة اكواد الالوان ! ..
يمكنك استخدام اكواد الالوان او اللون نفسه !

رمز Code:
color: #ff0000; color:red;
معلومة !
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)).

خاصية 'background-color'

خاصية background-color تحدد لون خلفية أي عنصر.

العنصر <body> يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر <body>.

يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري <body> و<h1>.

رمز Code:
body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }

جرب الان وانظر للنتيجة حولت الصفحة الى اللون الاصفر الفاتح وال h1 الى اللون البرتقالي !!
بعض خوآًص الـ background

خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر.
مثال ..
رمز Code:
body { background-color: #FFCC66; background-image: url(&quot;butterfly.gif&quot; }
butterfly.gif < اسم ومكان الصورة على جهازك .. او ضع مكانها ابطة صورة .. كمثال هذه الصورة ..




انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url(&quot;butterfly.gif&quot، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url(&quot;../images/butterfly.gif&quot أو حتى العنوان الكامل للملف: url(&quot;رابط الموقع/butterfly.gif&quot.

background-repeat

الخاصية background-repeat تتحكم بتكرار الصورة.
خوآًص الخاصية .. background-repeat

Background-repeat: repeat-x الصورة ستتكرر أفقياً شاهد المثال
background-repeat: repeat-y الصورة ستتكرر عمودياً شاهد المثال
background-repeat: repeat الصورة ستتكرر أفقياً وعمودياً شاهد المثال
background-repeat: no-repeat لن تتكرر بأي شكل
مثال
رمز Code:
body { background-color: #FFCC66; background-image: url(&quot;butterfly.gif&quot; background-repeat: no-repeat; }
الخاصية background-attachment !
وهي لجعل الصورة ثابتة او تتحرك مع محتويات العنصر.
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها

Background-attachment: scroll الصورة ستتحرك مع الصفحة شاهد المثال
Background-attachment: fixed الصورة ستبقى ثابتة

رمز Code:
body { background-image: url(&quot;https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQBBsUwVdw8ewNgU2dJc87BB8CLOnz1h IPTs9lzwMocEUqwhH0PKA&quot; background-attachment: fixed; }

مكان صورة الخلفية &quot;background-position&quot;

تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.

هناك طرق مختلفة لتحديد قيمة background-position، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح.

هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.






background-position: 2cm 2cm هذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة شاهد المثال
background-position: 50% 25% هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة شاهد المثال
background-position: top right هذه الصورة وضعت في أعلى يمين الصفحة

الوآجب : عمل كود code لصفحة بصورة غير متكررة ثابتة في اسفل اليمين ! ..

المصدر مدونتي وديزاد باتنة
الدرس مفصل الثاني والثالث من دورة css ! - دكتور ويب




التعديل الأخير كان بواسطة Just Designer; 04 - 08 - 2014 الساعة 02:27




©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©