تنسيق الروابط في لغة CSS الدرس |6| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

السبت، 21 ديسمبر 2019

تنسيق الروابط في لغة CSS الدرس |6|


تنسيق الروابط لغة CSS

سنقوم بإستخدام ما تعلمناه في الدرس السابق على الروابط, وكما نعرف جميعنا أن الروابط تشكل خيوط العنكبوت على الانترنت, لا شك أن يكون لها لون جميل يقوم بجذب الزائر على الموقع من خلال تنسيق الروابط بالإضافة لمؤثرات جميلة عليه.

الفئة المزيفة paseudo-class

تسمح لك بأن تأخذ في عين الإعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر ما في html وكما نعرف أن الوسم الخاص بإدراج الروابط هو a


يجب اضافة رابط لمشاهدة التأثيرات, وسيكون في ملف index.html بهذا الشكل


شرح المثال السابق

في ملف index.html سنقوم بإنشاء رابط ليظهر التنسيق عليه وكما قمنا هنا بإنشاء رابط للذهاب إلى الموقع الخاص بنا بإسم الموقع ايضاً, وفي ملف style.css نقوم ببناء أول تنسيق لنا و اعطاء الرابط اللون الأزرق كما في الأعلى وسيظهر في المتصفح بالشكل


الروابط لها العديد من الحالات ويمكن التحكم بها على سبيل المثال يمكن اعطاء لون معين اذا كان الزائر زائر للموقع ولون آخر إن لم يزور الزائر هذا الرابط و الحالات المستخدمة في الروابط هي:

link : تقود المستخدم الي صفحات لم يزورها.
visited : تقود المستخدم الي صفحات زارها سابقاً.
active : تستتخدم للروابط النشطة.

مثال
سنقوم بإنشاء لون لرابط إذا زاره المستخدم من قبل وسيكون اللون هو الأزرق, وسنقوم بإنشاء لون آخر إن لم يزور المستخدم الرابط سابقاً, وسيكون اللون الأحمر


وسيظهر بهذا الشكل في المتصفح

و النشط يكون


وسيكون في المتصفح بالشكل 



الفئة المزيفة hover

تستخدم عندما يكون مؤشر الماوس فوق الرابط, وكما يمكن استخدام تلك الفئة في إنشاء مؤثرات جميلة على سبيل المثال إضافة لون عند وقوف مؤشر الماوس فوق الرابط وكما يمكن ايضاً اضافة تنسيق مائل عند وقوف المؤشر على الرابط, مثال على ذلك اضافة اللون الاحمر



عند وقف الماوس على الرابط في المتصفح سيتحول الرابط الى اللون الأحمر و مائل.

كما تحدثنا في الدروس السابقة عن خاصية letter-spacing وهذه الخاصية يمكنك استخدامها في الروابط لإنشاء مؤثرات خاصة, وليس هي فقط يمكن اضافة بعض الخطوط و الألوان.



في المثال السابق سيظهر الناتج في المتصفح عند تأشير الماوس على الرابط باللون الأحمر و ايضا سيكون الخط عريض bold وبين كل حرف من الحروف مسافة 15px.

لمتابعة الدورة بشكل عملي على القناة الخاصة في اليوتيوب

https://www.youtube.com/watch?v=r7Ol4lNRa3U&list=PLH80gdCdZJpzibQ3Onhqir5cyvrvEF_tR

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام