تصميم الروابط (Links) فى CSS

يعلمك هذا الفصل كيفية تصميم الروابط (Links) فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.

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

عند تصميم الروابط، من المهم فهم كيفية الاستفادة من الـ pseudo-classes لتصميم حالاتهم بشكل فعال.

إفتراضيًا يتم وضع خط تحت الروابط.

حالات الروابط هى الحالات المختلفة التي يمكن أن توجد فيها الروابط. وهم:

1. a:link : يحدد رابط عادي unvisited (لونه أزرق).
2. a:visited: يحدد رابط قام المستخدم بزيارته (لونه أرجوانى).
3. a:hover : يحدد رابط قام المستخدم بالتمرير فوقه بإستخدام مؤشر الماوس (يؤدي التمرير فوق الرابط إلى تغيير مؤشر الماوس إلى رمز يد صغير).
4. a:active: يحدد رابط لحظة النقر عليه (لونه أحمر).
5. a:focus: يحدد رابط يتم التركيز أو عليه (هذا النوع من الروابط يتم وضع خط خارجى حوله).

مثال للتوضيح:

<style>
/* Unvisited link */
.unvisited_link:link {
  color: blue;
}

/* Visited link */
.visited_link:visited {
  color: purple;
}

/* Hover on link */
.hover_link:hover {
  color: red;
  border-bottom: 2px solid;
}

/* Press on link */
.active_link:active {
  color: red;
}

/* focus on link */
.focus_link:focus {
  color: green;
}
</style>
    
<a class="unvisited_link" href="#">Unvisited Link Example</a><br />
<a class="visited_link" href="#">Visited Link Example</a><br />
<a class="hover_link" href="#">Hover Link Example</a><br />
<a class="active_link" href="#">Active Link Example</a><br />
<a class="focus_link" href="#">Focus Link Example</a>

خاصية Text Decoration

تستخدم خاصية text-decoration في الغالب لإزالة التسطير من الروابط، كالتالى:

<style>
a {
    text-decoration: none; /* To remove underline from link */
}

a:hover {
    text-decoration: none; /* To remove underline when hover on link */
}
</style>
    
<a href="#">Link without underline</a>

وضع لون لخلفية الرابط

يمكن استخدام خاصية backgroud-color لتحديد لون لخلفية الرابط، كالتالى:

<style>
a:link {
  background-color: blue;
  color: #fff;
}

a:hover {
  background-color: green;
  color: #fff;
}
</style>
    
<a href="#">Link with background</a>

تصميم الروابط على شكل أزرار

فى المثال التالى قُمت بدمج العديد من خصائص CSS لعرض الروابط كأزرار، كالتالى:

<style>
a.link_1 {
    background-color: green;
    color: white;
    text-align: center;
    display: inline-block;
    padding: 8px 24px;
    text-decoration: none;
    border-radius: 5px;
    font-family: Arial;
}

a.link_1:hover {
    background-color: #079f07;
}

a.link_2 {
    background-color: blue;
    color: white;
    text-align: center;
    display: inline-block;
    padding: 8px 24px;
    text-decoration: none;
    border-radius: 5px;
    font-family: Arial;
}

a.link_2:hover {
    background-color: #0707a8;
}
</style>
    

<a class="link_1" href="#">Link 1</a>
<a class="link_2" href="#">Link 2</a>