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

يمكن تنسيق الارتباطات مع أي خاصية 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; 
 } 
`