كيفية تصميم الروابط في CSS

روابط التصميم

وصلات يمكن أن تكون على غرار مع أي ممتلكات CSS، مثل color، font-family، font-size، و padding. هذا مثال سهل:

a { color: hotpink; }

بالإضافة إلى ذلك ، يمكن تصميم الروابط بشكل مختلف اعتمادًا على الحالة التي تكون فيها.

تحتوي الروابط أيضًا على 4 حالات ، ويصمم العديد من المبرمجين كل حالة بشكل مختلف. الدول الأربع هي:

  • a:link: رابط لم تتم زيارته ، ولم يتم النقر عليه
  • a:visited: ارتباط تمت زيارته والنقر عليه
  • a:hover: ارتباط عندما يكون الماوس فوقه
  • a:active: ارتباط عند النقر فوقه

و الخاصية هي المسؤولة عن خلق عناوين ويمكن تعديلها باستخدام عدد من خصائص CSS التصميم، على الرغم من أنه لديه قليلة افتراضيا:

  1. تسطير
  2. اللون الأزرق

يمكنك تغيير هذه عن طريق إضافة وتغيير colorو text-decorationالممتلكات.

 color: black; text-decoration: none;

يمكنك أيضًا نمط الارتباط بناءً على التفاعل باستخدام هذه الخصائص ، والمعروفة أيضًا باسم حالات الارتباط:

  • a: link - رابط عادي غير مرغوب فيه
  • a: زار - رابط قام المستخدم بزيارته
  • a: hover - رابط عندما يقوم المستخدم بالماوس فوقه
  • أ: نشط - ارتباط لحظة النقر فوقه

إليك بعض نماذج CSS باستخدام الحالات الأربع:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

لاحظ أن هناك بعض قواعد الترتيب عندما تقوم بتعيين النمط لحالات الارتباط.

  • a:hoverيجب أن يأتي بعد a:linkوa:visited

a:active يجب أن يأتي بعد 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; } 

المزيد عن التصميم في CSS:

  • كيفية تصميم علامة HTML مباشرة في CSS
  • كيفية تصميم القوائم باستخدام CSS
  • كيفية تصميم الأزرار باستخدام CSS