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

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

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

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

إضافة أنماط لتغيير لون الخط

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

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

يمكن التعبير عن قيم اللون ككلمات أساسية ملونة أو أرقام ألوان RGB أو أرقام ألوان سداسية عشرية.

1. إضافة سمة النمط لعلامة الفقرة:
   1. ص {}
2. ضع خاصية اللون في النمط. ضع نقطتين بعد تلك الخاصية:
   1. ص {color:}
3. ثم قم بإضافة قيمة لونك بعد الخاصية. تأكد من إنهاء هذه القيمة باستخدام فاصلة منقوطة:
   1. ص {color: black؛}

ستصبح الفقرات في صفحتك سوداء الآن.

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

ص {color: # 000000؛ }

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

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

ص {color: # 2f5687؛ }

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

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

p {color: rgba (47،86،135،1)؛ }

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

إذا كنت تريد مقاومة قيم اللون لديك ، فيمكنك إجراء ذلك:

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

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