دخول
انشاء حساب
البلد
مخالفاتالدرس 3 في لغة CSS الصور والالوان
الدرس 3: الألوان والخلفيات
في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك، سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية، نشرح هذه الخصائص في CSS:
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)).
العنصر
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري
لاحظ أننا قمنا بتفعيل خاصيتين للعنصر
فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسوبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك.
لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر
انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif")، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url("../images/butterfly.gif") أو حتى العنوان الكامل للملف: url("http://www.html.net/butterfly.gif").
في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية
مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل::
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.
في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية:
هناك طرق مختلفة لتحديد قيمة
هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.
الجدول أدناه يوضح بالمزيد من الأمثلة
المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة:
باستخدام
فمثلاً يمكن اختصار هذه الأسطر:
باستخدام
القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:
الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll وtop left.
الدرس 3: الألوان والخلفيات
في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك، سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية، نشرح هذه الخصائص في CSS:
- color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
لون المقدمة: خاصية 'color'
خاصية- الكود:
color
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم
- الكود:
<h1>
- الكود:
<h1>
- الكود:
h1 {
color: #ff0000;
}
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)).
خاصية 'background-color'
خاصية- الكود:
background-color
العنصر
- الكود:
<body>
- الكود:
<body>
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري
- الكود:
<body>
- الكود:
<h1>
- الكود:
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
لاحظ أننا قمنا بتفعيل خاصيتين للعنصر
- الكود:
<h1>
الصورة كخلفية "background-image"
خاصية- الكود:
background-image
فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسوبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك.
لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر
- الكود:
<body>
- الكود:
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
| الصورة ستتكرر أفقياً | شاهد المثال |
| الصورة ستتكرر عمودياً | شاهد المثال |
| الصورة ستتكرر أفقياً وعمودياً | شاهد المثال |
| لن تتكرر بأي شكل | شاهد المثال |
- الكود:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
تثبيت صورة الخلفية "background-attachment"
الخاصية- الكود:
background-attachment
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.
في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية
- الكود:
background-attachment
| الصورة ستتحرك مع الصفحة | شاهد المثال |
| الصورة ستبقى ثابتة | شاهد المثال |
- الكود:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
مكان صورة الخلفية "background-position"
تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية- الكود:
background-position
هناك طرق مختلفة لتحديد قيمة
- الكود:
background-position
هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.
الجدول أدناه يوضح بالمزيد من الأمثلة
| هذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة | شاهد المثال |
| هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة | شاهد المثال |
| هذه الصورة وضعت في أعلى يمين الصفحة | شاهد المثال |
- الكود:
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;
}
جمع كل الخصائص "background"
الخاصية- الكود:
background
باستخدام
- الكود:
background
فمثلاً يمكن اختصار هذه الأسطر:
- الكود:
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
باستخدام
- الكود:
background
- الكود:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:
- الكود:
background-color
- الكود:
background-image
- الكود:
background-repeat
- الكود:
background-attachment
- الكود:
background-position
- الكود:
background-attachment
- الكود:
background-position
- الكود:
background: #FFCC66 url("butterfly.gif") no-repeat;
الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll وtop left.
