CSS تزيين المحتوى

CSS الخلفيات

آخر تحيين: 04-01-2015

CSS الصفة المستعارة CSS الألوان


نعني بالخلفية : اللّون أو الصورة التي ستكون خلف النص . و يمككنا إعطاء خلفية للصفحة كاملةً ، أو مقطع من النص أو فقرة أو عنوان ...إلخ . و الخاصيات التي تمكّنُنا من ذلك نوعان :



background-color

لإضافة لون لهذه الخاصية نستعمل إحدى من الطرق التي رأيناها في الخاصية color . إمّا بإعطاء اسم اللون ، أو باستخدام rgb أو Exadecimal .
مثال

<body>
  <h1> ما هو الكمبيوتر؟ </h1>
  <p>
  الكمبيوتر هو جهاز مؤسس أو مبني على تقنية "الميكروبروسيسور" . وهو عبارة عن قطعة صغيرة من شرائح "السليكون" في "الميكروشيبس" التي تعمل كخزان لمعلومات كثيرة . يمكن تنظيم البيانات و فهرستها فيه بدقة كبيرة . و يمكن استرجاع هذه البيانات من هذه الأرفف أو "السيلس" بسرعة بعد إجراء عمليات حسابية عليها أو عمليات ارتباطية فيما بينها .
  </p>
</body>
body {
    background-color:gray;
}
h1 {
    background-color:blue;
    color:yellow;
    text-align:center;
}
p {
    background-color:silver;
    color:blue;
    font-weight:bold;
    text-indent:40px;
}
مشاهدة النتيجة

background-image

لإضافة صورة للخلفية نستخدم الخاصية : background-image و في قيمتها نكتب مَسار الملف الذي تتواجد فيه الصورة ، و اسم الصورة و صيغتها .
لتحديد مسار الصّورة ، يمكنكم استعمال الرّوابط المطلقة أو النِّسبية . سأعطيكم مثالا لوضع صورة كخلفية للصّفحة ، لكلتا الحالتين .

استعمال الروابط المُطلقة

بما أنكم لم تستضيفوا موقعكم على الويب بعد .و تودّون رفع هذه الصّورة من حاسوبكم . أوّلا ابدؤوا بوضعها في ملف الموقع و سيكون الرّابط المُطلق إلى هذه الصّورة في ملف موقعكم كالتالي

body
{
    background-image:url("file:///C:/site/river.jpg");
}
عدّلوا الرّابط حسب مكان تواجد موقعكم . في مثالنا هذا . ملفّ الموقع يُسمّى site و قد و ضعناه في القرص الصّلب C

إما إذا أردتم رفع الصّورة من موقع آخر على صفحتكم ما عليكم سوى كتابة رابط الصّورة في هذا الموقع كما تعلّمتم فعل ذلك في درس الرّوابط الُطلقة

استعمال الرّوابط النّسبية

في هذه الحالة يرتبط تحديد المسار بملف CSS و ليس ملف HTML . سأعطيكم بعض الأمثلة لتتمكنوا من ضبط استعمال الرّوابط النسبية لرفع الصّور .


الحالة الأولى

لنفترض أن موقعنا يحتوي على صفحة html و صفحة css و صورة كما تبين الصّورة :



htmlشيفرة

<!DOCTYPE html>
<html dir="rtl">
<head>
  <meta charset="utf-8" />
  <link  href="mon_style.css" type="text/css" rel="stylesheet" />
</head>
 <body>
  <h1> ما هو الكمبيوتر؟ </h1>
  <p>
   الكمبيوتر هو جهاز مؤسس أو مبني على تقنية "الميكروبروسيسور" . وهو عبارة عن قطعة صغيرة من شرائح "السليكون" في "الميكروشيبس" التي تعمل كخزان لمعلومات كثيرة . يمكن تنظيم البيانات و فهرستها فيه بدقة كبيرة . و يمكن استرجاع هذه البيانات من هذه الأرفف أو "السيلس" بسرعة بعد إجراء عمليات حسابية عليها أو عمليات ارتباطية فيما بينها .
  </p>
</body>
</html>

css شيفرة

body
{
    background-image:url("river.jpg");
}
مشاهدة النتيجة

الحالة الثانية

