استثمر للحياة

برمجة و تصميم و تطوير المواقع

خلفية صفحة css

حجم الخط

استثمر للحياة

خلفية الصفحة في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لصفحتنا بتنسيق css .   و وضع صورة كخلفية .

حتى تكون صفحة متألقة ..

  تلوين خلفية الصفحة

مثال : سنفرض اننا نريد أن تكون كل صفحاتنا بلون ازرق خفيف , و كل العناوين بلون أزرق و فى وسط الصفحة , بينما خط الكتابة العادى يكون من نوع  Arial  و يسمك 20 بكسل مثلاً

investolife


التنفيذ

investolife
الشرح
investolife


 

  صورة كخلفية للصفحة

مثال : لجعل خلفية الصفحة صورة ما . على ان تكون مرفوعة على السيرفر .
سنجعل خلفية الصفحة هي الصورة  f//pic/271.jpg

investolife


التنفيذ :
investolife

الشرح
investolife


 

و لكن نلاحظ ان الصورة متكررة . فكيف نتحكم فى تكرارها

  • صورة تتكرر افقياً و رأسياً        : background-repeat: repeat

  • صورة تتكرر افقياً فقط            : background-repeat: repeat-x

  • صورة تتكرر رأسياً فقط           : background-repeat: repeat-y

  • صورة لا تتكرر تظهر مرة واحدة فقط: background-repeat: no-repeat



مثال لصورة لا تتكرر أى تظهر مرة واحدة فقط



investolife
التنفيذ
investolife


لاحظ ان الكتابة حاءت متداخلة مع الصورة و لكن فى حالة رغبتنا فى عدم التداخل علينا تحديد موقع  postion  للصورة يختلف عن مكان الكتابة ,   و أيضاً ترك مساحة جانبية للصورة فقط تسمى هامش Margin   .  كما فى المثال التالي :

investolife


شاهد المثال
investolife

تثبيت صورة الخلفية "background-attachment"

الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات الصفحة .

الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة و نستخدم معها

Background-attachment: fixed

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

Background-attachment: scroll


مثال : يوضح  الصورة الثابتة


investolife

  تحديد موضع صورة خلفية الصفحة
ملحوظة هامة :
يمكن استخدام "background-position" لتحديد موضع صورة خلفية الصفحة
و الصورة توضح  المواضع   و تحددها تحديداً  دقيقاً


investolife


تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.


هناك طرق مختلفة لتحديد قيمة background-position
منها
 

body {
background-color: #FFCC66;
background-image: url("investolife.jpg ");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

 

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

background: #FFCC66 url("investolife.jpg ") no-repeat fixed right bottom;

 

راجع ايضا  التعويم و التحديد

راجع اكواد الالوان 

<html>

<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:blue;
text-align:center;
}
p
{
font-family:"Arial"

font-size:20px;
}
</style>
</head>
<body>
<h1>استثمر للحياة</h1>
<p>موقع يهدف لنشر ثقافة الاستثمار</p>
 
</body>
</html>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:blue;
text-align:center;
}
p
{
font-family:"Arial"
font-size:20px;
}
</style>
</head>
<body>
<h1>استثمر للحياة</h1>
<p>موقع يهدف لنشر ثقافة الاستثمار</p>
 
</body>
</html>

 

اعلان تجاري
اعلان 468