جدول الدروس

دروس CSS المتقدمة

• كتاب دراسي CSS
• مقدمة إلى CSS
• قواعد الأساس لـ CSS
• قواعد متقدمة لـ CSS
• محددات النسخة لـ CSS
• محددات id لـ CSS
• محددات الفئة لـ CSS
• إنشاء CSS
• خلفية CSS
• نص CSS
• خط CSS
• قائمة CSS

نموذج الصندوق CSS

• مقدمة إلى نموذج الحاوية CSS
• البُعد الداخلي CSS
• الجدار CSS
• البُعد الخارجي CSS
• التلاشي البُعد الخارجي CSS

توجيه CSS

• مقدمة إلى التوضيح CSS
• التوضيح النسبي CSS
• التوضيح المطلق CSS
• التحليل CSS

مصفوفات CSS

• المحددات العناصرية CSS
• مجموعات المحددات CSS
• تفصيل المحددات الفئوية CSS
• تفصيل المحددات id CSS
• تفصيل المحددات الخاصية CSS
• المحددات النسبية CSS
• المحددات الفئوية CSS
• المحددات الأخوة القريبة CSS

المقررات الاختيارية

توصية بالدراسة:

• صندوق CodeW3C.com

يسمح CSS بتطبيق الألوان النقية كخلفية، وكذلك استخدام صور الخلفية لإنشاء تأثيرات معقدة.

قدرة CSS في هذا المجال تفوق بكثير HTML.

لون الخلفية

يمكن استخدام خاصية background-colorلإعداد لون الخلفية للعنصر. هذه الخاصية تقبل أي قيمة لون صالحة.

هذه القاعدة تعين خلفية العنصر بلون رمادي:

p {background-color: gray;}

إذا كنت ترغب في أن يتمدد لون الخلفية من النص في العنصر بقليل، فقط أضف بعض الهوامش الداخلية:

p {background-color: gray; padding: 20px;}

جرب بنفسك

يمكن تعيين لون الخلفية لجميع العناصر، بما في ذلك body حتى العناصر الداخلية مثل em وa.

لا يمكن ترقيه لـ background-color، والقيمة الافتراضية هي transparen. transparen تعني "شفاف". بمعنى آخر، إذا لم يتم تحديد لون الخلفية للعنصر، فإن الخلفية ستكون شفافة، مما يسمح بوضوح خلفية العنصر الأصلي.

صورة الخلفية

لإدخال الصورة في الخلفية، يجب استخدام خصائص background-image

إذا كنت بحاجة إلى تعيين صورة خلفية، يجب تعيين قيمة URL لهذه الخاصية:

body {background-image: url(/i/eg_bg_04.gif);}

عادةً، يتم تطبيق الخلفيات على عنصر body، ولكن ليس محصورًا به.

في المثال التالي، يتم تطبيق خلفية على فقرة دون تطبيق خلفية على باقي الوثيقة:

p.flower {background-image: url(/i/eg_bg_03.gif);}

يمكنك حتى تعيين صورة خلفية للعناصر الداخلية، مثل المثال التالي الذي يعين صورة خلفية للرابط:

a.radio {background-image: url(/i/eg_bg_07.gif);}

جرب بنفسك

نظرياً، يمكنك تطبيق صور الخلفية على العناصر المتبدلة مثل textareas و select، ولكن ليس جميع المستخدمين يتعاملون مع هذا الوضع بشكل جيد.

إضافة إلى ذلك، لا يمكن ترخيص background-image. في الواقع، لا يمكن ترخيص أي خصائص الخلفية.

تكرار الخلفية

إذا كنت بحاجة إلى تكرار صورة الخلفية على الصفحة، يمكنك استخدام خصائص background-repeat

قيمة الخاصية repeat تجعل الصورة تنتشر في اتجاهين أفقياً وعمودياً، كما كان تقليدياً في صور الخلفية. تؤدي الخاصية repeat-x و repeat-y إلى تكرار الصورة فقط في اتجاه أفقي أو عمودي، بينما لا تسمح الخاصية no-repeat بتكرار الصورة في أي اتجاه.

بافتراض، سيبدأ موقع صورة الخلفية من الزاوية العلوية اليسرى للعنصر. انظر إلى المثال التالي:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

جرب بنفسك

تحديد موقع الخلفية

يمكنك استخدامها خصائص background-positionتغيير موقع الصورة في الخلفية.

في المثال التالي، يتم وضع صورة الخلفية في منتصف عنصر body:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

