كيفية تعيين صورة الخلفية في CSS

يعد إنشاء موقع ويب طريقة رائعة للتعبير عن نفسك. على الرغم من وجود العديد من أدوات بناء مواقع الويب ، إلا أن كتابتها بنفسك طريقة ممتعة لمعرفة المزيد حول كيفية عمل مواقع الويب خلف الكواليس. مشروع جيد للمبتدئين هو إنشاء موقع ويب وإضافة صورة خلفية باستخدام CSS. سيساعدك هذا المشروع على العمل مع كل من HTML و CSS.

ما هو CSS؟

يرمز CSS إلى ورقة الأنماط المتتالية. إنها لغة برمجة تسمح لك بتصميم لغات الترميز. إحدى لغات الترميز هذه هي HTML أو Hyper-Text Markup Language. يستخدم HTML لإنشاء مواقع الويب. على الرغم من أنه يمكنك التحكم في بعض أنماط موقع الويب باستخدام HTML ، فإن CSS توفر المزيد من خيارات التحكم والتصميم.

---

---

إنشاء موقع أساسي باستخدام HTML

نظرًا لأن CSS هي مجرد لغة نمط ، لاستخدامها ، نحتاج أولاً إلى شيء لتصميمه. سيكون موقع الويب الأساسي كافيًا لنا لبدء اللعب باستخدام CSS. ستعرض صفحتنا 'Hello World'.

Hello World

إذا لم تكن معتادًا على استخدام لغة HTML ، فلنراجع سريعًا ما تفعله جميع العناصر. كما ذكرنا ، HTML هي لغة ترميز ، مما يعني أنها تستخدم علامات لتمييز ماهية النص. كلما رأيت كلمة محاطة بها إنها علامة. هناك نوعان من العلامات ، علامة تحدد بداية القسم باستخدام والأخرى تحدد نهاية القسم باستخدام. يهدف النص داخل القسم أيضًا إلى تسهيل رؤية هذا التمييز.

في مثالنا ، لدينا أربع علامات. ال لغة البرمجة تشير العلامة إلى العناصر التي تشكل جزءًا من موقع الويب. ال رئيس تحتوي العلامة على معلومات الرأس التي لا يتم عرضها على الصفحة ولكنها مطلوبة لإنشاء الصفحة. تقع جميع العناصر المعروضة بين ملفات هيئة العلامات. لدينا عنصر واحد معروض فقط ، وهو ص بطاقة شعار. يخبر متصفح الويب أن النص عبارة عن فقرة.

متعلق ب: 10 أمثلة بسيطة لرموز CSS يمكنك تعلمها في 10 دقائق

---

---

إضافة CSS إلى HTML

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

Hello World

---

---

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

Hello World

يبدو موقعنا الإلكتروني أفضل ، لكن HTML الخاص بنا بدأ يبدو فوضوياً مع كل تلك الأوصاف في علامة الفقرة. يمكننا نقل هذه المعلومات إلى رأسنا. العنوان الخاص بنا هو للمعلومات التي نحتاجها لعرض الموقع بشكل صحيح.

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Hello World

الآن أصبح HTML الخاص بنا أسهل في القراءة. ستلاحظ أنه كان علينا تغيير بعض الأشياء. تخبر علامة النمط معلومات نمط متصفح الويب ، ولكن أيضًا تخبر النمط الذي تريده. في مثالنا ، استخدمنا طريقتين مختلفتين لنخبرها بما يجب أن تصممه. ال ص في علامة النمط تخبر متصفح الويب بتطبيق هذا النمط على جميع علامات الفقرات. ال # فقرة يخبره القسم فقط بعناصر النمط ذات المعرف فقرة لدينا . لاحظ أن هوية شخصية تمت إضافة المعلومات إلى علامة p في أجسامنا.

ماذا تفعل إذا كنت تشعر بالملل

استيراد ملف CSS إلى موقع الويب الخاص بك

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

بدلاً من ذلك ، سنحتفظ بمعلومات CSS في ملف منفصل واستيراد الملف لتصميم الصفحة. انسخ المعلومات والصقها بين علامات الأنماط في ملف CSS جديد ourCSSfile.css .

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

ثم قم باستيراد الملف إلى ملف HTML.

Hello World

إضافة صورة خلفية باستخدام CSS

