كيفية تغيير لون كلمة مع سبان تاج و CSS

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

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

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

خطوة بخطوة التعليمات

1. افتح صفحة الويب التي تريد تحديثها في محرر HTML النصي المفضل لديك. قد يكون هذا برنامجًا مثل Adobe Dreamweaver أو مجرد محرر نصوص مثل Notepad و Notepad ++ و TextEdit وما إلى ذلك.
2. في المستند ، حدد موقع الكلمات التي تريد عرضها بلون مختلف على الصفحة. من أجل هذا البرنامج التعليمي ، يتيح لك استخدام بعض الكلمات الموجودة داخل فقرة أكبر من النص. سيتم احتواء هذا النص داخل زوج thetag. ابحث عن إحدى الكلمتين اللتين ترغب في تعديل لونهما.
3. ضع المؤشر قبل الحرف الأول في الكلمة أو مجموعة الكلمات التي تريد تغيير لونها. تذكر ، إذا كنت تستخدم محرر WYSIWYG مثل Dreamweaver ، فأنت تعمل في وظيفة "عرض الكود" الآن.
4. دعنا نلف النص الذي نريد تغيير لونه باستخدام علامة ، بما في ذلك سمة فئة. قد تبدو الفقرة بأكملها كالتالي: هذا نص يركز عليه في جملة.
5. لقد استخدمنا للتو عنصرًا داخليًا ، لإعطاء هذا النص المحدد "خطافًا" يمكننا استخدامه في CSS. خطوتنا التالية هي الانتقال إلى ملف CSS الخارجي الخاص بنا لإضافة قاعدة جديدة.

1. في ملف CSS ، دعنا نضيف:
   1. .focus-text {
   2. اللون: # F00.
   3. }
2. ستحدد هذه القاعدة ذلك العنصر المضمن ، لعرضه باللون الأحمر. إذا كان لدينا نمط سابق يقوم بتعيين نص المستند إلى اللون الأسود ، فإن هذا النمط المضمن قد يتسبب في تركيز النص على الامتداد والتركيز عليه بلون مختلف. يمكننا أيضا إضافة أنماط أخرى لهذه القاعدة ، ربما جعل النص مائل أو جريئة للتأكيد عليها أكثر؟
3. احفظ صفحتك.
4. اختبر الصفحة في متصفح الويب المفضل لديك لرؤية التغييرات سارية المفعول.
5. لاحظ أنه بالإضافة إلى ذلك ، يختار بعض محترفي الويب استخدام عناصر أخرى مثل أزواج أو علامات. تم استخدام هذه العلامات لتكون "غامقة" و "مائلة" على وجه التحديد ، ولكن تم إيقافها واستبدالها بـ و. لا تزال العلامات تعمل في المتصفحات الحديثة ، ومع ذلك ، يستخدمها الكثير من مطوري الويب على شكل خطاطيف مائلة. هذه ليست الطريقة الأسوأ ، ولكن إذا كنت ترغب في تجنب أي عناصر موقوفة ، أقترح التمسك بالعلامة لهذه الأنواع من احتياجات التصميم.

نصائح وأشياء للاحتفال من أجل

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