كلمـــة الإدارة لمنتدى الحاسب والجوال العربي

الأعضاء و الزوار الكرام

يا ‏‏" ‏زائر " اهلاً وسهلاً بك في اسرة منتدانا منتدى الحاسب والجوال العربي سعيدون بزيارتكم لنا *كما نرحب بلعضو الجديد ‏‏" ‏روفيان "

سحابة الكلمات الدلالية

لعبة  حذيفة_احمد  قصة  انمي  Zuma  


شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي
avatar
المدير العام
المدير العام
البلد البلد :
الجنس : ذكر
عدد المساهمات : 1460
نقاط : 4259
مخالفات مخالفات : ليس لديه مخالفات
معاينة صفحة البيانات الشخصي للعضوhttps://google.com/+مجنونالغرامhttps://www.facebook.com/hozaifa01https://twitter.com/hozaifa01

جديد الدرس 3 في لغة CSS الصور والالوان

في 2016-01-11, 07:44
الدرس 3 في لغة CSS الصور والالوان


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

لون المقدمة: خاصية 'color'

خاصية
الكود:
color
تصف لون عنصر HTML.
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم
الكود:
<h1>
، المثال أدناه سيقوم بتوضيح كيفية تحويل كل
الكود:
<h1>
إلى اللون الأحمر:

الكود:

h1 {
 color: #ff0000;
 }
 



الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "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;
 }
 



لاحظ أننا قمنا بتفعيل خاصيتين للعنصر
الكود:
<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
.
[th]القيمة[/th][th]الوصف[/th][th]مثال[/th]
الكود:
Background-repeat: repeat-x
الصورة ستتكرر أفقياًشاهد المثال
الكود:
background-repeat: repeat-y
الصورة ستتكرر عمودياًشاهد المثال
الكود:
background-repeat: repeat
الصورة ستتكرر أفقياً وعمودياًشاهد المثال
الكود:
background-repeat: no-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
، شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.
[th]القيمة[/th][th]الوصف[/th][th]مثال[/th]
الكود:
Background-attachment: scroll
الصورة ستتحرك مع الصفحةشاهد المثال
الكود:
Background-attachment: fixed
الصورة ستبقى ثابتةشاهد المثال
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية:

الكود:

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
، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح.
هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.


الجدول أدناه يوضح بالمزيد من الأمثلة
[th]القيمة[/th][th]الوصف[/th][th]مثال[/th]
الكود:
background-position: 2cm 2cm
هذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشةشاهد المثال
الكود:
background-position: 50% 25%
هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشةشاهد المثال
الكود:
background-position: top right
هذه الصورة وضعت في أعلى يمين الصفحةشاهد المثال
المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة:

الكود:

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.

________________
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
تستطيع الرد على المواضيع في هذا المنتدى