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

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

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

تغيير لون نص الموقع باستخدام CSS

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

لون أزرق؛

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

h1 {color: blue؛ }
ع {اللون: أحمر ؛ }
زر {اللون: أحمر؛ }

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

متعلق ب: شرح نموذج مربع CSS بأمثلة

العثور على فئة CSS المناسبة

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

فتح المفتش

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

• جوجل كروم: CTRL + Shift + C أو نقاط القائمة > أدوات أكثر > ادوات المطورين
• مايكروسوفت ايدج: CTRL + Shift + C أو نقاط القائمة > أدوات أكثر > ادوات المطورين
• موزيلا فايرفوكس: CTRL + Shift + C أو نقاط القائمة > أدوات أكثر > أدوات مطوري الويب
• أبل سفاري: التفضيلات > متقدم > إظهار قائمة "تطوير" في شريط القوائم وثم طور > إظهار مفتش الويب

العثور على نمط نص CSS الصحيح

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

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

• جوجل كروم: انقر على اليمين > فحص
• مايكروسوفت ايدج: انقر على اليمين > فحص
• موزيلا فايرفوكس: انقر على اليمين > فحص أو س
• أبل سفاري: انقر على اليمين > تدقيق العنصر

سيؤدي القيام بذلك إلى جعل وحدة التحكم / نافذة المفتش في موقع الويب الخاص بك تركز على العنصر الذي تحاول تغييره. في Chrome و Safari و Edge و Firefox ، يجب أن ترى قسمًا يسمى الأنماط يحتوي على جميع رموز CSS للعنصر الذي تقوم بفحصه.

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

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

متعلق ب: كيفية إنشاء شريط تنقل سريع الاستجابة باستخدام HTML و CSS

إضافة CSS الجديد الخاص بك

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

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

.listing-title {
لون أزرق؛
}

ماذا لو لم يتغير لون النص الخاص بك؟

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

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

.listing-title {
اللون: أزرق! مهم ؛
}

نمط نص آخر CSS Fun

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

• حجم الخط: هذا يغير حجم النص على موقع الويب الخاص بك ، على سبيل المثال ، حجم الخط: 12 بكسل ؛
• وزن الخط: يشير الوزن إلى سمك الخط ، حيث يشير الخط الغامق إلى ارتفاع الوزن والنص الرفيع منخفض ، على سبيل المثال ، وزن الخط: 400 ؛
• محاذاة النص: هذا يغير محاذاة النص الذي تعمل به ، على سبيل المثال ، محاذاة النص: صحيح ؛
• ظل النص: هذا يسمح لك بإضافة ظل إلى النص الخاص بك مع مجموعة من السمات ، على سبيل المثال ، ظل النص: 2px 2px 3px black ؛
• تحويل النص: هذا يغير حالة النص الذي تعمل به ، على سبيل المثال ، تحويل النص: أحرف كبيرة ؛
• زخرفة النص: يتيح لك هذا إضافة تسطير وشرطات وزخارف أخرى إلى النص ، على سبيل المثال ، زخرفة النص: تسطير ؛

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

متعلق ب: كيفية تغيير نص موقع الويب الخاص بك باستخدام خاصية عائلة الخطوط CSS

تعرف على المزيد من لون نص CSS

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

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

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

اقرأ التالي

نبذة عن الكاتب