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

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

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

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

لماذا تغير لون خط HTML؟

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

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

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

عندما يتعلق الأمر بتخصيص موقعك ، غالبًا ما يتم تجاهل لون الخط ... ولكنه تعديل بسيط يمكن أن يضيف الكثير من السمات! انقر للتغريد

طرق لتحديد اللون

هناك عدة طرق لتعريف اللون في تصميم الويب ، بما في ذلك الاسم وقيم RGB والرموز السداسية وقيم HSL. دعونا نلقي نظرة على كيفية عملها.

اسم اللون

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

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

قيم RGB و RGBA

بعد ذلك ، لدينا قيم RGB و RGBA. يرمز RGB إلى الأحمر والأخضر والأزرق. يحدد اللون عن طريق مزج قيم الأحمر والأخضر والأزرق ، على نحو مشابه لكيفية مزج اللون على لوحة فعلية.

تبدو قيمة RGB كما يلي: RGB (153،0،255). يحدد الرقم الأول إدخال اللون الأحمر ، ويحدد الرقم الثاني إدخال اللون الأخضر ، ويحدد الرقم الثالث اللون الأزرق.

يمكن أن تتراوح قيمة كل إدخال لون بين 0 و 255 ، حيث يعني 0 أن اللون غير موجود على الإطلاق ويعني 255 أن اللون المعين في أقصى حد له.

تضيف قيمة RGBA قيمة أخرى إلى المزيج ، وهذه هي قيمة ألفا التي تمثل العتامة. يتراوح من 0 (غير شفاف) إلى 1 (شفاف بالكامل).

قيمة HEX

تعمل رموز الألوان السداسية بشكل مشابه لرموز RGB. تتكون من أرقام من 0 إلى 9 وأحرف من A إلى F. ويبدو الكود السداسي كما يلي: # 800080. يحدد الحرفان الأولان شدة اللون الأحمر ، ويحدد الرقمان الأوسطان شدة اللون الأخضر ، بينما يحدد الحرفان الأخيران شدة اللون الأزرق.

قيم HSL و HSLA

هناك طريقة أخرى لتعريف الألوان في HTML وهي استخدام قيم HSL. HSL تعني تدرج اللون والتشبع والخفة.

يستخدم Hue درجات من 0 إلى 360. في عجلة الألوان القياسية ، يكون الأحمر حوالي 0/360 ، والأخضر عند 120 ، والأزرق عند 240.

يستخدم التشبع النسب المئوية لتحديد مدى تشبع اللون. 0 يمثل الأسود والأبيض ، ويمثل 100 اللون الكامل.

أخيرًا ، تستخدم الخفة النسب المئوية بشكل مشابه للتشبع. في هذه الحالة ، 0٪ يمثل الأسود ، و 100٪ يمثل الأبيض.

على سبيل المثال ، اللون الأرجواني الذي استخدمناه في هذه المقالة سيبدو هكذا في HSL: hsl(276, 100%, 50%) .

يدعم HSL ، مثل RGB ، العتامة. في هذه الحالة ، يمكنك استخدام قيمة HSLA حيث يرمز A إلى alpha ويتم تعريفه في رقم من 0 إلى 1. إذا أردنا تقليل عتامة المثال الأرجواني ، فسنستخدم هذا الرمز: hsl(276, 100%, 50%, .85) .

الآن بعد أن عرفت كيفية تحديد اللون ، فلنلقِ نظرة على طرق مختلفة لتغيير لون خط HTML.

القديم: <font> العلامات

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

فيما يلي مثال لكيفية ظهور هذا الرمز برمز اللون السداسي عشرية:

 <font color="#800080">This text is purple.</font>

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

 <font color="purple">This text is purple.</font>

ومع ذلك ، يتم إهمال علامة <font> في HTML5 ولم تعد مستخدمة. تغيير لون الخط هو قرار تصميم ، والتصميم ليس الغرض الأساسي من HTML. لذلك ، من المنطقي أن علامات <font> لم تعد مدعومة في HTML5.

لذا إذا لم تعد علامة <font> مدعومة ، فكيف يمكنك تغيير لون خط HTML؟ الإجابة باستخدام Cascading Style Sheets أو CSS.

الجديد: أنماط CSS

لتغيير لون خط HTML باستخدام CSS ، ستستخدم خاصية لون CSS المقترنة بالمحدد المناسب. يتيح لك CSS استخدام أسماء الألوان وقيم RGB و hex و HSL لتحديد اللون. هناك ثلاث طرق لاستخدام CSS لتغيير لون الخط.

مضمنة CSS

يتم إضافة CSS المضمن مباشرة إلى ملف HTML الخاص بك. ستستخدم علامة HTML مثل <p> ثم نمطها باستخدام خاصية اللون CSS كما يلي:

 <p>This is a purple paragraph.</p>

إذا كنت تريد استخدام قيمة سداسية عشرية ، فسيبدو الرمز الخاص بك كما يلي:

 <p>This is a purple paragraph.</p>

إذا كنت ستستخدم قيمة RGB ، فستكتبها على النحو التالي:

 <p>This is a purple paragraph.</p>

