غالبا ما تحتوي صفحات الويب على روابط تسمح للمستخدمين بالانتقال إلى صفحات أخرى أو فتح ملفات. ومع ذلك ، قد يكون عرض الرابط القياسي مملا إلى حد ما ولا يجذب انتباه المستخدمين. لحسن الحظ ، باستخدام هتمل و كس ، يمكنك بسهولة تغيير لون الخط من الرابط وجعله أكثر تعبيرا.
لتغيير لون خط الارتباط ، يمكنك استخدام خاصية لون كس. على سبيل المثال ، لجعل الارتباط أحمر ، يمكنك تعيين قيمة خاصية اللون إلى "أحمر". ومع ذلك ، لا تنس تعيين خاصية اللون للفئة الزائفة :تمت زيارتها بحيث يتغير لون الرابط بعد زيارته.
مثال:
أ { اللون: أحمر؛} أ: تمت زيارته { اللون: أزرق؛}
إذا كنت ترغب في جعل الرابط أكثر تعبيرا ، فبالإضافة إلى تغيير لون الخط ، يمكنك استخدام أنماط نصية مختلفة. على سبيل المثال ، يمكنك تمييز ارتباط بخط غامق باستخدام خاصية وزن الخط أو علامة كس. يمكنك أيضا تسليط الضوء على الارتباط بخط مائل باستخدام علامة أو خاصية نمط الخط المغلق.
بشكل عام ، يعد تغيير لون الخط وإضافة أنماط نصية طرقا بسيطة وفعالة لجعل الرابط أكثر وضوحا وجاذبية للمستخدمين. أن تكون خلاقة والتجربة مع مختلف الألوان والأساليب لإنشاء تصميم فريد ومعبرة للروابط الخاصة بك.
- تغيير لون الارتباط في أتش تي أم أل
- باستخدام سمة النمط
- استخدام الأنماط الخارجية
- اختيار لون نص الرابط
- باستخدام ألوان محددة مسبقا
- باستخدام القيم الرقمية رغب
- تطبيق تأثيرات إضافية على رابط
- تغيير اللون عند التمرير
- تغيير اللون عند تفعيلها
تغيير لون الارتباط في أتش تي أم أل
يسمح لك بتحديد الأنماط مباشرة داخل العلامة.
يمكنك استخدام بناء الجملة التالي لتحديد لون الارتباط:
الرابط
سيؤدي هذا الرمز إلى تغيير لون نص الرابط إلى اللون الأخضر.
لتغيير لون الارتباط. على سبيل المثال ، لتغيير اللون إلى اللون الأزرق ، يمكنك استخدام التعليمات البرمجية التالية:
الرابط
يطبق النمط على هذا الرابط المحدد ، متجاوزا أي أنماط محددة عالميا.
للون الأحمر.
إما مباشرة داخل العلامة ، أو باستخدام كس.
باستخدام سمة النمط
لتغيير لون خط الارتباط وجعله أكثر تعبيرا ، يمكنك استخدام سمة النمط في هتمل. يمكنك استخدام هذه السمة لتعيين أنماط مختلفة للعناصر على صفحة ويب ، بما في ذلك لون النص.
لتغيير لون خط الارتباط ، يجب إضافة سمة النمط إلى علامة الارتباط المقابلة. على سبيل المثال ، لتغيير لون الارتباط إلى اللون الأزرق ، يمكنك استخدام التعليمات البرمجية التالية:
| الوسم | مثال | الوصف |
|---|---|---|
| الرابط | يضبط اللون الأزرق للرابط |
داخل سمة النمط ، يجب تحديد خاصية اللون والقيمة التي تحدد لون النص. في هذه الحالة ، تحدد القيمة الزرقاء اللون الأزرق.
بالإضافة إلى ذلك ، يمكنك استخدام قيم أخرى لخاصية اللون ، مثل الأحمر (الأحمر) والأخضر (الأخضر) والأصفر (الأصفر) ، إلخ. يمكنك أيضا استخدام القيم السداسية العشرية ، على سبيل المثال #فف0000 للأحمر و #00 ف00 للأخضر.
يتيح لك استخدام سمة النمط إنشاء أنماط فريدة للروابط الخاصة بك وجعلها أكثر تعبيرا.
استخدام الأنماط الخارجية
يمكنك استخدام الأنماط الخارجية لتغيير لون خط الرابط وجعله أكثر تعبيرا.
مع قيمة المسار إلى ملف كس.
على سبيل المثال:
خاصية اللون
وتعيين اللون المطلوب.
على سبيل المثال:
الخط الوزن
) ، تسطير (
زخرفة النص
) ، مائل (
نمط الخط
) ، إلخ. لجعل الرابط أكثر تعبيرا.
على سبيل المثال:
وزن الخط: غامق;
زخرفة النص: تسطير;
- وبالتالي ، سيتم عرض الرابط بلون الخط الأحمر والخط الغامق والتسطير.
- يلعب لون نص الرابط دورا رئيسيا في إنشاء تصميم صفحة ويب معبرة. فهو لا يجذب انتباه المستخدمين فحسب ، بل يساعدهم أيضا على تمييز الروابط النشطة عن عناصر النص العادية.
- التي يمكن تطبيقها على العنصر
.
هناك عدة طرق لتعيين لون نص الارتباط في هتمل:
باستخدام اسم اللون ، على سبيل المثال:
رابط. في هذه الحالة ، سيكون نص الرابط أحمر.
باستخدام قيم اللون رغب ، على سبيل المثال:
الرابط
. سيقوم هذا الرمز بتعيين اللون الأخضر لنص الارتباط.
- رابط. في هذه الحالة ، سيكون نص الرابط باللون الأزرق.
- الرابط 2
- في هذه الحالة ، سيكون للرابط الأول لون النص أرجواني ، والثاني سيكون باللون البرتقالي.
- باستخدام ألوان محددة مسبقا
- فيما يلي بعض الأمثلة:
- : أسود
- : أبيض
أورانج
- الأصفر
- الأخضر
: أخضر
الأزرق
: أزرق
رابط أزرق
: ينشئ رابطا أزرق
يتيح لك استخدام الألوان المحددة مسبقا تغيير لون خط الرابط بسرعة وسهولة ، مما يجعله أكثر تعبيرا وجاذبية للزوار. |
باستخدام القيم الرقمية رغب
إذا كنت ترغب في تغيير لون الخط من الرابط وإضافة التعبير إليها ، يمكنك استخدام القيم الرقمية رغب (الأحمر والأخضر والأزرق). يتيح لك ذلك التحكم في كل مكون من مكونات اللون وإنشاء مجموعات ألوان فريدة.
نمط
واستخدام
خاصية اللون
، متبوعا بنقطتين وقيم رغب رقمية
في شكل رغب (الأحمر والأخضر والأزرق)
| . | على سبيل المثال ، لتغيير لون خط الارتباط إلى اللون الأحمر الفاتح ، يمكنك استخدام الكود التالي: | الرابط |
|---|---|---|
| في هذا المثال ، القيم الرقمية رغب هي 255 للأحمر ، 0 للأخضر و 0 للأزرق ، والذي يسمح لك للحصول على الأحمر. يمكنك تغيير القيم الرقمية كما يحلو لك وتجربة ألوان مختلفة لإنشاء تأثير مثير للاهتمام. | لاحظ أن القيم الرقمية رغب يجب أن تكون في النطاق من 0 إلى 255. تتوافق القيمة 0 مع غياب اللون ، وتتوافق القيمة 255 مع أقصى لون مشبع ممكن. | بالإضافة إلى ذلك ، يمكنك استخدام |
| وظيفة رغبا (الأحمر والأخضر والأزرق والشفافية) | لتعيين المكون الثالث-الشفافية. يتم تعريف الشفافية بقيمة من 0 (شفافة تماما) إلى 1 (غير شفافة تماما). | وهكذا ، يمكنك تعزيز التعبير عن الارتباط باستخدام القيم الرقمية رغب وخلق تركيبات الألوان الفريدة التي تؤكد على أهمية الارتباط وجذب انتباه القراء. |
| تطبيق تأثيرات إضافية على رابط | يمكن أن يؤثر تغيير لون خط الرابط بشكل كبير على تعبيره وجاذبيته. | ومع ذلك ، بالإضافة إلى تغيير اللون ، هناك تأثيرات إضافية أخرى يمكن تطبيقها على الرابط. |
| تأثير | الوصف | مثال |
| تسطير | يضيف سطرا أسفل نص الرابط لتمييزه | الرابط |
يتوسطه خط
يضيف سطرا أعلى نص الرابط لتمييزه
الرابط
الرابط
| الخط المائل | يميل نص الرابط لإعطائها لهجة |
|---|---|
الرابط | تحته خط فوق النص |
يضيف تسطير سفلي أعلى نص الارتباط لتمييزه
سيساعد تطبيق هذه التأثيرات الإضافية على الروابط في إنشاء تصميم مثير للاهتمام وتحسين تجربة المستخدم الخاصة بهم.
تغيير اللون عند التمرير
مثال الاستخدام:
في هذا المثال ، ستغير جميع الروابط الموجودة على الصفحة لون النص إلى اللون الأحمر عندما يحوم مؤشر الماوس فوقها.
بعد القولون. على سبيل المثال,
اللون: # فف0000;
فإنه سيتم تعيين اللون الأحمر. يمكنك أيضا استخدام أسماء الألوان مثل
أحمر
أو