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

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

كيفية استخدام أنماط CSS لتغيير لون الخط

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

استخدم الكلمات الأساسية الملونة لتغيير ألوان الخط

لتغيير لون النص لكل فقرة في ملف HTML ، انتقل إلى ورقة الأنماط الخارجية واكتب ص {}. ضع ال اللون الملكية في النمط متبوعًا بنقطتين ، مثل

ص {اللون:}. بعد ذلك ، أضف قيمة اللون بعد الخاصية ، وقم بإنهائها بفاصلة منقوطة. في هذا المثال ، يتم تغيير نص الفقرة إلى اللون الأسود:

ص {
لون أسود؛
}

استخدم القيم السداسية العشرية لتغيير ألوان الخط

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

يمكن استخدام نمط CSS هذا لتلوين فقراتك باللون الأسود لأن الكود السداسي # 000000 يُترجم إلى الأسود. يمكنك حتى استخدام الاختصار بهذه القيمة السداسية وكتابتها كـ # 000 بنفس النتائج.

ص {
اللون: # 000000 ؛
}

تعمل القيم السداسية العشرية بشكل جيد عندما تحتاج إلى لون ليس مجرد أسود أو أبيض. على سبيل المثال ، يمنحك هذا الرمز السداسي العشري القدرة على تعيين ظل محدد جدًا للأزرق — متوسط ​​المدى ، مثل الأزرق الإردواز:

ص {
اللون: # 2f5687 ؛
}

يعمل Hex عن طريق تعيين قيم RGB (أحمر ، أخضر ، أزرق) للون بشكل منفصل بقيم أساسية ستة عشر. لهذا السبب تحتوي على الحروف أ عبر F بالإضافة إلى الأرقام 0 عبر 9.

يتلقى كل لون أحمر وأخضر وأزرق قيمته المكونة من رقمين. 00 هي أدنى قيمة ممكنة ، بينما FF هو أعلى. يتم سرد الألوان بترتيب RGB بترتيب سداسي عشري ، لذا فإن أول رقمين يمثلان القيمة الحمراء وما إلى ذلك.

استخدم قيم ألوان RGBA لتغيير ألوان الخط

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

قيمة RGBA هذه هي نفس اللون الأزرق الإردوازي المحدد أعلاه:

ص {
اللون: rgba (47،86،135،1) ؛
}

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

إذا كنت تريد حماية قيم الألوان الخاصة بك ، فقم بنسخ كود CSS هذا:

ص {
اللون: # 2f5687 ؛
اللون: rgba (47،86،135،1) ؛
}

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

من المهم أن تضع في اعتبارك أن خاصية color (اللون) تعمل على أي عنصر نصي بتنسيق HTML في CSS. يمكنك ، على سبيل المثال ، تغيير كل ألوان الارتباط الخاصة بك. هذا المثال سيجعل روابطك خضراء زاهية:

أ {
اللون: # 16c616 ؛
}

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

h1 ، h2 ، h3 ، h4 ، h5 ، h6 {
اللون: # 020833 ؛
}

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

طرق أخرى لتصميم صفحة HTML

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

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