دورة برمجة مواقع الانترنت - لغة css - الدرس 9 - تنسيق الروابط Styling Links

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

السلام عليكم ورحمة الله وبركاته
نقدم لكم في درسنا التاسع من سلسلة دروس دورة css طرق تنسيق الروابط
من يرغب بمراجعة درس الروبط في لغة html يجده على الرابط :
http://www.tahasoft.com/vb/showthread.php?11840

يشمل تنسيق الروابط على لون الخط ونوعه وخلفية الروابط .... الخ
وأي رابط في صفحات الانترنت له أربعة حالات

ملاحظة

: يجب مراعات ترتيب الحالات كما تم ذكرها ولتنسيق إحدى الحالات يتم وضع الوسم a المسؤول عن الرابط كما نعلم مسبقاً و من ثم يتم وضع نقطتين : ثم الحالة . ولعل الأمثلة توضح المقصود

الحالة الطبيعية كما تعلمنا في html لكتابة الرابط هي كما يلي:

tahasoft

والكود السابق يعطينا :
tahasoft
أي كلمة tahasoft وعند الضغط عليها يتم الانتقال إلى الرابط http://www.tahasoft.com
الآن سنضع بعض التنسيقات على الرابط السابق:

tahasoft



 

جرب الكود السابق على صفحة محرر الأكواد
فتجد النتيجة مشابهة للتالي :
tahasoft
( يفضل تجربة أكواد هذا الدرس بإنشاء صفحة html على جهازك وفتحها بأي متصفح انترنت)
نلاحظ في النتيجة كلمة tahasoft وهي كرابط باللون الأخضر وذلك كما حددنا في قسم a:link
وعند مرور الماوس فوق الكلمة ستظهر باللون الأحمر كما حددنا في a:hover
وعند الضغط بالماوس ستظهر بلون برتقالي كما حددنا في a:active
(يمكنك الضغط بشكل مستمر على الكلمة لتتمكن من رؤية اللون البرتقالي بوضوح)
وبعد الضغط على الرابط أول مرة سيظهر لونه في المرات القادمة بلون أزرق بدلاً من اللون الأخضر كما حددنا في a:visited

أظن أن الشرح إلى الآن واضح وبسيط وأدركتم مدى أهميته فهذه الطريقة في التنسيق كثيرة الاستخدام

الدمج بين حالتين أو أكثر في تنسيق الروابط
مثال:

tahasoft



 

في هذا المثال سوف يظهر الرابط بلون أخضر في الحالة الطبيعية وفي حالة الرابط تمت زيارته مسبقاً وفي حالة الضغط فوقه
وكما تلاحظن أننا وضعنا الحالات وفصلنا بينها بفاصلة , ثم وضعنا لون النص green
جرب على صفحة محرر الأكواد أو على صفحة قم بإنشائها لترى النتيجة


تنسيقات أخرى غير اللون على الروابط:
لا يقتصر تنسيق النص على اللون فقط إنما يمكننا عمل تنسيقات أخرى كما سنرى في المثال التالي:

لاحظ المثال المهم التالي:

tahasoft-1


tahasoft-2






 

النتيجة:

طبعاً النتائج لن تكون واضحة كفاية في الصور في هذا لشرح لأن الروابط تتغير بمرور الماوس عليها
لذلك عليك التجربة بنفسك لترى النتيجة النظامية.
- استخدمنا هنا لكل رابط صف class خاص به لتمييز تنسيق الرابط الأول عن الثاني
ففي الرابط الأول سنجد النص بلون أسود وخلفية بلون أصفر وعند مرور الماوس ستصبح الخلفية حمراء والنص أبيض
وفي الرابط الثاني سنجد الرابط بلون أحمر وليس تحته خط وعند مرور الماوس فوقه سيصبح لونه أزرق وتحته خط
ملاحظات:
*- وضعنا اسم الصف بعد الوسم a ثم وضعنا الحالة كما يلي:
a.one:link
a : الوسم
one : الصف class
link : الحالة
ثم وضعنا التنسيقات بين قوسين كالمعتاد

*- الخاصة text-decoration كثيرة الاستخدام مع تنسيق الروابط
والصفة none لجعل النص غير منسق والصفة underline لجعل النص تحته خط
وهذه الطريقة في التنسيق تستخدم كثيراً

*- من التنسيقات الأخرى على سبيل المثال : تغيير نوع الخط عند مرور الماوس فوقه أو تغيير حجم الخط ولكن لا أنصح باستخدام هذه الطرق لأنه تعطي تشوهاً في ستايل الموقع




سنرى الآن طريقة من المهم معرفتها وهي طريقة جعل الرابط على شكل صندوق مستطيل
المثال:

طه سوفت

عند تطبيق الكود السابق سنجد كلمة طه سوفت داخل مستطيل أخضر

وعند مرور الماوس فوقها سيتغير اللون إلى لون أخضر أغمق قليلاً 7A991A

شرح الكود:
في الحالة الطبيعية للرابط يتم تطبيق التنسيقات التالية فوقه:

display:block;  زبدة العمل وأساسه لجعل الرابط على شكل صندوق

font-weight:bold; خط غامق

color:#FFFFFF; لون النص

background-color:#98bf21; لون الخلفية

width:120px; عرض الصندوق

padding:4px; مسافة انزياح النص عن أطراف الصندوق

text-align:center; لتوسيط النص داخل الصندوق

text-decoration:none; لكي لا يظهر خط تحت النص

وعند مرور الماوس فوق الرابط

background-color:#7A991A; لتغيير خلفية الصندوق

مع العلم أنه يمكن في الخلفية وضع صورة بدلاً من اللون كما تعلمنا في درس تنسيق الخلفية



وبهذا القدر كفاية
ونتمنى لكم المتعة والفائدة
ونؤكد على أهمية التطبيق العملي بنفسك عدة مرات مع إجراء تغييرات في الأكواد حتى تثبت الفكرة
وتحفظ الكود
في الدرس القادم سنتعلم طرق تنسيق القوائم وسنستفيد أيضاً منه لمزيد من طرق عمل الروابط
نلتقي قريباً مع درس آخر والسلام عليكم