|
إنضمامك إلي منتديات استراحات زايد يحقق لك معرفة كل ماهو جديد في عالم الانترنت ...
انضم الينا
#1
| ||
| ||
في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك، سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية، نشرح هذه الخصائص في CSS:
خاصية color تصف لون عنصر HTML. فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم <h1>، المثال أدناه سيقوم بتوضيح كيفية تحويل كل <h1> إلى اللون الأحمر: كود PHP: h1 { color: #ff0000; } الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255*0*0)). خاصية 'background-color' خاصية background-color تحدد لون خلفية أي عنصر. العنصر يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر . يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري و<h1>. كود PHP: body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } لاحظ أننا قمنا بتفعيل خاصيتين للعنصر <h1> وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة. الصورة كخلفية "background-image" خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر. فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسةبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك. لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر وحدد مسار الصورة: كود PHP: body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; } انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif")، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url("../images/butterfly.gif") أو حتى العنوان الكامل للملف: url("http://www.html.net/butterfly.gif"). تكرار صورة الخلفية "background-repeat" هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟ الخاصية background-repeat تتحكم بتكرار الصورة. في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat. اقتباس:
Background-repeat: repeat-x = الصورة ستتكرر أفقياً background-repeat: repeat-y = الصورة ستتكرر عمودياًbackground-repeat: repeat = الصورة ستتكرر أفقياً وعمودياًbackground-repeat: no-repeat= لن تتكرر بأي شكل تابع تتمة الدرس بالمشاركة الموالية ... __DEFINE_LIKE_SHARE__ |
مواقع النشر (المفضلة) |
| |
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
الدرس الثالث والرابع من دوره ال css والتعامل مع الخطوط والنصوص و الصور والخلفيات | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 04-26-2010 01:10 AM |
الدرس الثالث من دورة Y4$$3R N3T - التعليمات الشرطية if .. else | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 09-09-2009 05:20 AM |
{الدرس الثالث} اساسيات الـ Seo وبدا الارشفه | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 07-28-2009 06:50 PM |
دروس mmb//الدرس الثالث | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 06-02-2009 07:30 PM |
الدرس الثالث : المتغيرات في السي | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 04-06-2009 06:10 AM |