تنسيق الروابط في لغة CSS
تعد الروابط التشعبية جزءًا أساسيًا من موقع الويب. يسمح للزوار بالتنقل عبر الموقع. لذلك يعد تصميم الروابط بشكل صحيح جانبًا مهمًا لبناء موقع ويب سهل الاستخدام.
ولمعرفة المزيد حول الروابط التشعبية وكيفية إنشائها راجع درس الروابط Links
في لغة HTML و الوسم a في html ،
يكون الرابط التشعبي بأربع حالات مختلفة : link و visited و active و hover. يمكن تنسيق هذه الحالات الأربع للرابط بشكل مختلف من خلال استخدام المحدد من نوع pseudo-class بالشكل التالي :
a:link- يحديد الروابط العادية أو التي لم يسبق للمستخدم زيارتها.a:visited- يحديد الروابط التي زارها المستخدم مسبقا.a:hover- يحديد الرابط عندما يضع المستخدم مؤشر الماوس فوقه.a:active- يحديد الرابط النشط (عند النقر عليه).
يمكنك تحديد أي خاصية CSS تريدها على سبيل المثال اللون والخط والخلفية والحدود وما إلى ذلك لكل من هذه المحددات ، تمامًا كما نفعل مع النص العادي.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تنسيق الحالات المختلفة للروابط باستخدام CSS</title>
<style>
/* unvisited link */
a:link {
color: #ff0000;
text-decoration: none;
border-bottom: 1px solid;
}
/* visited link */
a:visited {
color: #ff00ff;
}
/* mouse over link */
a:hover {
color: #00ff00;
border-bottom: none;
}
/* active link */
a:active {
color: #00ffff;
}
</style>
</head>
<body>
<p><a href="https://www.educationfactorys.com/" target="_top">Visit Education Factory Academy
</a></p>
</body>
</html>
المخرجات
من المهم الترتيب الذي تقوم به بتحديد الانماط للحالات المختلفة للروابط التشعبية ، لأن ما يعرف آخرًا له الاولوية على القواعد المحددة سابقًا.
بشكل عام ، يجب أن يكون ترتيب pseudo-classes على النحو التالي حتى تعمل هذه الحالات بالشكل الصحيح:
:link-
:visited -
:hover -
:active -
:focus
يستخدم المحدد :any-link لتطبيق انماط CSS على جميع حالات الرابط التشعبي
تعديل أنماط الروابط التشعبية الافتراضية css
في جميع متصفحات الويب الشهيرة مثل Chrome و Firefox و Safari وما إلى ذلك ، تحتوي الروابط الموجودة على صفحات الويب على تسطير بشكل خط افقي أسفل الرابط التشعبي وتستخدم ألوان الرابط التشعبي الافتراضية للمتصفح ، إذا لم نقم بتحديد الوان خاصة لهم.
بشكل افتراضي ، ستظهر الروابط التشعبية على النحو التالي في معظم المتصفحات:
- الروابط التي لم يسبق لنا زيارتها Unvisited Link تظهربالون الازرق ومن تحتها خط
- الروابط التي سبق لنا زيارتها Visited Link تظهر باللون الأرجواني ومن تحتها خط
- الرابط النشط Active Link يظهر باللون الأحمر ومن تحته خط .
ومع ذلك ، لا يوجد تغيير في مظهر الرابط التشعبي في حالة تمرير مؤشر الفأرة عليه. يبقى باللون الأزرق أو البنفسجي أو الأحمر اعتمادًا على حالتها قبل التمرير.
الآن دعونا نتعرف على كيفية تغير الخصائص الافتراضية للروابط التشعبية .
تغير اللون الإفتراضي للرابط التشعبي css
ما علينا سوى استخدام الخاصية color من لغة CSS لتحديد اللون الذي نختاره لحالات الروابط التشعبية المختلفة. ولكن عند اختيار الألوان ، تأكد من أنه يمكن للمستخدم التمييز بوضوح بين النص العادي والروابط.
ولفهم كيفة تغير اللون لعنصر الرابط التشعبي دعونا نجرب المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ضبط ألوان الروابط باستخدام CSS</title>
<style>
a:link {
color: #1ebba3;
}
a:visited {
color: #ff00f4;
}
a:hover {
color: #a766ff;
}
a:active {
color: #ff9800;
}
</style>
</head>
<body>
<p><a href="https://www.educationfactorys.com/" target="_top">Visit Education Factory Academy
</a></p>
</body>
</html>
المخرجات
إزالة التسطير الإفتراضي من الرابط التشعبي css
يمكننا ببساطة استخدام الخاصية text-decoration لإزالة التسطير الإفتراضي من الرابط التشعبي .
وكبديل للتسطير الافتراضي يمكننا تطبيق أنماط آخرى على الروابط التشعبية لجعلها تتميز عن النص العادي مثل لون الخلفية وإضافة حدود سفلية وجعل الخط بشكل غامق وما إلى ذلك .
يوضح المثال التالي كيفية إزالة التسطير الافتراضي لعنصر الرابط التشعبي بحالاته المختلفة :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>إزالة التسطير الإفتراضي من الرابط التشعبي</title>
<style>
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href="#">Place mouse pointer over me</a></p>
</body>
</html>
المخرجات
جعل الروابط التشعبية النصية تبدو مثل الأزرار css
يمكننا أيضًا جعل الروابط التشعبية النصية العادية تبدو مثل الزر باستخدام لغة CSS. للقيام بذلك ، نحتاج إلى استخدام بعض خصائص CSS الأخرى مثل backgroud-color و border و display و padding وما إلى ذلك. ستتعرف على هذه الخصائص بالتفصيل في الدروس القادمة.
لنجرب المثال التالي لنرى كيفة عمل ذلك :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>جعل الروابط التشعبية النصية تبدو مثل الأزرار</title>
<style>
a:link, a:visited {
color: white;
background-color: #1ebba3;
display: inline-block;
padding: 10px 20px;
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;
}
a:hover, a:active {
background-color: #9c6ae1;
border-color: #7443b6;
}
</style>
</head>
<body>
<p><a href="#">CSS Link Button</a></p>
</body>
</html>
المخرجات