الآن بعد أن أصبح لديك قاعدة صلبة في HTML و CSS ، فإن إضافة صورة خلفية ستكون بمثابة قطعة من الكعكة. أولاً ، حدد العنصر الذي تريد إعطاء صورة خلفية له. في مثالنا ، سنضيف خلفية للصفحة بأكملها. هذا يعني أننا نريد تغيير نمط هيئة . تذكر أن علامات النص تحتوي على جميع العناصر المرئية.

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

لتغيير نمط الجسم في CSS ، استخدم أولاً ملف هيئة كلمة رئيسية. ثم أضف الأقواس المتعرجة كما فعلنا من قبل {}. يجب أن تكون جميع معلومات النمط الخاصة بالجسم بين الأقواس المتعرجة. سمة النمط التي نريد تغييرها هي الصورة الخلفية . هناك العديد من سمات النمط. لا تتوقع حفظها جميعًا. ضع إشارة مرجعية على ورقة غش لخصائص CSS بالسمات التي تريد تذكرها.

متعلق ب: 8 تأثيرات HTML رائعة يمكن لأي شخص إضافتها إلى موقعه على الويب

كيفية منع الكروم من استخدام الكثير من الذاكرة

بعد السمة ، استخدم النقطتين للإشارة إلى كيفية تغيير السمة. لاستيراد صورة ، استخدم عنوان url () . يشير إلى أنك تستخدم ارتباط للإشارة إلى الصورة. ضع موقع الملف بين قوسين بين علامات التنصيص. أخيرًا ، قم بإنهاء السطر بفاصلة منقوطة. على الرغم من أن المساحة البيضاء ليس لها معنى في CSS ، استخدم المسافة البادئة لتسهيل قراءة CSS.

مثالنا يبدو كالتالي:

إذا لم يتم عرض صورتك بشكل صحيح بسبب حجم الصورة ، يمكنك تغيير الصورة مباشرة. ومع ذلك ، هناك سمات نمط الخلفية في CSS يمكنك استخدامها لتغيير الخلفية. سيتم تكرار الصور الأصغر من الخلفية تلقائيًا في الخلفية. لإيقاف ذلك ، أضف تكرار الخلفية:لا تكرار؛ إلى عنصرك.

هناك أيضًا طريقتان لجعل الصورة تغطي الخلفية بأكملها. أولاً ، يمكنك ضبط حجم الخلفية على حجم الشاشة باستخدام حجم الخلفية: 100٪ 100٪ ؛ ، ولكن سيؤدي ذلك إلى تمدد الصورة وقد يؤدي إلى تشويهها كثيرًا. إذا كنت لا تريد تغيير نسب الصورة ، يمكنك أيضًا ضبط حجم الخلفية على غطاء، يغطي . الغلاف سيجعل صورة الخلفية تغطي الخلفية ، لكنه لن يشوه الصورة.

تغيير لون الخلفية

دعونا نغير شيئًا أخيرًا. الآن بعد أن أصبح لدينا خلفية ، من الصعب قراءة فقرتنا. لنجعل خلفيتها بيضاء. العملية متشابهة. العنصر الذي نريد تعديله هو #ourParagraph. يشير # إلى أن 'ourParagraph' هو اسم معرف. بعد ذلك ، نريد ضبط ملف لون الخلفية ينسب إلى الأبيض.

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

أفضل بكثير.

الاستمرار في تصميم موقع الويب الخاص بك باستخدام CSS

الآن بعد أن عرفت كيفية تغيير نمط عناصر HTML المختلفة ، فإن السماء هي الحد! الطريقة الأساسية لتغيير سمات النمط هي نفسها. حدد العنصر الذي تريد تغييره ، ووصف كيفية تغيير السمة. أفضل طريقة لمعرفة المزيد هي اللعب بسمات مختلفة. تحدى نفسك لتغيير لون النص الخاص بك بعد ذلك.

يشارك يشارك سقسقة بريد الالكتروني أفضل 8 مواقع لأمثلة على ترميز HTML عالي الجودة

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

اقرأ التالي مواضيع ذات صلة

• برمجة
• لغة البرمجة
• تصميم المواقع
• CSS

نبذة عن الكاتب جينيفر سيتون(21 مقالة منشورة)

J. سيتون كاتب علوم متخصص في تحليل الموضوعات المعقدة. حاصلة على دكتوراه من جامعة ساسكاتشوان. ركز بحثها على الاستفادة من التعلم القائم على الألعاب لزيادة مشاركة الطلاب عبر الإنترنت. عندما لا تعمل ، ستجدها معها تقرأ أو تلعب ألعاب الفيديو أو تعمل في البستنة.

المزيد من Jennifer Seaton

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك