القائمة الرئيسية

الصفحات

تعديل المشاركة

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

Ma7moud
(0)

طريقة اسناد خلفية في صفحة الويب بلغة CSS


 السلام عليكم ورحمة الله وبركاته 

سنتعرف في هذا الدرس علي خصائص الخلفيات في صفحة الويب بلغة CSS وكيفية ادراج خلفية لونية في صفحة الويب وكيفية ادراج صورة كخلفية في صفحة الويب وطريقة تحديد حجم الصورة وطريقة عرضها وفيما يلي سنتعرف علي ذلك بالتفصيل .

كود اسناد خلفية لون في صفحة الويب بلغة CSS

<!DOCTYPE html>
<html lang="en">
<head>
   
    <title>Document</title>
    <style>
        body{
            background-color: blue;
        }
    </style>

</head>
<body>
  <p>موقع المقدم لتعلم البرمجة </p>  
</body>
</html>

شرح الكود السابق :

  1. يتم وضع اكواد لغة css بين وسمين <style>  .....</style> 
  2. لتغيير لون الخلفية في صفحة الويب من اللون الابيض الافتراضي الي اي لون اخر نستخدم المحدد                 background-color: blue;  واضفنا اللون الازرق ويمكنك اضافة اي لون اخر عن طريق كتابة اسم اللون باللغة الانجليزية او استخدام كود خاص باللون مثل  rgb(0, 0, 0);
  3. سيتم تغيير لون الصفحة بالكالمل الي اللون الازرق كما في الصورة الظاهرة 
الصورة الظاهرة لتوضيح الكود


كود اسناد صورة كخلفية في صفحة الويب بلغة css

<!DOCTYPE html>
<html lang="en">
<head>
   
    <title>Document</title>
    <style>
        body{
            background-image: url('https://f.top4top.io/p_2061z5btu1.jpg');
        }
    </style>

</head>
<body>
   
</body>
</html>

شرح الكود السابق :
  1. يتم وضع الصورة كخلفية في صفحة الويب عن طريق المحدد ;(' رابط الصورة')background-image: url
  2. ثم نقوم بوضع رابط الصورة او المسار الخاص بها بين هذين العلامتين  ' ' 
  3. انظر الي الصورة الظاهرة لفهم الكود
الصورة الظاهرة لتوضيح الكود السابق

نلاحظ من الصورة الظاهرة اننا قمنا بوضع الصورة وقامت لغة css تلقائيا بعمل تكرار للصورة لملئ الصفحة بالكامل ولذلك هناك اكواد تمنع عدم تكرار الصورة او تكرارها بشكل افقي او بشكل عرضي 

لاحظ الكود الاتي :

 <style>
        body{
            background-image: url('https://f.top4top.io/p_2061z5btu1.jpg');
            background-repeat: repeat;
            background-repeat:no-repeat;
            background-repeat:repeat-x;
            background-repeat:repeat-y ;
        }
    </style>

  • background-repeat: repeat; يستخدم هذا المحدد لجعل الصورة تتكرر في صفحة الويب لملئ الصفحة
  • background-repeat:no-repeat; يستخدم هذا المحدد لكي يجعل الصورة لا تكرر في صفحة الويب
  • (انظر الي الصورة الظاهرة لفهم المحدد)
الصورة الظاهرة لتوضيح المحدد (عدم تكرار الصورة )

  • background-repeat:repeat-x; يستخدم هذا المحدد لتكرار الصورة افقيا (لاحظ الصورة الظاهرة)
الصورة الظاهرة لتوضيح المحدد (التكرار الافقي )


  • background-repeat:repeat-y ; يستخدم هذا المحدد لتكرار الصورة بشكل عمودي (لاحظ الصورة الظاهرة)
الصورة الظاهرة لتوضيح الكود


وفي نهاية هذا الدرس نرجو ان نكون قد افدناكم وشكرا
لا تنسي رؤية الدروس السابقة

تعلمنا في هذا الدرس
خصائص الخلفيات في لغة CSS


أخر المواضيع من قسم : دورة تعلم css

تعليقات

إرسال تعليق

التنقل السريع