الكورس

Advertisements

تصميم الروابط (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>
Unvisited Link Example
Visited Link Example
Hover Link Example
Active Link Example
Focus Link Example

 

خاصية 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>
Link without underline

Advertisements


 

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

 

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

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

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

 

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

 

فى المثال التالى قُمت بدمج العديد من خصائص 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>
Link 1 Link 2


الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements