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

click fraud protection

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

تجنب استخدام العلامة التي تم إهمالها.

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

  1. باستخدام محرر النص أو HTML المفضل لديك في وضع عرض التعليمات البرمجية ، ضع المؤشر قبل الحرف الأول من الكلمة أو مجموعة الكلمات التي تريد تلوينها.

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

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

    في ملف CSS الخاص بنا ، دعنا نضيف:

    .focus-text {

     اللون: # F00 ؛

    }

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

    instagram viewer

  4. احفظ صفحتك.

    اختبر الصفحة في متصفح الويب المفضل لديك لترى التغييرات سارية المفعول.

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

نصائح وأشياء يجب الانتباه إليها

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

instagram story viewer