تنسيق الروابط في CSS | أساسيات CSS


باستخدام CSS، يمكن تصميم الروابط بطرق مختلفة. في هذا الدرس، سنتعرف على أنواع السمات المستخدمة لتنسيق الرابط.  


تنسيق الروابط

يمكن تنسيق الروابط بأي سمة من سمات لغة CSS (مثل اللون وعائلة الخطوط والخلفية وما إلى ذلك).

a {
color: hotpink;
}


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

المواقف الأربعة التي يتم فيها وضع الروابط هي:


                  a:link - ارتباط في الحالة العادية وغير الملباة
                  a:visited - الرابط الذي قام المستخدم بزيارته
                  a:hover - ارتباط عند وضع مؤشر الماوس عليه
                  a:active - لحظة النقر على الرابط

/* 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;
}

عند تعيين النمط لمواقف مختلفة من الارتباط، من المهم اتباع الترتيب:
a: hover يجب أن يكون بعد a: link وa: visited
a:active يجب أن يكون بعد a: hover
 

زخرفة النص Text-decoration

غالبًا ما تُستخدم  سمة زخرفة النص لإزالة الخطوط الفرعية من الروابط:

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

سمة لون الخلفية Background-color

تُستخدم سمة لون الخلفية لتحديد لون خلفية الارتباط:

a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}

استخدم CSS لإنشاء زر الاتباط

من خلال الجمع بين العديد من سمات لغة CSS، يمكن تصميم ارتباط كزر. يوضح المثال التالي كيفية إنشاء زر ارتباط:

a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}


كلمات مفتاحية: