الرابط هو اتصال من صفحة ويب إلى أخرى، ويمكن لـ CSS تصميم الروابط بطرق مختلفة من خلال سمات مختلفة.
1. نمط الارتباط
تعد الروابط جزءًا مهمًا من موقع الويب. يمكنك رؤية العديد من الروابط في كل صفحة ويب تقريبًا. يمكن أن يضيف التصميم المعقول لأنماط الارتباط نقاطًا إلى مظهر صفحة الويب. تحتوي الروابط على أربع حالات مختلفة، وهي الارتباط والزيارة والنشط والتحويم. يمكنك تعيين أنماط مختلفة لحالات الارتباط الأربعة من خلال محددات الفئة الزائفة التالية:
(1) أ: الرابط => هذا رابط عادي لم تتم زيارته.
(2) أ: تمت الزيارة => هذا رابط زاره المستخدم مرة واحدة على الأقل
(3) a:hover => عندما يمرر الماوس فوقه، فهو رابط
(4) أ: نشط => هذا هو الرابط الذي تم النقر عليه للتو.
القواعد:
أ: الرابط {اللون: color_name؛}يمكن أن يكون color_name بأي تنسيق، مثل اسم اللون (أخضر)، أو القيمة السداسية العشرية (#5570f0)، أو قيمة RGB - rgb(25, 255, 2). هناك حالة أخرى "a:focus" تُستخدم للتركيز عندما يستخدم المستخدم مفتاح tab لتصفح الرابط.
القيمة الافتراضية للارتباط:
(1) افتراضيًا، يتم وضع خط تحت الروابط التي تم إنشاؤها.
(2) عندما يمرر الماوس فوق الرابط، سيتغير إلى رمز اليد.
(3) الروابط العادية/التي لم تتم زيارتها باللون الأزرق.
(4) الروابط التي تمت زيارتها تكون باللون الأرجواني.
(5 ) الروابط النشطة باللون الأحمر.
(6) عندما يتم التركيز على الرابط، يكون له مخطط تفصيلي حوله.
على سبيل المثال:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>روابط CSS</title><style>p{font-size:25px;text-align:center;}</style></head ><body><p><ahref=https://www.dotcpp.com/>رابط بسيط</a></p></body></html>النتائج المعروضة هي كما يلي:
2. كيفية ضبط نمط الارتباط باستخدام CSS؟
فيما يلي بعض خصائص CSS الأساسية للروابط:
(1) خاصية اللون
يتم استخدام خاصية CSS هذه لتغيير لون نص الارتباط.
القواعد:
أ{اللون:color_name;}(2) سمة عائلة الخط
تُستخدم هذه الخاصية لتغيير نوع خط الارتباط باستخدام خاصية عائلة الخطوط.
القواعد:
أ{عائلة الخط:اسم العائلة؛}(3) سمة زخرفة النص
تُستخدم هذه السمة بشكل أساسي لإزالة أو إضافة تسطير وتعديلات أخرى على الروابط.
القواعد:
أ{زخرفة النص: لا شيء؛}مثال:
<style>/*ضبط حجم الخط لتحسين الرؤية*/p{font-size:2rem;}/*إزالة التسطير باستخدام سمة زخرفة النص*/a{text-decoration:none;}/*يمكنك أيضًا استخدام الأنماط التالية، أضف تسطير text-decoration:underline;*/</style>(4) سمة لون الخلفية
يتم استخدام هذه الخاصية لتعيين لون خلفية الارتباط.
القواعد:
أ{لون الخلفية:color_name;}