الدرس الثالث-تنسيق الخلفية

فكرة التوارث:

ذكرنا في الفقرة السابقة أن الصفحة الواحدة قد تحتوى على أكثر من نمط داخل الموقع الواحد و ذكرنا أيضاً أن المتصفح سوف يقوم باستخدام النمط الأقرب إلى الوسم كما يلي ( النمط الموجود داخل الوسم ، ثم النمط في رأس الصفحة ، ثم النمط الموجود في ملف خارجي (.
فعلى فرض أن الملف الخارجي حدد نمط الفقرة كما يلي :
حدد لون الخط بالقيمة " أزرق " و حدد حجم الخط بالقيمة " 2 " ، بينما النمط في رأس الصفحة حدد لون الخط بالقيمة " أخضر " و حدد المحاذاة بالقيمة " الوسط " ، بينما النمط داخل الوسم حدد لون الخط بالقيمة " أحمر " .
كيف يتم عرض الصفحة في هذه الحالة : كما عرفنا فإن لون الخط سيكون الأحمر لأن هذه هي القيمة الأقرب للوسم ، ثم يتم تطبيق القيمة النمط براس الصفحة و هذا يعني أن محاذاة الخط ستكون إلى الوسط ، ثم تطبيق النمط بالملف الخارجي أي أن حجم الخط سيعطى القيمة " 2 " .
هذه هي فكرة التوارث أي استيراد التنسيقات من الأنماط البعيدة إذا لم تكن محددة داخل النمط الأقرب .

مثال:

على فرض أننا قمنا بإضافة النمط التالي في الملف الخارجي ، و تم تسميته style.css و هو يحدد لون الخط " بالأزرق " ، و حجم الخط بالقيمة " 12 " .

h3
{
color: blue;
font-size: 12px
}

 

h3
{
color: green;
text-align: center;
}

النتيجة :

color: green;
text-align: center;
font-size: 12px

خصائص الخلفية في CSS :

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

لون الخلفية

body {
  background-color: lightblue;
}

الشفافية :

div {
  background-color: green;
  opacity: 0.3;
}

صورة الخلفية :

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

 لتكرار الصورة او عدم تكرارها

 background-repeat: no-repeat;

موقع الصورة :

 background-position: right top;

 

body {
background-image: url("paper.gif");

background-repeat: no-repeat;

background-position: right top;}