علامة لتغيير الخلفية في html. لون النص ولون الخلفية في CSS. الأدوات الأساسية لتعيين خلفية صفحات الويب

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

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

لا يوجد سوى عدد قليل من الطرق السهلة لتغيير مظهر موقعك الحالي. كثير من المستخدمين لا يدركون حتى مدى سهولة ذلك.

كيفية تخصيص الخط

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

كيفية تخصيص لون الخلفية

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

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

يمكنك بسهولة العثور على مخطط ألوان HTML في المنشورات المتخصصة. يتم عرض كل لون في الترميز كرمز مكون من ستة أرقام. على سبيل المثال ، تم تعيين خلفية بيضاء كـ #FFFFFF.

وبالتالي ، ابحث عن رمز اللون الذي تريد أن تراه على موقعك كلون للخلفية. سيبدو في الترميز كما يلي:

لون الخلفية: #XXXXXX ؛ (

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

إضافة صورة خلفية

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

قم بتحميل الصورة على الإنترنت. يسمح لك الكثير بتنزيل الصور مجانًا. احصل على عنوان URL لصورة الخلفية الخاصة بك. للقيام بذلك ، تحتاج إلى فتح الصورة في متصفحك ونسخ عنوان URL.

الصق الكود لإضافة صورة كخلفية. في HTML يبدو كالتالي:

صورة الخلفية: url (عنوان URL للصورة) ؛

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

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

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

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

الأدوات الأساسية لتعيين خلفية صفحات الويب

لتعيين صورة الخلفية ، قدم مصممو لغة الويب سمة الخلفية. كان متوفرا في كل من و css.

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

لذلك ، لضبط صورة الخلفية عبر وحدة html فقط اكتب هذا الرمز: ...

وبدلاً من الكلمات "عنوان الملف" ، أدخل المسار إلى الصورة.

ومع ذلك ، لاحظ! إذا كنت تريد رؤية لوحة قماشية ذات لون واحد كخلفية ، محددة بقيمة من لوحة الألوان ، فسيتم ذلك باستخدام سمة bgcolor.

فمثلا، ...

، لقد وضعنا خلفية سوداء لموقعنا.

يتم تحديد الألوان في css و html إما عن طريق كلمة إنجليزية (على سبيل المثال ، أحمر) أو رمز خاص يتكون من علامة # وستة أحرف بعدها (على سبيل المثال ، # FFDAB9).

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

الخلفية كخاصية في أوراق الأنماط المتتالية

يتم تعيينه إما في ملف منفصل باستخدام أنماط css ، أو في عنصر

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

مع خالص التقدير ، رومان تشويشوف

لون الخلفية عنصر مهم جدًا في أي صفحة ويب. أولاً ، يحدد المزاج الصحيح والمزاج العام للموقع ، وثانيًا ، يسهل تصور النص.

يتم تعيين لون الخلفية لصفحة الويب باستخدام السمة bgcolor للعلامة .

مثال 1: تغيير لون الخلفية

يمكن تحديد اللون بقيمة سداسية عشرية أو باسمه.

على الرغم من أنه يمكنك تحديد أي لون للخلفية ، فإن معظم المواقع تستخدم خلفية يغلب عليها اللون الأبيض والحروف السوداء كخيار ثابت.

صورة الخلفية

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

مثال 2: إضافة صورة خلفية

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

نظرًا لأنه يتم تحميل صورة الخلفية بشكل أبطأ من لون الخلفية ، فقد يحدث ألا يكون النص قابلاً للقراءة لفترة حتى يتم تحميل الصور. يمكن أن يحدث نفس الشيء مع الصور المعطلة في المتصفح. لذلك ، يوصى دائمًا بتعيين لون الخلفية مع صورة الخلفية (المثال 3).

مثال 3: استخدام صورة الخلفية ولون الخلفية

خلفية ثابتة

بشكل افتراضي ، عند استخدام شريط التمرير ، تتحرك صورة الخلفية مع محتوى صفحة الويب. يتيح لك Internet Explorer إمكانية إصلاح الخلفية باستخدام السمة bgproperties = "fixed" للعلامة .

مثال 4 - تعيين خلفية ثابتة

من خلال تحديد السمة bgproperties ، كما هو موضح في المثال 4 ، ستظل صورة الخلفية على صفحة الويب ثابتة وسيتحرك النص والرسومات والعناصر الأخرى باستخدام شريط التمرير.

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

حسب اسم اللون

تدعم المتصفحات بعض الألوان بالاسم. فيما يلي بعض الكلمات الرئيسية - أسود (أسود) ، أبيض (أبيض) ، أحمر (أحمر) ، أخضر (أخضر) ، أزرق (أزرق) ، إلخ.

حسب القيمة السداسية العشرية

يتم استخدام الأرقام السداسية العشرية لتحديد الألوان. النظام الست عشري ، على عكس النظام العشري ، مبني على الرقم 16. ستكون الأرقام كما يلي: 0 ، 1 ، 2 ، 3 ، 4 ، 5 ، 6 ، 7 ، 8 ، 9 ، أ ، B ، C ، D ، E ، F. يتم استبدال الأرقام من 10 إلى 15 بأحرف لاتينية. يتم تكوين الأعداد الأكبر من 15 في النظام الست عشري من خلال دمج رقمين في واحد. على سبيل المثال ، الرقم 255 في النظام العشري يتوافق مع الرقم FF بالنظام الست عشري. لتجنب الالتباس في تعريف نظام الأرقام ، فإن الرقم السداسي العشري مسبوق برمز التجزئة # ، على سبيل المثال # 666999. يمكن أن يأخذ كل لون من الألوان الثلاثة - الأحمر والأخضر والأزرق - قيمًا من 00 إلى FF. وهكذا ، فإن تسمية اللون تنقسم إلى ثلاثة مكونات #rrggbb ، حيث يشير الحرفان الأولان إلى المكون الأحمر للون ، ويميز الحرفان الأوسطان المكون الأخضر ، والأخران يميزان المكون الأزرق. يُسمح باستخدام نموذج مختصر مثل #rgb ، حيث يجب مضاعفة كل حرف. وبالتالي ، يجب اعتبار الإدخال # fc0 على أنه # ffcc00. لا يهم الحالة في هذه الحالة ، لذلك يمكن كتابة النص بأحرف كبيرة وصغيرة.

مع RGB

يمكنك تحديد لون باستخدام قيم الأحمر والأخضر والأزرق بعبارات عشرية. يمكن أن يأخذ كل مكون من المكونات الثلاثة رقمًا من 0 إلى 255. ومن المقبول أيضًا تعيين اللون كنسبة مئوية ، على سبيل المثال rgb (90٪ ، 30٪ ، 60٪).

RGBA

يتشابه تنسيق RGBA في بناء الجملة مع تنسيق RGB ، ولكنه يتضمن قناة ألفا تحدد شفافية العنصر. تكون القيمة 0 شفافة تمامًا ، والقيمة 1 معتم ، والقيمة الوسيطة مثل 0.5 شفافة.

يوضح المثال 1 تغيير ألوان الخلفية والنص.

مثال 1: لون الخلفية

الاستدامة

الاستقرار وفقًا لـ Lyapunov يذبذب الجهاز المستقر.

تظهر نتيجة هذا المثال في الشكل. واحد.

أرز. 1. خلفية ملونة

يتيح لك تنسيق RGBA ضبط لون الخلفية لعنصر ما ليصبح شفافًا بحيث تظهر خلفية صفحة الويب من خلاله. يبدو أكثر وضوحًا وإثارة للإعجاب عندما يكون لدينا صورة أو نمط خلفية ، بدلاً من لون خالص. ثم ستظهر الصورة من خلال الخلفية ، ولكن تظل سهولة قراءة النص (الشكل 2).

أرز. 2. خلفية شبه شفافة

يوضح المثال 2 استخدام تنسيق RGBA لإنشاء مثل هذه الخلفية.

مثال 2: تنسيق RGBA

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

خاصية COLOR

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

• اسم اللون (أخضر ، أسود ، أحمر ...) ؛
• رمز اللون الست عشري (008000 ، 000000 ، FF0000 ...) ؛
• رمز اللون العشري في RGB (اللون: rgb (40 ، 175 ، 250)) ؛

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

كما ذكرت سابقًا ، يمكنك تعيين لون لجميع العناصر تقريبًا ، يمكن أن يكون (H1 ... H6) ، (قوي ، em) وحتى كامل (p) وحتى حدود الجدول ، ولكن المزيد عن ذلك لاحقًا.

فيما يلي مثال على تعيين لون النص باستخدام CSS:

