منتديات مدينة الاحلام

فيس بوك مدينة الاحلام twitter RSS 

 
 

 

 

معجبو مدينة الاحلام علي الفيس بوك

  #1  
قديم 05 - 02 - 2011, 19:12
php pro غير متصل
..:: من سكان المدينة ::..
 


php pro is on a distinguished road
Smile شرح عرض الروابط css










شرح عرض الروابط css

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

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


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

[PHP] a:link {
color: blue;
}

a:visited {
color: red;
}

[/PHP]

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

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

[PHP]
a:link {
color: #6699CC;
}

[/PHP]

شاهد مثال:
الفئة المزيفة: visited

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

[PHP] a:visited {
color: #660099;
}

[/PHP]

شاهد مثال :
الفئة المزيفة: active

الفئة المزيفة :active تستخدم للروابط النشطة.
في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء:
[PHP]
a:active {
background-color: #FFFF00;
}

[/PHP]

شاهد مثال :
الفئة المزيفة: hover

الفئة المزيفة :hover تستخدم عندما يكون مؤشر الفأرة فوق الرابط.
يمكن استخدام هذه الفئة لإنشاء مؤثرات جميلة، فمثلاً إذا أردنا أن تكون الروابط ملونة بالبرتقالي ومائلة عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSS بهذا الشكل:
[PHP]a:hover {
color: orange;
font-style: italic;
}

[/PHP]

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

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

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

[PHP] a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
[/PHP]

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

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

[PHP]
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

[/PHP]

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

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

[PHP] a {
text-decoration:none;
}

[/PHP]

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

[PHP] 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;
}

[/PHP]

ملخص

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


avp uvq hgv,hf' css

 
 
 
 
 





رد مع اقتباس
قديم 17 - 02 - 2011, 15:00   رقم المشاركة : [2]
موقوف
 

triblehhhh is on a distinguished road
افتراضي رد: شرح عرض الروابط css

thnxxxxxxxxxxxxxxxxx


triblehhhh غير متصل   رد مع اقتباس
قديم 29 - 06 - 2011, 16:29   رقم المشاركة : [3]
موقوف
 

خفقات قلب is on a distinguished road
افتراضي رد: شرح عرض الروابط css

جهد رائع ومميز

الى الامام دوما

دمت بود وخير


خفقات قلب غير متصل   رد مع اقتباس
قديم 10 - 07 - 2011, 15:36   رقم المشاركة : [4]
..:: زائر مقيم ::..
 

aliahmed is on a distinguished road
افتراضي رد: شرح عرض الروابط css

مشكووووووووووووووووووووووووووور


aliahmed غير متصل   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
الروابط, css, شرح, عرض

أدوات الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
برنامج مولد الروابط البريمير لموقع الهوت فيل Hotfile Premium Link Generator 1.4 & Speed Hotfile Uploader 2010 tarektop قسم البرامج , برامج مجانية 30 04 - 03 - 2011 00:40
أجعل جهازك من أجمل الأجهزة فى العالم!!!!!(تحديث الروابط) ibm1000 قسم البرامج , برامج مجانية 13 05 - 11 - 2010 11:33
كيف يقيم جوجل أهمية صفحتك؟ php pro قسم تطوير المواقع و المنتديات 1 09 - 10 - 2010 05:10
شرح حمايه الروابط بموقع takemyfile المشاكس1 قسم الكمبيوتر والانترنت 6 19 - 07 - 2010 09:47
موقعك و جوجل و الـ PageRank - دراسة مفصلة php pro قسم تطوير المواقع و المنتديات 1 27 - 09 - 2008 15:01


الساعة الآن 04:36.

    Powered by vBulletin Version 3.8.7
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd
ترقية وتطوير: مجموعة الدعم العربى
  

SEO by vBSEO