منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
منتديات إجلجلي Agelgele
حللتم اهلا ونزلتم سهلا في مؤسسة فينكس تكنالوجي
مؤسسة فينكس تكنالوجي ® Phoenix Technology
                      

العودة مؤسسة فينكس تكنالوجي ®



أهلا وسهلا بك في مؤسسة فينكس تكنالوجي ®
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا. كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.


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

شاطر|


بيانات كاتب الموضوع
الدرس 6: الروابط CSS
كاتب الموضوعرسالة
المعلومات
الكاتب:
اللقب:

مستخدم مجتهد

الرتبه:
مستخدم مجتهد
الصورة الرمزية

énergie
البيانات
عدد المشاركات : 200

الإتصالات
الحالة:
وسائل الإتصال:

موضوع: الدرس 6: الروابط CSS الدرس 6: الروابط CSS Empty16/11/2014, 17:42

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




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

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

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

الكود:

   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;
   }
   



  • شاهد المثال















 الموضوع الأصلي : الدرس 6: الروابط CSS // المصدر : منتديات إجلجلي Agelgele // الكاتب:énergie


énergie ; توقيع العضو




المعلومات
الكاتب:
اللقب:
مؤسس الموقع
الرتبه:
مؤسس الموقع
الصورة الرمزية

Ǥlamorous
البيانات
رسالة SMS : الحمد لله علي كل حال
ذكر
الجمهورية الجزائرية الديموقراطية الشعبية
العمر : 33
عدد المشاركات : 1609

الإتصالات
الحالة:
وسائل الإتصال:
http://www.altwer.com

موضوع: رد: الدرس 6: الروابط CSS الدرس 6: الروابط CSS Empty2/12/2014, 19:14

اذا احتوت المشاركة صورا - قم بالضغط عليها لعرضها بحجمها الطبيعي




جزاك الله كل خيرا علي الموضوع
المفيد والرقي















 الموضوع الأصلي : الدرس 6: الروابط CSS // المصدر : منتديات إجلجلي Agelgele // الكاتب:Ǥlamorous


Ǥlamorous ; توقيع العضو




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

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة

مواضيع مماثلة

» الدرس الثامن: الروابط HTML
» الدرس 2: المزودات PHP
» الدرس 15: القراءة من ملف نصي بى اتش بى
» الدرس 4: الخطوط CSS
» الدرس 5: النصوص CSS



الــرد الســـريـع
..
الرد السريع
هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة



●[ جميع حقوق النشر للمواضيع الحصرية محفوظة © phoenix™ 2015 ]●
●[ جميع المواضيع تعبر عن رؤية صاحبها ولا تمت للإدارة بصلة ]●

تحويل وبرمجة الرسام