كيفية تغيير لون خلفية HTML

كيفية تغيير لون خلفية HTML

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

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

دعنا نتعرف على كيفية تغيير لون خلفية HTML.

كود تغيير لون الخلفية HTML

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

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

يمكن تغيير لون خلفية HTML بثلاث طرق مختلفة:

  • استخدام سمة bgcolor
  • باستخدام Inline CSS
  • باستخدام CSS الداخلية

استخدام سمة bgcolor

يوفر HTML مجموعة من الميزات والأنماط بحيث يمكن للمستخدمين تخصيص المستندات وفقًا لاحتياجاتهم. يمكن استخدام خاصية bgcolor كما هو موضح في كود HTML أدناه:

<html >
<head>
    <title>عرب ويب</title>
</head>
<body bgcolor="yellow" >
    <h1>السلام عليكم اسمي حسين</h1>
</body> 
</html>

باستخدام Inline CSS

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

سيتم استخدام سمة لون الخلفية لاحقًا لتغيير لون خلفية صفحة الويب بأكملها.

يمكنك تطبيق تنسيق CSS في بداية كود HTML الخاص بك في القسم الرئيسي> ، أو يمكنك استخدام تنسيق CSS المضمن ، والذي يمكّنك من توفير لون الخلفية داخل علامة العنصر الذي ترغب في تغييره.

إذا قمت بتضمين تنسيق CSS في العنوان> القسم ، فيجب استخدام المحددات لتحديد العنصر الذي سيتم تطبيق التنسيق عليه.

يمكنك تغيير لون الخلفية باستخدام عنصر النمط الموجود داخل العلامة المحددة. عمليًا ، يمكن تعديل أي عنصر HTML ، مثل العناوين (h1>) والفقرات (p>) والجداول (الجدول>) وأقسام الصفحة (div>) ، باستخدام هذا الأسلوب لتغيير لون خلفية الصفحة بأكملها.

باستخدام CSS الداخلية

إذا كنت ترغب في استخدام CSS داخلي متتالي لتغيير لون الخلفية لصفحة ويب ، فيجب عليك اتباع الإرشادات أدناه.

<html lang="ar">
<head>
    <title>استخدام internal CSS</title>
</head>
<body style="background-color:yellow">
    <h1>عرب ويب</h1>
    <h2>اهلا بك في مدونة عرب ويب</h2>
</body>
</html>

تغيير لون خلفية الجدول في HTML

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

أفضل طريقة لتغيير لون الخلفية هي إضافة لون خلفية عنصر النمط إلى الجدول أو علامة الخلية أو الصف.

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

table { background-colour: #ff000; }

tr { background-colour: green; }

td { background-color: #000; }

تتمثل الميزة الرئيسية لاستخدام ورقة أنماط لإدارة ألوان الخلفية في أنه يمكنك لاحقًا تعديل اختيارك للألوان. يمكنك تغيير تفضيل اللون في CSS مرة واحدة ، وسيتم تطبيقه على الفور على جميع تكرارات بنية class = "ColColor" ، بدلاً من تحديث كل خلية في محتوى HTML واحدة تلو الأخرى.

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

لون الخلفية Hex Codes

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

يتكون كل رمز سداسي عشري من ستة أحرف ، ويشير كل زوج من الأحرف ، يتراوح من 00 (أقل كثافة) إلى FF (أقصى كثافة) ، إلى درجة الألوان الأساسية الثلاثة - الأحمر والأخضر والأزرق (أعلى كثافة).

على سبيل المثال ، من بين الألوان الثلاثة ، يكون اللون الأبيض هو الأكثر كثافة. لذلك ، لها القيمة السداسية العشرية #FFFFFF. الأسود ، الذي يحتوي على أقل تشبع لوني (# 000000) ، هو الاستثناء لهذه القاعدة. بالنسبة للون الأخضر ، الذي له القيمة السداسية العشرية # 00FF00 ، نرفع قوة اللون الأخضر ونقلل من شدة اللونين الأحمر والأزرق.

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



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -