2.7 KiB
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 ، على الرغم من أنه يحتوي على عدد قليل من الإعدادات الافتراضية بشكل افتراضي:
- أكد
- اللون الأزرق
يمكنك تغيير ذلك عن طريق إضافة خصائص 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
anda: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; } `