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;
|
||
}
|
||
` |