صورتنا موجودة داخل ملف يسمّى images



لن نُجري أيّ تغيير في صفحة html لكن في صفحة CSS سنضيف اسم الملف الذي يضمّ الصّورة

body
{
    background-image:url("images/river.jpg");
}

الحالة الثالثة

لنفترض الآن أن ملف موقِقِعنا يحتوي على ثلاث ملفات ملف للصور (images) الذي يحتوي على الصّورة، و ملف (html) الذي يحتوي على صفحة html و ملف (css) الذي يحتوي على صفحة css .



في صفحة html سيتغيّر مسار تواجد صفحة CSS . و سيتغيّر كذلك مسار الصّورة في صفحة CSS

html شيفرة

<link href="../css/mon_style.css" rel="stylesheet" type="text/css" />

css شيفرة

body
{
    background-image:url("../river.jpg");
}

أعطيتكم هذا المثال ، لأنه قريبا عندما يكون لديكم موقع يتكون من مجموعة محترمة من الملفات ، ستجدون أنفسكم في مثل هكذا وضعية. لاحظوا أنني لم أكتب أسماء الملفات في الرابط النسبي في شيفرة css . و عوضتها بنقطتين . أنتم مجبرون على هذا . و إلا ستصابون بالأرق في محاولة جلب الصورة . لكي تعوا جيدا هذا :
النقطة الأولى : نخرج منها من ملف css في مغامرتنا في البحث عن الصّورة .
النقطة الثانية : للدّخول في ملف images لجلب الصّورة .

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

خاصيات التحكم في الصورة

للتحكم في الصورة لدينا ثلاث خاصيات css :

background-repeat

لإعادة تكرار صورة الخلفية نستخدم خاصية :background-repeat و تأخذ القيم التالية :

  • no-repeat: لن يتم تكرار الصورة
  • repeat-x : إعادة تكرار الصورة أفقياً فقط
  • repeat-y :إعادة تكرار الصورة عموديّاً فقط
  • repeat : إعادة تكرار الصورة عموديا و أفقياً

للتطبيق : حملوا هذه الصورة : ( أنقر الصورة أيمن الفأرة ثمّ enregistrer-sous أو save as.)



مثال لإعادة تكرار الصورة عموديا :

body
{
   background-image: url("gradient.png");/* غيروا الإسم و المسار حسب حاجتكم */
   background-repeat:repeat-y;
}
مشاهدة النتيجة

background-position

وضع صورة الخلفية في مكان محدّد نستعمل الخاصية background-position . و هي لا تعمل إلاّ إذا كانت قيمة الخاصية background-repeat تساوي no-repeat : هذا منطقي و تأخذ القيم التالية

  • top: أعلى
  • bottom: أسفل
  • left: يسار
  • center: وسط
  • right: يمين
body
{
  background-image:url('gradient.png');
  background-repeat:no-repeat;
  background-position:top;
}

يمكننا المزج بين قيمتين لتدقيق تحديد مكان الصورة مثلاً ;background-position:top right ستكون الصورة في هذه الحالة أعلى يمين الصفحة أو الفقرة .

background-position:right top;

background-attachment

تأخذ هذه الخاصية قيمتان :

  • fixed: ستبقى الصورة مثبتة على الصفحة و لن تتَحرّكَ مع النص
  • scroll : ستتحرك الصورة مع تحريك النص
body
{
   background-image: url("gradient.png");
   background-repeat:no-repeat;
   background-attachment: fixed; /* تثبيت الخلفية */
}

حاولوا تغيير القيم و جربوها على متصفحكم

اختزال كتابة خاصيات الخلفية

بدل أن نكتب كل خاصية لوحدها ، ف CSS لن يتوقف عن مفاجئتكم . إذ يمكنم جمعها كلها في خاصية واحدة هي background
لنأخذ المثال التالي :

body {
   background-color: #ffffff;
   background-image: url("gradient.png");
   background-repeat: no-repeat;
   background-position: right top;

لجمعها كلها في خاصية backround نكتبها كالتالي :

body {background:#ffffff url('gradient.png') no-repeat right top;}

عند استعمال هذه الطريقة المختزلة ، يجب مراعاة التؤتيب التالي :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position