| خلفية الصفحة |
 |
 |
|
ستثمر للحياة investolife
في هذا الدرس سنتعلم كيفية تفعيل الألوان والخلفيات لصفحتنا بتنسيق css .
مثال : سنفرض اننا نريد أن تكون كل صفحاتنا بلون ازرق خفيف , و كل العناوين بلون أزرق و فى وسط الصفحة , بينما خط الكتابة العادى يكون من نوع Arial و يسمك 20 بكسل مثلاً
التنفيذ
الشرح
مثال : لجعل خلفية الصفحة صورة ما . على ان تكون مرفوعة على السيرفر . سنجعل خلفية الصفحة هي الصورة f//pic/271.jpg
التنفيذ :
الشرح
و لكن نلاحظ ان الصورة متكررة . فكيف نتحكم فى تكرارها
صورة تتكرر افقياً و رأسياً : background-repeat: repeat
صورة تتكرر افقياً فقط : background-repeat: repeat-x
صورة تتكرر رأسياً فقط : background-repeat: repeat-y
صورة لا تتكرر تظهر مرة واحدة فقط : background-repeat: no-repeat
مثال لصورة لا تتكرر أى تظهر مرة واحدة فقط
التنفيذ
لاحظ ان الكتابة حاءت متداخلة مع الصورة و لكن فى حالة رغبتنا فى عدم التداخل علينا تحديد موقع postion للصورة يختلف عن مكان الكتابة , و أيضاً ترك مساحة جانبية للصورة فقط تسمى هامش Margin . كما فى المثال التالي :
شاهد المثال
تثبيت صورة الخلفية "background-attachment"
الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات الصفحة .
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة و نستخدم معها
Background-attachment: fixed
بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها . و نستخدم معها
Background-attachment: scroll
مثال : يوضح الصورة الثابتة
ملحوظة هامة : يمكن استخدام "background-position" لتحديد موضع صورة خلفية الصفحة و الصورة توضح المواضع و تحددها تحديداً دقيقاً
تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية 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-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;c راجع اكواد الالوان هنا
<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>
|
