محمود عفيفى
01-03-2010, 01:13 AM
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
وبعد,
((دورة تعلم لغة CSS))
درس 3: الألوان والخلفيات:-
في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك،
سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية،
نشرح هذه الخصائص في CSS:
color
background-color
background-image
background-repeat
background-attachment
background-position
background
لون المقدمة: خاصية 'Color'
خاصية color تصف لون عنصر HTML.
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم <h1>، المثال أدناه سيقوم بتوضيح كيفية تحويل كل <h1> إلى اللون الأحمر:
h1 {
color: #ff0000;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex1.asp)
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال:
(rgb(255,0,0)).
خاصية 'background-color'
خاصية background-color تحدد لون خلفية أي عنصر.
العنصر <body> يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر <body>.
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري <body> و<h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex2.asp)
لاحظ أننا قمنا بتفعيل خاصيتين للعنصر <h1> وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة.
الصورة كخلفية "background-image"
خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر.
فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسةبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك.
http://ar.html.net/tutorials/css/butterfly.gif
لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر <body> وحدد مسار الصورة:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex3.asp)
انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل
url("butterfly.gif")
هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام
url("../images/butterfly.gif") أو حتى العنوان الكامل للملف:
url("http://www.html.net/butterfly.gif") تكرار صورة الخلفية "background-repeat"
هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟
الخاصية background-repeat تتحكم بتكرار الصورة.
في الأمثلة التالية ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat.
Background-repeat: repeat-x
الصورة ستتكرر أفقياً
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex4.asp)
background-repeat: repeat-y
الصورة ستتكرر عمودياً
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex5.asp)
background-repeat: repeat
الصورة ستتكرر أفقياً وعمودياً
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex6.asp)
background-repeat: no-repeat
لن تتكرر بأي شكل
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex7.asp)
مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل::
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex7.asp)
تثبيت صورة الخلفية "background-attachment"
الخاصية background-attachment
تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.
في الأمثله التاليه ملخص للقيم التي يمكنك وضعها لخاصية background-attachment،
شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.
Background-attachment: scroll
الصورة ستتحرك مع الصفحة
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex8.asp)
Background-attachment: fixed
الصورة ستتحرك مع الصفحة
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex9.asp)
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex9.asp)
مكان صورة الخلفية "background-position"
تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة،
الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.
هناك طرق مختلفة لتحديد قيمة background-position، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح.
هذا النسق يمكن تحديده أيضاً بالنسبة المئوية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.
http://ar.html.net/tutorials/css/figure004.gif
لاحظ تلك الأمثلة
background-position: 2cm 2cm
هذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex10.asp)
background-position: 50% 25%
هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex11.asp)
background-position: top right
هذه الصورة وضعت في أعلى يمين الصفحة
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex12.asp)
المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة:
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;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex13.asp)
جمع كل الخصائص "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.
ملخص :
في هذ الدرس تعلمت طرقاً جديدة لا يمكنك تطبيقها باستخدام HTML فقط،
المتعة تستمر في الدرس القادم
والذي سنختبر فيه طيفاً واسعاً من الإمكانيات عندما نستخدم CSS لتحديد الخطوك.
المصدر:-
http://ar.html.net/tutorials
الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
وبعد,
((دورة تعلم لغة CSS))
درس 3: الألوان والخلفيات:-
في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لموقعك،
سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية،
نشرح هذه الخصائص في CSS:
color
background-color
background-image
background-repeat
background-attachment
background-position
background
لون المقدمة: خاصية 'Color'
خاصية color تصف لون عنصر HTML.
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم <h1>، المثال أدناه سيقوم بتوضيح كيفية تحويل كل <h1> إلى اللون الأحمر:
h1 {
color: #ff0000;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex1.asp)
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال:
(rgb(255,0,0)).
خاصية 'background-color'
خاصية background-color تحدد لون خلفية أي عنصر.
العنصر <body> يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر <body>.
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري <body> و<h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex2.asp)
لاحظ أننا قمنا بتفعيل خاصيتين للعنصر <h1> وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة.
الصورة كخلفية "background-image"
خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر.
فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسةبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك.
http://ar.html.net/tutorials/css/butterfly.gif
لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر <body> وحدد مسار الصورة:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex3.asp)
انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل
url("butterfly.gif")
هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام
url("../images/butterfly.gif") أو حتى العنوان الكامل للملف:
url("http://www.html.net/butterfly.gif") تكرار صورة الخلفية "background-repeat"
هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟
الخاصية background-repeat تتحكم بتكرار الصورة.
في الأمثلة التالية ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat.
Background-repeat: repeat-x
الصورة ستتكرر أفقياً
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex4.asp)
background-repeat: repeat-y
الصورة ستتكرر عمودياً
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex5.asp)
background-repeat: repeat
الصورة ستتكرر أفقياً وعمودياً
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex6.asp)
background-repeat: no-repeat
لن تتكرر بأي شكل
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex7.asp)
مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل::
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex7.asp)
تثبيت صورة الخلفية "background-attachment"
الخاصية background-attachment
تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.
في الأمثله التاليه ملخص للقيم التي يمكنك وضعها لخاصية background-attachment،
شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.
Background-attachment: scroll
الصورة ستتحرك مع الصفحة
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex8.asp)
Background-attachment: fixed
الصورة ستتحرك مع الصفحة
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex9.asp)
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex9.asp)
مكان صورة الخلفية "background-position"
تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة،
الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.
هناك طرق مختلفة لتحديد قيمة background-position، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح.
هذا النسق يمكن تحديده أيضاً بالنسبة المئوية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.
http://ar.html.net/tutorials/css/figure004.gif
لاحظ تلك الأمثلة
background-position: 2cm 2cm
هذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex10.asp)
background-position: 50% 25%
هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex11.asp)
background-position: top right
هذه الصورة وضعت في أعلى يمين الصفحة
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex12.asp)
المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة:
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;
}
شاهد المثال (http://ar.html.net/tutorials/css/lesson3_ex13.asp)
جمع كل الخصائص "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.
ملخص :
في هذ الدرس تعلمت طرقاً جديدة لا يمكنك تطبيقها باستخدام HTML فقط،
المتعة تستمر في الدرس القادم
والذي سنختبر فيه طيفاً واسعاً من الإمكانيات عندما نستخدم CSS لتحديد الخطوك.
المصدر:-
http://ar.html.net/tutorials