CSS

CSS Links
الروابط في لغة CSS

سوف تتعلم في هذا الدرس التحكم في شكل الروابط عن طريق لغة CSS من حيث الألوان والحجم والخلفيات والتحكم في الروابط مع تمرير مؤشر mouse الفأرة علي الرابط.

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2429

المواضيع

24
الشروحات chevron_left CSS Links chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Links
الروابط في لغة CSS

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> CSS Link selectors
تحديد حالات الروابط في لغة CSS

عن طريق link selectors في لغة CSS تستطيع التحكم في الروابط التي قمت بزيارتها مسبقاً ويقوم المتصفح بتغيير لونها باللون المميز والمختلف ويظهر هذا اللون مع ضغط أو تمرير زر mouse الفأرة.


للروابط 4 حالات في لغة CSS:

  • a:visited للتحكم في شكل الرابط الزي قمت بزيارته وهو أن يصبح بلوم نختلف بعد زيارتة أو شكل مختلف.
  • a:link للتحكم في الرابط الافتراضي الزي يظهر على المتصفح قبل زيارتة والأفتراضي لون الأزرق ويمكن تغييرة.
  • a:hover للتحكم في شكل الرابط الزي يتم تمرير مؤشر mouse أعلي الرابط فسوف يظهر بشكل مختلف ويرجع الشكل للأفتراضي عند إبعاد مؤشر زر mouse مرة أخري.
  • a:active للتحكم في شكل الرابط الزي يتم click النقر علية بزر الماوس في هذه اللحظة فقط عند الضغط سوف يتغير الشكل إيضا أو اللون.
CSS link styles with mouse engagement

تغيير شكل الرابط مع إحتكاك mouse الفأره في لغة CSS.

a:hover
{
  color: pink;
}

</> CSS link Decoration
ديكور الروابط في لغة CSS

يمكن التحكم في الخطوط العرضية التي تظهر بشكل إفتراضي أسفل الروابط ويمكن تغيير مكانها يمكن أن يكون الخط من خلال النص أو أعلي النص في لغة CSS.
CSS link Decoration

التحكم في مكان الخطوط العرضية أسفل نصوص الروابط في لغة CSS.

a:hover {
  text-decoration: underline;
}

</> CSS Background Color
التحكم في خلفيات الروابط في لغة CSS

يمكن التحكم في خلفية الرابط التي تظهر بشكل إفتراضي ويمكن تغيير لون الخلفية في حالات معينة وهي عند الضغط والروابط التي تمت زيارتها في لغة CSS.

CSS Background Color

التحكم في خلفية ارابط في لغة CSS.

a:hover {
  background-color: lightgreen;
}

</> CSS Link Buttons
روابط علي شكل زر في لغة CSS

عن طريق لغة CSS تستطيع التحكم في أشكال links الروابط وتحويلها من رابط نصي إلي شكل Buttons زر عن طريق إضافة لها مجموعة خصائص.

CSS add border to link

إضافة إطار حول الروابط في لغة CSS.

CSS link display inline

عرض الروابط بشكل صندوق لنتحكم في الهوامش وحجمها في لغة CSS.

CSS add padding to link

إضافة هوامش داخلية للروابط في لغة CSS.

CSS remove text underline

إزالة الخط السفلي أسفل النصوص من الروابط في لغة CSS

CSS link style

إضافة تأثرات علي الزر في لغة CSS.

</> CSS link hover
تغيير شكل الرابط عند تمرير زر mouse في لغة CSS

CSS link hover

تغيير شكل الرابط عند تمرير زر mouse في لغة CSS.

</> CSS link cursor
مؤشر mouse الفأرة في لغة CSS

في لغة CSS يمكن تغيير شكل مؤشر mouse الفأرة عند تمرير المؤشر أعلي الرابط ويوجد عدة اشكال يمكن اختيار اي نوع منهم.

<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات