باستخدام CSS ، من السهل تعيين لون النص في المستند. إذا كنت تريد عرض الفقرات في صفحتك بلون معين ، فكل ما عليك هو تحديد ذلك في ورقة الأنماط الخارجية وسيقوم المتصفح بعرض النص الخاص بك باللون المختار. ماذا يحدث حين تريد تغيير لون كلمة واحدة فقط (أو ربما مجرد كلمات قليلة) في فقرة من النص؟ لذلك ، ستحتاج إلى استخدام عنصر مضمّن مثل العلامة.
في نهاية المطاف ، يكون تغيير لون كلمة واحدة أو مجموعة صغيرة من الكلمات داخل الجملة أمرًا سهلاً باستخدام CSS ، والعلامات هي HTML صالحة ، لذلك لا تقلق بشأن هذا النوع من الاختراق. باستخدام هذا الأسلوب ، يمكنك أيضًا تجنب استخدام العلامات والسمات التي تم إيقافها مثل "الخط" ، والتي تعد نتاجًا لحقبة HTML سابقة.
تهدف هذه المقالة إلى بدء مطوري الويب الذين من المحتمل أن يكونوا حديثي العهد بـ HTML و CSS. سيساعدك هذا على تعلم كيفية استخدام علامة HTML و CSS لتغيير لون نص معين على صفحاتك. ومع ذلك ، هناك بعض العيوب لهذه الطريقة ، والتي سنغطيها في نهاية هذه المقالة. في الوقت الحالي ، تابع القراءة لمعرفة خطوات تغيير لون النص هذا. إنه سهل للغاية ويجب أن يستغرق حوالي دقيقتين.
خطوة بخطوة التعليمات
- افتح صفحة الويب التي تريد تحديثها في محرر HTML النصي المفضل لديك. قد يكون هذا برنامجًا مثل Adobe Dreamweaver أو محرر نصوص بسيط مثل Notepad و Notepad ++ و TextEdit وما إلى ذلك.
- في المستند ، حدد موقع الكلمات التي تريد عرضها بلون مختلف على الصفحة. من أجل هذا البرنامج التعليمي ، دعونا نستخدم بعض الكلمات الموجودة في فقرة أكبر من النص. سيتم احتواء هذا النص داخل زوج العلامات. ابحث عن إحدى الكلمتين اللتين ترغب في تعديل لونهما.
- ضع المؤشر قبل الحرف الأول في الكلمة أو مجموعة الكلمات التي تريد تغيير لونها. تذكر ، إذا كنت تستخدم محرر WYSIWYG مثل Dreamweaver ، فأنت تعمل في "عرض الكود" الآن.
- دعنا نلف النص الذي نريد تغيير لونه باستخدام علامة ، بما في ذلك سمة فئة. قد تبدو الفقرة بأكملها كالتالي:
هذا نص يركز عليه في جملة.
- لقد استخدمنا للتو عنصرًا داخليًا ، لإعطاء هذا النص المحدد "خطافًا" يمكننا استخدامه في CSS. خطوتنا التالية هي الانتقال إلى ملف CSS الخارجي الخاص بنا لإضافة قاعدة جديدة.
- في ملف CSS ، دعنا نضيف:
-
.focus-text {
-
اللون: # F00.
-
}
- ستحدد هذه القاعدة ذلك العنصر المضمن ، لعرضه باللون الأحمر. إذا كان لدينا نمط سابق يقوم بتعيين نص المستند إلى اللون الأسود ، فإن هذا النمط المضمن قد يتسبب في تركيز النص على الامتداد والتركيز عليه بلون مختلف. يمكننا أيضا إضافة أنماط أخرى لهذه القاعدة ، ربما جعل النص مائل أو جريئة للتأكيد عليها أكثر؟
- احفظ صفحتك.
- اختبر الصفحة في متصفح الويب المفضل لديك لرؤية التغييرات سارية المفعول.
- لاحظ أنه بالإضافة إلى ذلك ، يختار بعض محترفي الويب استخدام عناصر أخرى مثل أزواج أو علامات. تم استخدام هذه العلامات لتكون بالخط العريض والمائل تحديدًا ، ولكن تم إيقافها واستبدالها بـ و. لا تزال العلامات تعمل في المتصفحات الحديثة ، ومع ذلك ، يستخدمها الكثير من مطوري الويب على شكل خطاطيف مائلة. ليس هذا هو النهج الأسوأ ، ولكن إذا كنت ترغب في تجنب أي عناصر موقوفة ، فإننا نقترح الالتزام بالعلامة لهذه الأنواع من احتياجات التصميم.
نصائح وأشياء للاحتفال من أجل
في حين أن هذا النهج يعمل بشكل جيد لتلبية احتياجات التصميم الصغيرة مثل إذا كنت بحاجة إلى تغيير نص صغير واحد فقط في المستند ، يمكن أن يخرج بسرعة عن السيطرة. إذا وجدت أن صفحتك مملوءة بعناصر مضمنة ، جميعها تحتوي على فئات فريدة تستخدمها في ملف CSS الخاص بك ، فقد تفعل ذلك بشكل خاطئ ، تذكر أنه كلما زاد عدد هذه العلامات الموجودة في صفحتك ، كلما زادت صعوبة ذلك من المرجح أن يكون الحفاظ على هذه الصفحة في المستقبل. بالإضافة إلى ذلك ، نادرًا ما تحتوي الطباعة الجيدة على الويب على العديد من أشكال الألوان وما إلى ذلك عبر الصفحة.
