مولاتى

بســــــم الله الرحمن الرحيم


<meta name="propeller" content="7edb445ea1f8a84d8d2c566f754a8268" />
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا


او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي


سنتشرف بتسجيلك


شكرا
ادارة المنتدي

مولاتى


 
البوابةالرئيسيةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

شاطر | 
 

 الدرس 6: الروابط

اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
Admin
avatar

الساعة الأن :
الدوله :
ذكر عدد المساهمات : 210
نقاط : 6835
تاريخ التسجيل : 25/11/2014
العمر : 31
الموقع : www.moulati.arab.st

مُساهمةموضوع: الدرس 6: الروابط   الثلاثاء ديسمبر 16, 2014 4:22 am

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

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

الفئة المزيفة أو pseudo-class يسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر في HTML.
لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTML من خلال الوسم 

الكود:
<a>

 لذلك يمكننا أن نستخدم 

الكود:
a

 كمنتقي في CSS:


الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   a {[/size][/center]

[center][size=16]      color: blue;[/size][/center]
   }

[center][size=16]   [/size][/center]






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

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]a:link[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      color: blue;[/size][/center]
   }


[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]a:visited[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      color: red;[/size][/center]
   }

[center][size=16]   [/size][/center]






استخدم 

الكود:
a:link

 و

الكود:
a:visited

 للروابط التي زارها أو لم يزرهاالمستخدم، الروابط يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي 

الكود:
a:active

 أما 

الكود:
a:hover

فهي الحالة التي يكون فيها مؤشر الفأرة فوق الرابط.

سنقوم الآن بعرض الحالات الأربع للروابط مع المزيد من الشرح والأمثلة.

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

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

الكود:
:link

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

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

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]a:link[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      color: #6699CC;[/size][/center]
   }

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


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

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

الكود:
:visited

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


الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]a:visited[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      color: #660099;[/size][/center]
   }

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


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

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

الكود:
:active

 تستخدم للروابط النشطة.

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

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]a:active[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      background-color: #FFFF00;[/size][/center]
   }

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


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

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

الكود:
:hover

 تستخدم عندما يكون مؤشر الفأرة فوق الرابط.

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

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]a:hover[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      color: orange;[/size][/center]

[center][size=16]      font-style: italic;[/size][/center]
   }

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


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

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

الكود:
:hover

.

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

كما تتذكر في [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط] تعلمنا أن المسافة بين الحروف يمكن أن تعديلها باستخدام الخاصية 

الكود:
letter-spacing

، هذا يمكن تطبيقه على الروابط لإنشاء مؤثرات خاصة:


الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]a:hover[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      letter-spacing: 10px;[/size][/center]
      font-weight:bold;

[center][size=16]   [/size][/center]
      color:red;

[center][size=16]   }[/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


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

في [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط] ألقينا نظرة على الخاصية 

الكود:
text-transform

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


الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   [/size][/size][/font][b][size=16]a:hover[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] {[/size][/size][/font][/center]

[center][size=16]      text-transform: uppercase;[/size][/center]
      font-weight:bold;

[center][size=16]      background-color:yellow;[/size][/center]
      color:blue;
   }

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


في المثالين يمكن أن تأخذ فكرة عن الإمكانيات اللامتناهية لدمج بين العديد من الخصائص، يمكنك أن تقوم بإنشاء مؤثرات من ابتكارك، جرب!

مثال 2: إزالة السطر من أسفل الرابط

أحد أكثر الأسئلة تكراراً هو كيف أزيل الخط من أسفل الرابط؟
يجب أن تفكر جيداً قبل أن تزيل الخط من أسفل الرابط، لأنه قد يجعل استخدام موقعك أكثر صعوبة، الناس اعتادوا على أن يرو الخطوط بلون أزرق وبخط أسفلها يميزها عن بقية النصوص الأخرى، ويعلمون أنهم يستطيعون الضغط عليها حتى والدتي تعلم ذلك! إذا أزلت الخط من أسفل الروابط وغيرت ألوانها فأنت تزيد من فرصة عدم فهم الزائر لموقعك وتشتته وبهذا لن يستفيدوا من محتويات موقعك.
على أي حال، إزالة الخط من أسفل الروابط سهل جداً، كما تتذكر في [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط] الخاصية 

الكود:
text-decoration

 يمكنها أن تستخدم لتحديد ما إذا كان هناك خط سيظهر أسفل النص أم لا، لإزالة الخط السفلي قم بوضع القيمة none للخاصية 

الكود:
text-decoration

.


الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   a {[/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]      [/size][/size][/font][b][size=16]text-decoration:none;[/size][/b][/center]

[center][size=16]   }[/size][/center]

[center][size=16]   [/size][/center]






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

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   a:link {[/size][/center]

[center][size=16]      color: blue;[/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]      [/size][/size][/font][b][size=16]text-decoration:none;[/size][/b][/center]

[center][size=16]   }[/size][/center]


[center][size=16]   a:visited {[/size][/center]

[center][size=16]      color: purple;[/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]      [/size][/size][/font][b][size=16]text-decoration:none;[/size][/b][/center]

[center][size=16]   }[/size][/center]


[center][size=16]   a:active {[/size][/center]

[center][size=16]      background-color: yellow;[/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]      [/size][/size][/font][b][size=16]text-decoration:none;[/size][/b][/center]

[center][size=16]   }[/size][/center]


[center][size=16]   a:hover {[/size][/center]

[center][size=16]      color:red;[/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]      [/size][/size][/font][b][size=16]text-decoration:none;[/size][/b][/center]

[center][size=16]   }[/size][/center]

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


ملخص

في هذا الدرس تعلمنا الفئة الزائفة، واستخدمنا بعض الخصائص من الدروس السابقة، هذا يجب أن يعطيك فكرة عن الإمكانيات التي تستطيع CSS أن تقدمها.
في [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط] سنعلمك كيف تحدد خصائص معينة لمجموعة من العناصر أو لعنصر معين.


قناة المعلم التعليميه للشروحات المصوره والشروحات التعليميه والثقافيه والفنيه والتكنلوجيا
نحن نؤمن بأنه ليس هناك رجلا يعرف كل شئ ولكننا نؤمن بتبادل الافكار
اذا اعجبكم الشرح ارجو ان تضغطو على زر ( اعجاب + مشاركه )
ومتابعتنا على قناة المعلم عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

ومتابعتنا عبر صفحتنا فى الفيس بوك عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://moulati.arab.st
 
الدرس 6: الروابط
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
مولاتى :: youtube :: قناة المُعلم :: دروس شامله وكامله لتتعلم كل شئ عن الـ CSS وكيفية التعامل بيها وما هيا الـ CSS-
انتقل الى: