الدرس :6الروابط في CSS

يمكنك أن تطبق ما تعلمته فعلاً في الدروس السابقة على الروبط )مثال: تغيير الألوان، الخطوط، وضع خط أسفل الروابط، إلخ( الجديد هنا أن CSSتسمح لك بتحديد خصائص مختلفة بحسب حالة الرابط إن لم يزر المستخدم الرابط أو زاره أو كان نشطاً أو كان مؤشر الفأرة فوق الرابط، كل هذا يمكنك من إضافة مؤثرات جميلة ومفيدة على الروابط، للتحكم بهذه التأثيرات يجب أن تستخدم ما يسمى .pseudo­classes

ما هي الفئة المزيفة؟

الفئة المزيفة أو pseudo­classيسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر في .HTML لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTMLمن خلال الوسم > ;a {color: blue }

بط الرابط له عدة حالات، فمثلاً يمكن أن يزوره المستخدم أو لا يفعل، لذلك يمكنك أن تستخدم فئة مزيفة لكي تحدد شكلاً مختلفاً للرابط الذي زاره المستخدم عن الرا الذي لم يزره بعد.

 ;a:link {color: blue
} 
      ;a:visited {color: red
}

استخدم a:linkو a:visitedللروابط التي زارها أو لم يزرهاالمستخدم، الروابط يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي a:activeأما a:hoverفهي الحالة التي يكون فيها مؤشر الفأرة فوق الرابط. سنقوم الآن بعرض الحالات الأربع للروابط مع المزيد من الشرح والأمثلة. الفئة المزيفة: link

الفئة المزيفة : link

تستخدم للروابط التي تقود المستخدم إلى صفحات لم يزرها. في المثال أدناه الروابط التي لم يزرها المستخدم ستظهر بلون أزرق فاتح.

 ;a:link {color: #6699CC
}

الفئة المزيفة: visited

الفئة المزيفة : visitedتستخدم للروابط التي زارها المستخدم، المثال أدناه سيجعل كل الروابط التي زارها المستخدم بلون بنفسجي غامق:

 ;a:visited {color: #660099
}

الفئة المزيفة: active

الفئة المزيفة : activeتستخدم للروابط النشطة. في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء:

 ;a:active {background­color: #FFFF00
}

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

الفئة المزيفة : hoverتستخدم عندما يكون مؤشر الفأرة فوق الرابط. يمكن استخدام هذه الفئة لإنشاء مؤثرات جميلة، فمثلاً إذا أردنا أن تكون الروابط ملونة بالبرتقالي ومائلة عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSSبهذا الشكل:

 ;a:hover {color: orange
      ;font­style: italic
}

المثال :1المؤثرات تظهر عندما يوضع مؤشر الفأرة على الرابط

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

مثال 1أ: وضع مسافات بين الحروف

كما تتذكر في الدرس 5تعلمنا أن المسافة بين الحروف يمكن أن تعديلها باستخدام الخاصية ،letter­spacingهذا يمكن تطبيقه على الروابط لإنشاء مؤثرات خاصة:

 ;a:hover {letter­spacing: 10px
      ;font­weight:bold
      ;color:red
}

مثال 1ب: الحروف الكبيرة والصغيرة

في الدرس 5 ألقينا نظرة على الخاصية text­transformوالتي يمكنها تغيير حالة الأحرف بين الصغيرة والكبيرة، هذا يمكن استخدامه أيضاً كمؤثر على الروابط:

 ;a:hover {text­transform: uppercase
      ;font­weight:bold
      ;color:blue
      ;background­color:yellow
}

في المثالين يمكن أن تأخذ فكرة عن الإمكانيات اللامتناهية لدمج بين العديد من الخصائص، يمكنك أن تقوم بإنشاء مؤثرات من ابتكارك، جرب! مثال :2إزالة السطر من أسفل الرابط أحد أكثر الأسئلة تكراراً هو كيف أزيل الخط من أسفل الرابط؟ يجب أن تفكر جيداً قبل أن تزيل الخط من أسفل الرابط، لأنه قد يجعل استخدام موقعك أكثر صعوبة، الناس اعتادوا على أن يرو الخطوط بلون أزرق وبخط أسفلها من يميزها عن بقية النصوص الأخرى، ويعلمون أنهم يستطيعون الضغط عليها حتى والدتي تعلم ذلك! إذا أزلت الخط من أسفل الروابط وغيرت ألوانها فأنت تزيد فرصة عدم فهم الزائر لموقعك وتشتته وبهذا لن يستفيدوا من محتويات موقعك. خط على أي حال، إزالة الخط من أسفل الروابط سهل جداً، كما تتذكر في الدرس 5 الخاصية text­decorationيمكنها أن تستخدم لتحديد ما إذا كان هناك سيظهر أسفل النص أم لا، لإزالة الخط السفلي قم بوضع القيمة noneللخاصية .text­decoration

 ;a {text­decoration:none
}

يمكنك أيضاً أن تفعل ذلك مع الحالات الأربع للرابط:

 ;a:link {color: blue
      ;text­decoration:none
} 
      ;a:visited {color: purple
      ;text­decoration:none
} 
       ;a:active {background­color: yellow
       ;text­decoration:none
} 
       ;a:hover {color:red
       ;text­decoration:none
}

 Next                         Back