77 lines
2.7 KiB
Markdown
77 lines
2.7 KiB
Markdown
|
---
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
`
|