أخيرًا ، باستخدام قيم HSL ، يمكنك استخدام هذا الرمز:

 <p>This is a purple paragraph.</p>

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

على سبيل المثال ، سيؤدي استبدال علامة <p> أعلاه بـ <h2> إلى تغيير لون نص العنوان هذا ، بينما يؤدي استبداله بعلامة <a> إلى تغيير لون هذا الارتباط. يمكنك أيضًا استخدام العنصر <span> لتلوين أي مقدار من النص.

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

تريد أن تعرف كيف قمنا بزيادة حركة المرور لدينا أكثر من 1000٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول WordPress!

إشترك الآن

إذا كنت تريد تغيير لون الخلفية للفقرة بأكملها أو العنوان ، فهذا مشابه جدًا لكيفية تغيير لون الخط. يجب عليك استخدام سمة background-color ذلك واستخدام قيم اسم اللون أو hex أو RGB أو HSL لتعيين اللون. هذا مثال:

<p>

مضمن CSS

يتم وضع CSS المضمن ضمن علامات <style> ويتم وضعه بين العلامات الرئيسية لمستند HTML الخاص بك.

سيبدو الرمز هكذا إذا كنت تريد استخدام اسم اللون:

 <!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

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

إذا كنت تريد استخدام الكود السداسي ، فإليك الشكل الذي سيبدو عليه الرمز:

 <!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

يستخدم المثال أدناه قيم RBGA حتى تتمكن من رؤية مثال لتعيين العتامة:

 <!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>

وسيبدو رمز HSL كما يلي:

 <!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

CSS خارجي

أخيرًا ، يمكنك استخدام CSS خارجي لتغيير لون الخط على موقع الويب الخاص بك. CSS الخارجية هي CSS يتم وضعها في ملف ورقة أنماط منفصل ، يُسمى عادةً style.css أو stylesheet.css.

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

لتغيير لون الخط باستخدام CSS خارجي ، يمكنك استخدام المحددات لتصميم أجزاء HTML التي تريدها. على سبيل المثال ، سيؤدي هذا الرمز إلى تغيير كل النص الأساسي على موقعك:

 body {color: purple;}

تذكر أنه يمكنك استخدام قيم RGB و hex و HSL وليس فقط أسماء الألوان لتغيير لون الخط. إذا كنت ترغب في تعديل ورقة الأنماط ، فمن المستحسن القيام بذلك في محرر التعليمات البرمجية.

مضمنة أم مضمنة أم خارجية؟

أنت تعرف الآن كيف يمكنك استخدام CSS لتغيير لون الخط. ولكن ما هي الطريقة التي يجب أن تستخدمها؟

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

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

يتم وضع CSS المضمنة بين علامات <head> وداخل علامات <style>. مثل CSS المضمنة ، فهي جيدة للإصلاحات السريعة وتجاوز الأنماط المحددة في ورقة أنماط خارجية.

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

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

ضع في اعتبارك أن الأنماط المضمنة والمضمنة يمكن أن تتجاوز الأنماط المعينة في ورقة الأنماط الخارجية.

علامات الخطوط أو أنماط CSS: إيجابيات وسلبيات

الطريقتان الأساسيتان لتغيير ألوان خط HTML هما استخدام علامة الخط أو أنماط CSS. كلتا الطريقتين لهما إيجابيات وسلبيات.

مميزات وعيوب علامات خط HTML

تعد علامة خط HTML سهلة الاستخدام ، لذا فهي احترافية لصالحها. عادةً ما يكون CSS أكثر تعقيدًا ويستغرق وقتًا أطول للتعلم من كتابة <font color="purple"> . إذا كان لديك موقع ويب قديم لا يستخدم HTML5 ، فإن علامة الخط هي طريقة قابلة للتطبيق لتغيير لون الخط.

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

إيجابيات وسلبيات CSS

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

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

على الجانب السلبي ، يمكن أن يستغرق CSS و HTML5 وقتًا للتعلم والكتابة بشكل صحيح مقارنة بالطريقة القديمة في كتابة التعليمات البرمجية.

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

تلميحات حول تغيير لون خط HTML

الآن بعد أن عرفت كيفية تغيير لون خط HTML ، إليك بعض النصائح التي ستساعدك.

استخدم منتقي الألوان

بدلاً من اختيار الألوان بشكل عشوائي ، استخدم منتقي الألوان لتحديد الألوان الصحيحة. تتمثل فائدة منتقي الألوان في أنه سيمنحك اسم اللون وقيم hex و RGB و HSL الصحيحة التي تحتاج إلى استخدامها في التعليمات البرمجية الخاصة بك.

تحقق من التباين

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

ابحث عن اللون باستخدام طريقة الفحص

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

تريد تغيير لون الخط على موقعك؟ انه سهل! سيساعدك هذا الدليل على البدء ️ انقر للتغريد

ملخص

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

في هذا الدليل ، تعرفت على أربع طرق مختلفة لتغيير لون خط HTML: باستخدام أسماء الألوان ، والأكواد السداسية ، وقيم RGB ، و HSL.

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

ما هي أفكارك حول تغيير لون الخط باستخدام CSS وعلامة الخط؟ دعنا نعلم فى قسم التعليقات!