freeCodeCamp/guide/arabic/css/styling-links/index.md

title	localeTitle
Styling Links	روابط التصميم

روابط التصميم

يمكن تنسيق الارتباطات مع أي خاصية CSS ، مثل color ، font-family ، و font-size ، و padding . هنا مثال سهل:

a { color: hotpink; }

بالإضافة إلى ذلك ، يمكن تنسيق الوصلات بشكل مختلف اعتمادًا على الحالة التي توجد فيها.

الروابط لها أيضا 4 حالات ، والعديد من المبرمجين أسلوب كل دولة بشكل مختلف. الدول الأربع هي:

• a:link غير مرغوب وغير مرغوب فيه
• a:visited : رابط تمت زيارته ونقرت عليه
• a:hover : رابط عندما يكون الماوس الخاص بالمستخدم فوقها
• a:active : رابط عند النقر فوقه

إن الموقع <a href=""> مسؤول عن إنشاء عناوين URL ويمكن تعديله باستخدام عدد من خصائص تصميم CSS ، على الرغم من أنه يحتوي على عدد قليل من الإعدادات الافتراضية بشكل افتراضي:

1. أكد
2. اللون الأزرق

يمكنك تغيير ذلك عن طريق إضافة خصائص color text-decoration .

color: black; text-decoration: none;

يمكنك أيضًا تصميم الرابط استنادًا إلى التفاعل باستخدام هذه الخصائص ، ويُعرف أيضًا باسم حالات الارتباط:

• a: رابط - رابط طبيعي غير مرغوب فيه
• a: زار - رابط زاره المستخدم
• a: hover - رابط عندما يضغط المستخدم عليه
• ج: نشط - رابط لحظة النقر فوقه

إليك بعض نماذج CSS باستخدام الحالات الأربع:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

لاحظ أن هناك بعض قواعد الترتيب عندما تقوم بتعيين نمط حالات الارتباط.

• a:hover يجب أن يكون a:hover a:link and a:visited

• a:active يجب أن تأتي a:active بعد a:hover

  a: رابط - رابط طبيعي غير مرغوب فيه a: زار - رابط زاره المستخدم a: hover - رابط عندما يضغط المستخدم عليه ج: نشط - رابط لحظة النقر فوقه

`/* unvisited link */ a:link { color: red; }

/* visited link */ a:visited { color: green; }

/* mouse over link */ a:hover { color: hotpink; }

/* selected link */ a:active { color: blue; } `