2.7 KiB
title, localeTitle
| 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:hovera:linkanda:visited -
a:activeيجب أن تأتيa:activeبعدa:hovera: رابط - رابط طبيعي غير مرغوب فيه 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;
}