هناك العديد من الطرق لتقديم قيم لخصائص background-position. أولاً، يمكنك استخدام بعض الكلمات المفتاحية: top،bottom،left،right وcenter. عادةً، هذه الكلمات المفتاحية تظهر في أزواج، ولكن ليس دائمًا هكذا. يمكنك أيضًا استخدام قيم الطول، مثل 100px أو 5cm، وأخيرًا يمكنك أيضًا استخدام القيم المئوية. يختلف تأثير أنواع القيم المختلفة قليلاً في وضع صورة الخلفية.

الكلمات المفتاحية

أكثر الكلمات المفتاحية للوضع تفسيرًا، حيث يُفسر عملها كما هو واضح من اسمها. على سبيل المثال، top right تُشير إلى وضع الصورة في الزاوية العلوية اليمنى للهوامش الداخلية للعنصر.

حسب المعيار، يمكن أن تظهر الكلمات المفتاحية الموقعية بأي ترتيب، طالما أن هناك لا يزيد عن كلمتين مفتاحيتين - إحداهما تُشير إلى الاتجاه الأفقي، والأخرى تُشير إلى الاتجاه العمودي.

إذا تم تقديم كلمة مفتاحية واحدة فقط، يتم افتراض أن الكلمة المفتاحية الأخرى هي center.

لذلك، إذا كنت ترغب في وضع صورة في منتصف كل فقرة، يمكنك القول بذلك:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

هذه هي الكلمات المفتاحية المماثلة:

القيم المئوية

يبدو تعبير القيم المئوية أكثر تعقيدًا. افترض أنك ترغب في استخدام القيم المئوية لوضع الصورة في منتصف العنصر، هذا سهل:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

هذا يؤدي إلى وضع الصورة بشكل مناسب، حيث يتم تطابق مركزها مع مركز العنصر.بمعنى آخر، يتم تطبيق القيم المئوية على العنصر والصورة.بمعنى آخر، النقطة المكتوبة في الصورة كـ 50% 50% (النقطة المركزية) تتطابق مع النقطة المكتوبة في العنصر كـ 50% 50% (النقطة المركزية).

إذا كانت الصورة عند 0% 0%，سيتم وضع الزاوية العلوية اليسرى للصورة في الزاوية العلوية اليسرى للهوامش الداخلية للعنصر. إذا كانت الصورة عند 100% 100%，سيتم وضع الزاوية السفلية اليمنى للصورة في الزاوية السفلية اليمنى للهوامش.

لذلك، إذا كنت ترغب في وضع صورة عند 2/3 من الطول الأفقي و1/3 من الطول العمودي، يمكنك القول بذلك:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

إذا قدمت فقط قيمة بالفئة المئوية، فإن هذه القيمة ستُستخدم كقيمة أفقي، ويُفترض أن القيمة العمودية هي 50%. هذا يشبه الكلمات المفتاحية.

قيمة الافتراضية لـ background-position هي 0% 0%，وفي الوظيفة تُشبه top left. هذا يفسر لماذا تبدأ دائمًا الصورة الخلفية من الزاوية العلوية اليسرى من منطقة الهوامش الداخلية للعنصر، ما لم تضبط موقعًا مختلفًا.

قيم الطول

تشرح القيم الطولية التغييرات في الزاوية العلوية اليسرى للمنطقة الموجودة في الهوامش الداخلية للعنصر. النقطة هي الزاوية العلوية اليسرى للصورة.

مثلاً، إذا تم تعيين القيمة على 50px 100px، فإن الزاوية العلوية اليسرى للصورة ستكون في موضع 50 بكسل إلى اليمين و100 بكسل إلى الأسفل من الزاوية العلوية اليسرى للمنطقة الموجودة في الهوامش الداخلية للعنصر:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

لاحظ أن هذا يختلف عن القيم المئوية لأن التحرك هو فقط من زاوية إلى أخرى. أي أن زاوية الصورة العلوية اليسرى تتطابق مع النقطة المحددة في بيانة background-position.

الارتباط بالخلفية

إذا كانت الوثيقة طويلة، فإن الصورة الخلفية ستتحرك مع الوثيقة عندما تتمدد للأسفل. عندما تمر الوثيقة إلى ما وراء موقع الصورة، ستختفي الصورة.

يمكنك من خلال خاصية background-attachmentمنع هذا التمرير. من خلال هذه الخاصية، يمكنك إعلان أن الصورة ثابتة بالنسبة للمنطقة المرئية (fixed) ولا تتأثر بالتمرير:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

جرب بنفسك

قيمة الافتراضية لـ background-attachment هي scroll، مما يعني أن الخلفية ستتحرك مع وثيقة بالافتراض.

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

أداة التجميع

مرجع CSS

مثال CSS

اختبار CSS

دروس CSS

روابط الممولين