HTML

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

تغيير لون النص
كُتب بواسطة فراس اللو

تحدثنا سابقًا عن الوسوم في لغة HTML والصفات Attributes التي من المُمكن استخدامها مع كل وسم، فعند استخدام وسم الصورة img يجب استخدام الصفة src لتحديد مكان الصورة.

يُمكن أيضًا التحكم في تنسيق عناصر الصفحة من خلال صفة جديدة وهامّة تحمل اسم Style ويُمكن اعتبارها أبسط استخدام للغة CSS داخل صفحات الويب.

  • قُم بإنشاء صفحة جديدة مع كتابة الوسوم الأساسية head، HTML بالإضافة إلى body.
  • داخل وسم Body قُم بكتابة فقرة باستخدام الوسم p.
  • بعدها قُم بإضافة الصفة Style لوسم الفقرة لتحصل على الشيفرة
    <html>
        <head>
            <title> كيف برمجة | تنسيق النصوص</title>
        </head>    
        <body>
            <p style=""> تجربة تنسيق النص واختيار لون جديد :) </p>
            
        </body>    
    </html>
  • تمامًا مثلما هو الحال في وسوم HTML، فإن الصفات لها مجموعة من الخيارات والقيم المُعرّفة بشكل مُسبق، وأحد هذه الخيارات هو color لاختيار لون النص.
  • قُم بكتابة color داخل الصفحة style ثم أسند القيمة RED إليه، ولإسناد قيمة يتم كتابة الخاصّية color متبوعة بنقطتين لتُصبح الشيفرة على الشكل
    <html>
        <head>
            <title> كيف برمجة | تنسيق النصوص</title>
        </head>    
        <body>
            <p style="color:RED;"> تجربة تنسيق النص واختيار لون جديد :) </p>
            
        </body>    
    </html>

     

  • قُم بحفظ الصفحة وتجربتها باستخدام أي مُتصفح لتلاحظ أن النص ظهر باللون الأحمر.
  • يُمكن اختيار أي لون آخر من خلال استخدام رمز اللون بنظام العد الستة عشري مسبوقًا بالرمز #.
  • لمعرفة القيمة الصحيحة لأي لون يُمكن الإستعانة بالموقع http://www.colorpicker.com، لتحصل على شيفرة بالشكل
            <p style="color:#2E97A6;"> تجربة تنسيق النص واختيار لون جديد :) </p>

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

عن الكاتب

فراس اللو

مُبرمج ومُطوّر مواقع مُستقل، مُوسس موقع بديل وعضو فريق التحرير في البوابة العربية للأخبار التقنية.

اترك تعليقًا

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.