h1 (اللون: أزرق)

في هذا المثال ، ستكون جميع عناوين المستوى الأول لصفحة الويب باللون الأزرق:

قوي (اللون: أحمر)

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

يمكن كتابتها على النحو التالي:

h1 ، p ، قوي (اللون: أخضر)

ثم ستظهر عناوين المستوى الأول وكل الفقرات وكل ما يتم تمييزه بعلامة باللون الأخضر.

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

class = "blue"> سيكون لون عناوين هذه الفئة باللون الأزرق

في ورقة أنماط CSS ، في هذه الحالة ، نكتب قاعدة يكون فيها عنصر H1 هو المحدد ، ومن خلال النقطة ( . ) اسم الفصل:

h1.Blue (اللون الأزرق)

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

معرف = "أزرق"> سيكون لون عناوين هذا المعرف باللون الأزرق

في ورقة الأنماط بدورها:

h1 # أزرق (اللون: أزرق)

خاصية BACKGROUND-COLOR

تسمح لك هذه الخاصية بتعيين لون الخلفية للصفحة ككل ، أو فقرة ، أو ارتباط ، بشكل عام لأي عنصر HTML. للقيام بذلك ، يتم تحديد اللون أو القيمة في قيمة الخاصية. شفاف(شفاف). رمز خلفية الصفحة مكتوب:

الجسم (لون الخلفية: أكوا)

في هذه الحالة تكون خلفية الصفحة باللون الفيروزي ، ولإعطاء خلفية العنوان نكتب:

h1 (لون الخلفية: أصفر)

نحصل على خلفية صفراء لعناوين المستوى الأول.

اللون والخلفية في CSS

خاصية BACKGROUND-REPEAT

تُستخدم هذه الخاصية عند التعيين لتحديد ما إذا كانت ستتكرر أفقيًا وعموديًا. القيم الصالحة:

• كرر- تتكرر الصورة رأسيًا وأفقيًا ؛
• كرر x- تتكرر الصورة أفقياً فقط ؛
• كرر ص- تتكرر الصورة عموديًا فقط ؛
• لا تكرار- الصورة لا تتكرر.

الكود مكتوب على النحو التالي:

ص (
صورة الخلفية: url ( عنوان ملف الصورة) ;
تكرار الخلفية: كرر x
}

سيكون نص هذه الفقرة أعلى صورة الخلفية ، والتي سيتم وضعها أفقيًا.

خاصية BACKGROUND-ATTACHMENT

تُستخدم هذه الخاصية لإعلام المتصفح بما إذا كان يجب تمرير صورة خلفية الصفحة مع النص ( التمرير) أو ابق ثابتًا ( مُثَبَّت).

هيئة (
صورة الخلفية: url ( عنوان ملف الصورة) ;
تكرار الخلفية: كرر x ؛
مرفق الخلفية: ثابت
}

في هذه الحالة ، ستبقى صورة الخلفية ثابتة.

خاصية BACKGROUND-POSITION

تُستخدم هذه الخاصية لوضع الصورة بالنسبة إلى. يتم تعيين القيم بالنسبة المئوية (٪) ، بوحدات الطول (سم ، بكسل) ، مع الكلمات الأساسية:

• عموديا:
• أعلى- الجزء العلوي من الصورة بمحاذاة الحافة العلوية للصفحة أو الكتلة ؛
• المركز
• الأسفل- تتم محاذاة الجزء السفلي من الصورة مع الحافة السفلية للصفحة أو الكتلة.
• أفقيًا:
• اليسار- تتم محاذاة الحافة اليسرى للصورة مع الحافة اليسرى للصفحة أو الكتلة ؛
• المركز- يتم محاذاة مركز الصورة إلى وسط الصفحة أو الكتلة ؛
• حقا- تتم محاذاة الحافة اليمنى للصورة مع الحافة اليمنى للصفحة أو الكتلة.

نكتب مثال رمز بالنسب المئوية ووحدات الطول والكلمات الرئيسية:

هيئة (
صورة الخلفية: url ( عنوان ملف الصورة) ;
موضع الخلفية: 0٪ 0٪
}

الجسم(
صورة الخلفية: url ( عنوان ملف الصورة) ;
وضع الخلفية: 10 بكسل 25 سم
}

الجسم(
صورة الخلفية: url ( عنوان ملف الصورة) ;
موضع الخلفية: أعلى الوسط
}