تنسيق الروابط لغة CSS
تنسيق الروابط التشعبية بإستخدام CSS, سنقوم بإستخدام ما تعلمناه في الدرس السابق على الروابط, وكما نعرف جميعنا أن الروابط تشكل خيوط العنكبوت على الانترنت, لا شك أن يكون لها لون جميل يقوم بجذب الزائر على الموقع من خلال تنسيق الروابط بالإضافة لمؤثرات جميلة عليه.
الفئة المزيفة paseudo-classes
إن paseudo-classes تسمح لك بأن تأخذ في عين الإعتبار مختلف الحالات و الأحداث عندما تقوم بتحديد خصائص لعنصر ما في html وكما نعرف أن الوسم الخاص بإدراج الروابط هو a
a {
color: Blue;
}
و نضع في ملف جسم الصفحة وسم روابط التشعبية a و يكون الإرسال لرابط موقعنا
<a href="https://www.nusurtech.ca/"> nusur tech</a>
في ملف index.html سنقوم بإنشاء رابط ليظهر التنسيق عليه وكما قمنا هنا بإنشاء رابط للذهاب إلى الموقع الخاص بنا بإسم الموقع ايضاً, وفي ملف style.css نقوم ببناء أول تنسيق لنا و اعطاء الرابط اللون الأزرق.
تغير اللون الإفتراضي للروابط في CSS
الروابط لها العديد من الحالات و يمكن التحكم بها على سبيل المثال يمكن اعطاء لون معين إذا كان الزائر زائر للموقع و لون آخر إن لم يزور الزائر هذا الرابط.
إن في جميع متصفحات الويب الأكثر شهرة مثل Chrome و Firefox و Safari و غيرهم تحتوي الروابط الموجودة في الصفحات على تسطير بشكل خط افقي أسفل الرابط و تستخدم ألوان الرابط التشعبي الإفتراضية للمتصفح إذا لم نقوم بتحديد ألوان خاصة.
و الحالات المستخدمة في الروابط هي:
- a:link : تقود المستخدم الي صفحات لم يزورها.
- a:visited : تقود المستخدم الي صفحات زارها سابقاً.
- a:active : تستتخدم للروابط النشطة.
- a:hover : تحديد الرابط عندما يضع المستخدم مؤشر الماوس عليه.
مثال
سنقوم بإنشاء لون لرابط إذا زاره المستخدم من قبل و سيكون اللون هو الأزرق, و سنقوم بإنشاء لون آخر إن لم يزور المستخدم الرابط سابقاً, وسيكون اللون الأحمر.
a:link {
color:blue;
}
a:visited {
color:red;
}
قمنا بإستخدام الحالة a:link من أجل تمييز الرابط بأن المستخدم لم يزر هذا الرابط مسبقاً و سيكون باللون الأزرق, ثم إستخدمنا a:visited سوف تقود المستخدم روابط قد زارها و سيكون لونها أحمر.
و النشط يكون بالشكل
a:active {
background-color: yellow;
}
إستخدمنا a:active من أجل تمييز أن هذا الرابط نشط و أعطيناه خلفية لونها أصفر.
الفئة hover في CSS
تستخدم hover عندما يكون مؤشر الماوس فوق الرابط, و كما يمكن إستخدام تلك الفئة في إنشاء مؤثرات جميلة على سبيل المثال إضافة لون عند وقوف مؤشر الماوس فوق الرابط و كما يمكن ايضاً إضافة تنسيق مائل عند وقوف المؤشر على الرابط, مثال على ذلك اضافة اللون الاحمر
a:hover{
color: red;
font-style: italic;
}
إستخدمنا في هذا المثال على a:hover لأجل تزيين الرابط عندما يكون مؤشر الماوس على الرابط و قمنا بإعطاءه لون أحمر و يكون نوع الخط مائل, أي عند وقف الماوس على الرابط في المتصفح سيتحول الرابط إلى اللون الأحمر و شكله مائل.
كما تحدثنا في الدروس السابقة عن خاصية letter-spacing و هذه الخاصية يمكنك إستخدامها في الروابط لإنشاء مؤثرات خاصة, و ليس هي فقط يمكن إضافة بعض الخطوط و الألوان.
a:hover{
color:red;
font-weight: bold;
letter-spacing: 15px;
}
في المثال السابق سيظهر الناتج في المتصفح عند تأشير الماوس على الرابط باللون الأحمر و ايضاً سيكون الخط عريض bold و بين كل حرف من الحروف مسافة 15px.
جعل الروابط النصية تبدو مثل الأزرار في CSS
يمكن جعل الروابط النصية العادية تبدو كأنها زر بإستخدام لغة CSS و للقيام بهذا الأمر نحتاج إلى إستخدام بعض خصائص CSS مثل backgroud-color و border و display و padding و غيرهم.
مثال
<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>
في البداية وضعنا أن الروابط تظهر للمستخدم أنها روابط لم يزورها من قبل بواسطة a:link و روابط زارها مسبقاً بواسطة a:visited و كان اللون هو الأبيض ووضعنا خلفية مناسبة له و التباعد مع العنصر و حدوده هي 10px 20px و بوردر أي سماكة الحدود, و بواسطة a:hover لأجل تحديد الرابط عندما يضع المستخدم مؤشر الماوس عليه و a:active لتعطي نتيجة بأن الرابط نشط ووضعنا له خلفية و بورد.
إزالة التسطير الإفتراضي من الروابط
بكل بساطة نقوم يإستخدام الخاصية text-decoration لإزالة التسطير الإفتراضي من الرابط و كبديل للتسطير الافتراضي يمكن تطبيق أنماط أخرى على الروابط التشعبية لأجل جعلها تتميز عن النص العادي مثل لون الخلفية أو إضافة حدود سفلية و جعل الخط بشكل عريض Bold و غيرها.
مثال
<style>
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
</style>
في هذا المثال قمنا بإزالة السطر الذي يظهر أسفل الكلمة المرتبطة في الرابط بواسطة text-decoration.