CSS

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

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

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1823

المواضيع

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

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

</> 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>
مصطلحات الدرس
Links
Links

روابط

Style
Style

نمط أو شكل

Mouse
Mouse

فأرة المستخدم

Font-Size
Font-Size

حجم الخط

Font-Family
Font-Family

عائلة الخط

Color
Color

لون

Background
Background

خلفية

Syntax
Syntax

بناء الجملة

Selectors
Selectors

محددات

Decoration
Decoration

تزيين أو زخرفة

Property
Property

خاصية

Properties
Properties

خصائص

Cursor
Cursor

مؤشر

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.