romaissa
11-01-2013, بتوقيت غرينيتش 04:33 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط§ظ„ط¯ط±ط³ 6: [ ط§ظ„ط±ظˆط§ط¨ط· ] ط¯ظˆط±ط© html ط§ظ„ظ…ط³طھظˆظ‰ ط§ظ„ط«ط§ظ†ظٹ ظ…طھظ‚ط¯ظ… طھظ‚ظ†ظٹط© ط§ظ„ظ€ CSS (http://www.dzbatna.com/t2207077/)
http://www.alshrera.com/losha/1-losha.gif (http://www.losha.net/)
بكل الحبhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gif نلتقى من جديد
http://img141.imageshack.us/img141/1228/1z1y74h.gif
http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gif (http://www.losha.net/)http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gif (http://www.losha.net/)http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gif
http://www.alshrera.com/losha/9-losha.gif (http://www.losha.net/)
http://www.dzbatna.com/images/icons/iconrote.gif (http://sa.ae/4239505/)http://www.arabw-pearl.com/vb/images/icons/tanbeh.gif (http://sa.ae/4239505/)http://www.dzbatna.com/images/icons/iconrote.gif (http://sa.ae/4239505/) الرجاء قرائة الموضوع كاملاً وعدم الق (http://www.losha.net/)فز بين السطور لتوضيح ما قد يغيب عنك والإستفادة من إستخدام الشرح طريقة لأقصى درجة .
الدرس مفصل 6: [الروابط] دورة html المستوى الثاني متقدم تقنية الـ CSS
يمكنك أن تطبق ما تعلمته فعلاً في الدروس السابقة على الروبط
(مثال: تغيير الألوان، الخطوط، وضع خط أسفل الروابط، إلخ)
الجديد هنا أن CSS تسمح لك بتحديد خصائص مختلفة بحسب حالة الرابط إن لم يزر المستخدم الرابط أو زاره أو كان نشطاً أو كان مؤشر الفأرة فوق الرابط ،
كل هذا يمكنك من إضافة مؤثرات جميلة ومفيدة على الروابط، للتحكم بهذه التأثيرات يجب أن تستخدم ما يسمى pseudo-classes .
http://upload.dzbatna.net/upfiles/2N436803.gif- ما هي الفئة المزيفة؟
http://www.losha.net/mypictures/block-_shadow-right.png
الفئة المزيفة أو pseudo-class يسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر في HTML .
لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTML من خلال الوسم <a> لذلك يمكننا أن نستخدم a كمنتقي في CSS :
رمز Code:
a { color: blue; }
الرابط له عدة حالات ،
http://www.losha.net/mypictures/block-_shadow-right.png
فمثلاً يمكن أن يزوره المستخدم أو لا يفعل ،
لذلك يمكنك أن تستخدم فئة مزيفة لكي تحدد شكلاً مختلفاً للرابط الذي زاره المستخدم عن الرابط الذي لم يزره بعد .
رمز Code:
a:link { color: blue; }
رمز Code:
a:visited { color: red; }
استخدم a:link و a:visited للروابط التي زارها أو لم يزرهاالمستخدم ،
الروابط يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي a:active أما a:hover فهي الحالة التي يكون فيها مؤشر الفأرة فوق الرابط .
سنقوم الآن بعرض الحالات الأربع للروابط مع المزيد من الشرح طريقة والأمثلة.
http://upload.dzbatna.net/upfiles/2N436803.gif- الفئة المزيفة: "link"
http://www.losha.net/mypictures/block-_shadow-right.png
الفئة المزيفة : link تستخدم للروابط التي تقود المستخدم إلى صفحات لم يزرها .
في المثال أدناه الروابط التي لم يزرها المستخدم ستظهر بلون أزرق فاتح .
رمز Code:
a:link { color: #6699CC; }
http://upload.dzbatna.net/upfiles/2N436803.gif- الفئة المزيفة: "visited"
http://www.losha.net/mypictures/block-_shadow-right.png
الفئة المزيفة : visited تستخدم للروابط التي زارها المستخدم ،
المثال أدناه سيجعل كل الروابط التي زارها المستخدم بلون بنفسجي غامق :
رمز Code:
a:visited { color: #660099; }
http://upload.dzbatna.net/upfiles/2N436803.gif- الفئة المزيفة: "Active"
http://www.losha.net/mypictures/block-_shadow-right.png
الفئة المزيفة : active تستخدم للروابط النشطة .
في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء :
رمز Code:
a:active { background-color: #FFFF00; }
http://upload.dzbatna.net/upfiles/2N436803.gif- الفئة المزيفة: "Hover"
http://www.losha.net/mypictures/block-_shadow-right.png
الفئة المزيفة :hover تستخدم عندما يكون مؤشر الفأرة فوق الرابط .
يمكن استخدام هذه الفئة لإنشاء مؤثرات جميلة ،
فمثلاً إذا أردنا أن تكون الروابط ملونة بالبرتقالي ومائلة عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSS بهذا الشكل :
رمز Code:
a:hover { color: orange; font-style: italic; }
المثال 1: المؤثرات تظهر عندما يوضع مؤشر الفأرة على الرابط
هذه مشهورة لإنشاء مؤثرات مختلفة عندما يوضع مؤشر الفأرة على الرابط ،
لذلك سنلقي نظرة على المزيد من الأمثلة المتعلقة بالفئة الزائفة : hover .
مثال 1أ: وضع مسافات بين الحروف
كما تتذكر في الدرس مفصل 5 تعلمنا أن المسافة بين الحروف يمكن أن تعديلها باستخدام الخاصية letter-spacing ،
هذا يمكن تطبيقه على الروابط لإنشاء مؤثرات خاصة:
رمز Code:
a:hover { letter-spacing: 10px; font-weight:bold; color:red; }
مثال 1ب: الحروف الكبيرة والصغيرة
في الدرس مفصل5 (http://www.dzbatna.com/t2182410/) ألقينا نظرة على الخاصية text-transform والتي يمكنها تغيير حالة الأحرف بين الصغيرة والكبيرة ،
هذا يمكن استخدامه أيضاً كمؤثر على الروابط :
رمز Code:
a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }
في المثالين يمكن أن تأخذ فكرة عن الإمكانيات اللامتناهية لدمج بين العديد من الخصائص ،
يمكنك أن تقوم بإنشاء مؤثرات من ابتكارك ، جرب !
مثال 2: إزالة السطر من أسفل الرابط
أحد أكثر الأسئلة تكراراً هو كيف أزيل الخط من أسفل الرابط؟
يجب أن تفكر جيداً قبل أن تزيل الخط من أسفل الرابط، لأنه قد يجعل استخدام موقعك أكثر صعوبة ،
الناس اعتادوا على أن يرو الخطوط بلون أزرق وبخط أسفلها يميزها عن بقية النصوص الأخرى ،
ويعلمون أنهم يستطيعون الضغط عليها حتى والدتي تعلم ذلك !
إذا أزلت الخط من أسفل الروابط وغيرت ألوانها فأنت تزيد من فرصة عدم فهم الزائر لموقعك وتشتته وبهذا لن يستفيدوا من محتويات موقعك .
على أي حال ،
إزالة الخط من أسفل الروابط سهل جداً ،
كما تتذكر في الدرس مفصل 5 (http://www.dzbatna.com/t2182410/) الخاصية text-decoration يمكنها أن تستخدم لتحديد ما إذا كان هناك خط سيظهر أسفل النص أم لا ،
لإزالة الخط السفلي قم بوضع القيمة none للخاصية text-decoration .
رمز Code:
a { text-decoration:none; }
يمكنك أيضاً أن تفعل ذلك مع الحالات الأربع للرابط :
رمز Code:
a:link { color: blue; text-decoration:none; }
رمز Code:
a:visited { color: purple; text-decoration:none; }
رمز Code:
a:active { background-color: yellow; text-decoration:none; }
رمز Code:
a:hover { color:red; text-decoration:none; }
ملخص
في هذا الدرس مفصل تعلمنا الفئة الزائفة ،
واستخدمنا بعض الخصائص من الدروس السابقة ،
هذا يجب أن يعطيك فكرة عن الإمكانيات التي تستطيع CSS أن تقدمها .
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/IrK49652.gif تهانينا !
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifلقد إنتهى الدرس مفصلhttp://www.losha.net/vb/images/smilies/vip/sm258.gif !
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifيتبع
http://upload.dzbatna.net/upfiles/rnI37149.gif- يستقبل الاستفسارات
الاخ الفاضل / ثامر الصعيدي (http://www.dzbatna.com/u57988/)
كل يوم من الساعة 7.30 مساء حتى الساعة 10 .
http://upload.dzbatna.net/upfiles/uRY02504.png http://upload.dzbatna.net/upfiles/5fW74184.gif
ولله الحمد تم الدرس مفصل السادس
فإن كان به خطأ فإنه منى وأنسانى إياه الشيطان الرجيم
وإن أصبت فإنه من فضل الله عز وجل علينا
http://www.losha.net/mypictures/fasl02.gif
وفي ختام هذا الشرح طريقة أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ….
http://i151.photobucket.com/albums/s133/moooon_light30/icons/1.gif (http://www.losha.net/)
سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha
http://www.alshrera.com/losha/4-losha.gif
مصدر الدرس مفصل : الدرس مفصل 6: [ الروابط ] دورة html المستوى الثاني متقدم تقنية الـ CSS (http://www.losha.net/p1362/)
http://www.losha.net/wp-content/themes/sahifa/images/logo.png (http://www.losha.net/)
http://www.losha.net/mypictures/reputation.gif (http://www.dzbatna.com/reputation.php?p=19662342)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://www.alshrera.com/losha/1-losha.gif (http://www.losha.net/)
بكل الحبhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gif نلتقى من جديد
http://img141.imageshack.us/img141/1228/1z1y74h.gif
http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gifhttp://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gif (http://www.losha.net/)http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gifhttp://files.maas1.com/images_cache/111113000531Oj7v.gif (http://www.losha.net/)http://www.ct-7ob.com/vb/storeimg/live_1340998091_503.gif
http://www.alshrera.com/losha/9-losha.gif (http://www.losha.net/)
http://www.dzbatna.com/images/icons/iconrote.gif (http://sa.ae/4239505/)http://www.arabw-pearl.com/vb/images/icons/tanbeh.gif (http://sa.ae/4239505/)http://www.dzbatna.com/images/icons/iconrote.gif (http://sa.ae/4239505/) الرجاء قرائة الموضوع كاملاً وعدم الق (http://www.losha.net/)فز بين السطور لتوضيح ما قد يغيب عنك والإستفادة من إستخدام الشرح طريقة لأقصى درجة .
الدرس مفصل 6: [الروابط] دورة html المستوى الثاني متقدم تقنية الـ CSS
يمكنك أن تطبق ما تعلمته فعلاً في الدروس السابقة على الروبط
(مثال: تغيير الألوان، الخطوط، وضع خط أسفل الروابط، إلخ)
الجديد هنا أن CSS تسمح لك بتحديد خصائص مختلفة بحسب حالة الرابط إن لم يزر المستخدم الرابط أو زاره أو كان نشطاً أو كان مؤشر الفأرة فوق الرابط ،
كل هذا يمكنك من إضافة مؤثرات جميلة ومفيدة على الروابط، للتحكم بهذه التأثيرات يجب أن تستخدم ما يسمى pseudo-classes .
http://upload.dzbatna.net/upfiles/2N436803.gif- ما هي الفئة المزيفة؟
http://www.losha.net/mypictures/block-_shadow-right.png
الفئة المزيفة أو pseudo-class يسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر في HTML .
لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTML من خلال الوسم <a> لذلك يمكننا أن نستخدم a كمنتقي في CSS :
رمز Code:
a { color: blue; }
الرابط له عدة حالات ،
http://www.losha.net/mypictures/block-_shadow-right.png
فمثلاً يمكن أن يزوره المستخدم أو لا يفعل ،
لذلك يمكنك أن تستخدم فئة مزيفة لكي تحدد شكلاً مختلفاً للرابط الذي زاره المستخدم عن الرابط الذي لم يزره بعد .
رمز Code:
a:link { color: blue; }
رمز Code:
a:visited { color: red; }
استخدم a:link و a:visited للروابط التي زارها أو لم يزرهاالمستخدم ،
الروابط يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي a:active أما a:hover فهي الحالة التي يكون فيها مؤشر الفأرة فوق الرابط .
سنقوم الآن بعرض الحالات الأربع للروابط مع المزيد من الشرح طريقة والأمثلة.
http://upload.dzbatna.net/upfiles/2N436803.gif- الفئة المزيفة: "link"
http://www.losha.net/mypictures/block-_shadow-right.png
الفئة المزيفة : link تستخدم للروابط التي تقود المستخدم إلى صفحات لم يزرها .
في المثال أدناه الروابط التي لم يزرها المستخدم ستظهر بلون أزرق فاتح .
رمز Code:
a:link { color: #6699CC; }
http://upload.dzbatna.net/upfiles/2N436803.gif- الفئة المزيفة: "visited"
http://www.losha.net/mypictures/block-_shadow-right.png
الفئة المزيفة : visited تستخدم للروابط التي زارها المستخدم ،
المثال أدناه سيجعل كل الروابط التي زارها المستخدم بلون بنفسجي غامق :
رمز Code:
a:visited { color: #660099; }
http://upload.dzbatna.net/upfiles/2N436803.gif- الفئة المزيفة: "Active"
http://www.losha.net/mypictures/block-_shadow-right.png
الفئة المزيفة : active تستخدم للروابط النشطة .
في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء :
رمز Code:
a:active { background-color: #FFFF00; }
http://upload.dzbatna.net/upfiles/2N436803.gif- الفئة المزيفة: "Hover"
http://www.losha.net/mypictures/block-_shadow-right.png
الفئة المزيفة :hover تستخدم عندما يكون مؤشر الفأرة فوق الرابط .
يمكن استخدام هذه الفئة لإنشاء مؤثرات جميلة ،
فمثلاً إذا أردنا أن تكون الروابط ملونة بالبرتقالي ومائلة عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSS بهذا الشكل :
رمز Code:
a:hover { color: orange; font-style: italic; }
المثال 1: المؤثرات تظهر عندما يوضع مؤشر الفأرة على الرابط
هذه مشهورة لإنشاء مؤثرات مختلفة عندما يوضع مؤشر الفأرة على الرابط ،
لذلك سنلقي نظرة على المزيد من الأمثلة المتعلقة بالفئة الزائفة : hover .
مثال 1أ: وضع مسافات بين الحروف
كما تتذكر في الدرس مفصل 5 تعلمنا أن المسافة بين الحروف يمكن أن تعديلها باستخدام الخاصية letter-spacing ،
هذا يمكن تطبيقه على الروابط لإنشاء مؤثرات خاصة:
رمز Code:
a:hover { letter-spacing: 10px; font-weight:bold; color:red; }
مثال 1ب: الحروف الكبيرة والصغيرة
في الدرس مفصل5 (http://www.dzbatna.com/t2182410/) ألقينا نظرة على الخاصية text-transform والتي يمكنها تغيير حالة الأحرف بين الصغيرة والكبيرة ،
هذا يمكن استخدامه أيضاً كمؤثر على الروابط :
رمز Code:
a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }
في المثالين يمكن أن تأخذ فكرة عن الإمكانيات اللامتناهية لدمج بين العديد من الخصائص ،
يمكنك أن تقوم بإنشاء مؤثرات من ابتكارك ، جرب !
مثال 2: إزالة السطر من أسفل الرابط
أحد أكثر الأسئلة تكراراً هو كيف أزيل الخط من أسفل الرابط؟
يجب أن تفكر جيداً قبل أن تزيل الخط من أسفل الرابط، لأنه قد يجعل استخدام موقعك أكثر صعوبة ،
الناس اعتادوا على أن يرو الخطوط بلون أزرق وبخط أسفلها يميزها عن بقية النصوص الأخرى ،
ويعلمون أنهم يستطيعون الضغط عليها حتى والدتي تعلم ذلك !
إذا أزلت الخط من أسفل الروابط وغيرت ألوانها فأنت تزيد من فرصة عدم فهم الزائر لموقعك وتشتته وبهذا لن يستفيدوا من محتويات موقعك .
على أي حال ،
إزالة الخط من أسفل الروابط سهل جداً ،
كما تتذكر في الدرس مفصل 5 (http://www.dzbatna.com/t2182410/) الخاصية text-decoration يمكنها أن تستخدم لتحديد ما إذا كان هناك خط سيظهر أسفل النص أم لا ،
لإزالة الخط السفلي قم بوضع القيمة none للخاصية text-decoration .
رمز Code:
a { text-decoration:none; }
يمكنك أيضاً أن تفعل ذلك مع الحالات الأربع للرابط :
رمز Code:
a:link { color: blue; text-decoration:none; }
رمز Code:
a:visited { color: purple; text-decoration:none; }
رمز Code:
a:active { background-color: yellow; text-decoration:none; }
رمز Code:
a:hover { color:red; text-decoration:none; }
ملخص
في هذا الدرس مفصل تعلمنا الفئة الزائفة ،
واستخدمنا بعض الخصائص من الدروس السابقة ،
هذا يجب أن يعطيك فكرة عن الإمكانيات التي تستطيع CSS أن تقدمها .
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/IrK49652.gif تهانينا !
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifلقد إنتهى الدرس مفصلhttp://www.losha.net/vb/images/smilies/vip/sm258.gif !
http://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifhttp://upload.dzbatna.net/upfiles/5fW74184.gifيتبع
http://upload.dzbatna.net/upfiles/rnI37149.gif- يستقبل الاستفسارات
الاخ الفاضل / ثامر الصعيدي (http://www.dzbatna.com/u57988/)
كل يوم من الساعة 7.30 مساء حتى الساعة 10 .
http://upload.dzbatna.net/upfiles/uRY02504.png http://upload.dzbatna.net/upfiles/5fW74184.gif
ولله الحمد تم الدرس مفصل السادس
فإن كان به خطأ فإنه منى وأنسانى إياه الشيطان الرجيم
وإن أصبت فإنه من فضل الله عز وجل علينا
http://www.losha.net/mypictures/fasl02.gif
وفي ختام هذا الشرح طريقة أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ….
http://i151.photobucket.com/albums/s133/moooon_light30/icons/1.gif (http://www.losha.net/)
سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha
http://www.alshrera.com/losha/4-losha.gif
مصدر الدرس مفصل : الدرس مفصل 6: [ الروابط ] دورة html المستوى الثاني متقدم تقنية الـ CSS (http://www.losha.net/p1362/)
http://www.losha.net/wp-content/themes/sahifa/images/logo.png (http://www.losha.net/)
http://www.losha.net/mypictures/reputation.gif (http://www.dzbatna.com/reputation.php?p=19662342)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
