روابط CSS (الروابط)

الروابط أو الروابط المتشابكة هي وسيلة لربط صفحة واحدة من المصادر على الويب بصفحة أخرى.

أنماط الروابط CSS

لدي الروابط أربعة حالات مختلفة - link، visited، active و hover. يمكن استخدام هذه الأربعة حالات من الروابط أو الروابط المتشابكة باستخدام عناصر العقدة الموصلةالصيغ المزيفةيُمكن تعيين أنماط مختلفة باستخدام خصائص CSS بناءً على حالة هذه الأنماط.

هذا مرتبط بـ HTML <a>يُمكن استخدام الكائنات المزيفة في CSS لتحديد أنواع مختلفة من الروابط، مما يسمح بتعريف أنماط مختلفة.

• a:link - تعيين نمط الرابط العادي أو غير المزورحالياً بدون مؤشر فارغ.

• a:visited- قم بتعيين نمط الرابط الذي تم زيارتة من قبل المستخدم ولكن ليس المؤشر الفارغ فوقه.

• a:hover - عند وضع المؤشر الفارغ فوق الرابط، قم بتعيين نمط الرابط.

• a:active- تعيين النمط للرابط الذي يتم الضغط عليه حاليًا.

يمكنك تحديد الخصائص التي تريد تخصيصها في CSS، مثل:color،font-family،background، وما إلى ذلك، باستخدام هذه الأشياء.اختيارإعادة تعريف نمط الروابط، كما تفعل مع النص العادي.

a:link { /* رابط لم يتم زيارتة بعد */}
　　　　color: #FF0000;
　　　　text-decoration: none;
}
a:visited { /* رابط تم زيارتة مسبقًا */}
　　　　color: #00FF00;
}
a:hover { /* رابط يتم تحريك الفأرة فوقه */}
　　　　color: #FF00FF;
　　　　text-decoration: underline;
}
a:active { /* رابط يتم الضغط عليه حاليًا */}
　　　　color: #0000FF;
}

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

نمط الروابط القياسي

في جميع المتصفحات الشائعة، إذا لم يتم تعيين النمط بشكل خاص، فإن الروابط في الصفحات الويب تأتي مع خط أسفل وتستخدم لون الروابط الافتراضي للمتصفح.

على سبيل المثال، لون الروابط الافتراضي في متصفحات الويب التي تعتمد على Gecko (مثل Firefox) هو - أزرقيُمثل غير الزيارة،لون الباستيليُمثل الزيارة،أحمريُمثل رابط يتم الضغط عليه حاليًا.

تعيين لون الروابط

إليك مثال على كيفية تعيين لون الروابط.

a:link { /* رابط لم يتم زيارتة بعد */}
　　　　color: #FF0000;
}
a:visited { /* رابط تم زيارتة مسبقًا */}
　　　　color: #00FF00;
}
a:hover { /* رابط يتم تحريك الفأرة فوقه */}
　　　　color: #FF00FF;
}
a:active { /* رابط يتم الضغط عليه حاليًا */}
　　　　color: #0000FF;
}

إزالة الخطوط الإضافية المحددة مسبقًا من الروابط

text-decoration تُستخدم صفات CSS عادةً لإزالة الخطوط الإضافية المحددة مسبقًا من الروابط. يوضح المثال التالي كيفية إزالة أو تعيين صفات text-decoration للروابط في مختلف حالاتها.

a:link { /* رابط لم يتم زيارتة بعد */}
　　　　color: #FF0000;
　　　　text-decoration: none;
}
a:visited { /* رابط تم زيارتة مسبقًا */}
　　　　color: #00FF00;
　　　　text-decoration: none;
}
a:hover { /* رابط يتم تحريك الفأرة فوقه */}
　　　　color: #FF00FF;
　　　　text-decoration: underline;
}
a:active { /* رابط يتم الضغط عليه حاليًا */}
　　　　color: #0000FF;
　　　　text-decoration: underline;
}