css الدرس الثانى فى

Background

– وفى هذا الجزء سوف نتعلم ضبط كل شىء يخص الخلفية من حيث اللون او وضع صورة كخلفية لموقعك او جزء فى موقعك وخصائص الخلفية هى:

شرح الخاصية

property

تستخدم لتغير لون الخلفية

background-color

تستخدم لضبط صورة كخلفية

background-image

تستخدم لتكرار الصورة فى الخلفية عدد من المرات تحددة انت

background-repeat

تستخدم فى تحديد مكان الصورة يسار او يمين او فى المنتصف

background-position

(1)background-color:

body {background-color:#b0c4de;}

h1 {background-color:#6495ed;}
p {background-color:red;}
div {background-color:blue;}

مثال على ضبط لون الخلفية لاى جزء داخل موقعك :

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-color:#b0c4de;

}

h1

{

background-color:#6495ed;

}

p

{

background-color:#e0ffff;

}

div

{

background-color:#b0c4de;

}

</style>

</head>

<body>

<h1>CSS background-color example!</h1>

<div>

This is a text inside a div element.

<p>This paragraph has its own background color.</p>

We are still in the div element.

</div>

</body>

</html>

ولون الخلفية يمكن ان تكتبة باسم اللون فمثلا الاحمر red او بطريقة الاكواد واليك مجموعة من اكواد الالوان:

اللون

كود اللون
الاسود #000000
الاحمر #FF0000
الاخضر #00FF00
الازرق #0000FF
الاصفر #FFFF00
اللبنى #00FFFF
البنفسجى #FF00FF
الرمادى #C0C0C0
الابيض #FFFFFF

(2)background-image:

body {background-image:url(‘paper.gif’);}

وعند استخدام خاصية تحديد صورة للخلفية تحدد لة اسم الصورة والامتداد الخاص بيها كما فى المثال حيث (paper) اسم الصورة وامتدادها هو (gif) ويوجد ايضا امتدادات اخرى كال (png).

(3)background-repeat:

وموضوع تكرار الصورة لة حالتين اما تكرار افقى اى على محور (x) او تكرار راسى اى على محور (y) كالتالى:

اولا التكرار الافقى:

body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}

ثانيا التكرار الراسى:

body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-y;
}

والان مع مثال كامل لشرح الخاصية :

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-image:url(‘gradient2.png’);

background-repeat:repeat-x;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

(4)background-position:

وعن طريق هذة الخاصية يتم ضبط وضع الصورة فى يسار الصفحة او يمنها او فى الوسط كالتالى:

اولا وضع الصورة فى يمين الصفحة:

body
{
background-image:url(‘smiley.gif’);
background-position:right;
}

ثانيا وضع الصورة فى يسار الصفحة:

body
{
background-image:url(‘smiley.gif’);
background-position:left;
}

ثالثا وضع الصورة فى منتصف الصفحة:

body
{
background-image:url(‘smiley.gif’);
background-position:center;
}

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: