كيف تصمم الروابط مع المغلق

الروابط شائعة جدًا على صفحات الويب ، ولكن العديد من مصممي الويب لا يدركون القدرة التي لديهم مع CSS على التعامل مع روابطهم وإدارتها بفعالية. يمكنك تعريف الارتباطات بزيارات الزيارة ، والتمرير ، والحالة النشطة. يمكنك أيضًا العمل مع الحدود والخلفيات لإعطاء الروابط الخاصة بك أكثر pizzaz أو جعلها تبدو وكأنها أزرار أو حتى الصور.

يبدأ معظم مصممي الويب بتحديد نمط على العلامة "a":

{لون: أحمر؛ }

سيؤدي ذلك إلى تنسيق جميع جوانب الرابط (تحوم ، وزار ، ونشط). لتصميم كل جزء على حدة ، يجب عليك استخدام فئات زائفة الارتباط.

ربط الزائفة الطبقات

هناك أربعة أنواع أساسية لصفوف الارتباط الزائفة التي يمكنك تحديدها:

• : الرابط - هذا هو النمط الافتراضي للرابط
• : زار - بعد أن تم النقر على الرابط
• : تحوم - حيث أن الماوس مرتبط عبر الرابط (النقر المسبق)
• : active - right as the link is clicked

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

a: زار {color: gray؛ }

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

a: link، a: hover، a: active {color: black؛ } a: زار {color: gray؛ }

تغيير ألوان الوصلة

الطريقة الأكثر شيوعًا لروابط النمط هي تغيير اللون عندما يمر الماوس فوقه:

{اللون: # 00f؛ } a: hover {color: # 0f0؛ }

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

{اللون: # 00f؛ } a: active {color: # f00؛ }

أو كيف يبدو الرابط بعد زيارتك له: الموقع الذي تمت زيارته:

{اللون: # 00f؛ } a: زار {color: # f0f؛ }

لوضع كل ذلك معا:

{اللون: # 00f؛ } a: زار {color: # f0f؛ } a: hover {color: # 0f0؛ } a: active {color: # f00؛ }

وضع خلفيات على وصلات لإضافة الرموز أو التعداد النقطي

يمكنك وضع خلفية على ارتباط كما في مقالة خلفيات أنيقة ، ولكن من خلال اللعب مع الخلفية قليلاً ، يمكنك إنشاء ارتباط يحتوي على رمز مقترن. اختر رمزًا صغيرًا ، حوالي 15 بكسل × 15 بكسل ، ما لم يكن النص أكبر. ضع الخلفية على جانب واحد من الرابط وقم بتعيين خيار التكرار على عدم التكرار. ثم ، قم بتبديل الرابط بحيث يتم نقل النص الموجود داخل الارتباط بما يكفي إلى اليسار أو اليمين لرؤية الرمز.

{padding: 0 2px 1px 15px؛ background: #fff url (ball.gif) left center no-repeat؛ اللون: # c00؛ }

بعد الحصول على الرمز ، يمكنك تعيين صورة مختلفة كرموز التمرير والتنشيط والمزارة الخاصة بك لإجراء تغيير الرابط:

{padding: 0 2px 1px 15px؛ background: #fff url (ball.gif) left center no-repeat؛ اللون: # c00؛ } a: hover {background: #fff url (ball2.gif) left center no-repeat؛ } a: active {background: #fff url (ball3.gif) left center no-repeat؛ }

جعل الروابط الخاصة بك تبدو وكأنها أزرار

تحظى الأزرار بشعبية كبيرة ، ولكن حتى جاء CSS ، كان عليك إنشاء أزرار باستخدام الصور ، مما يجعل صفحاتك تستغرق وقتًا أطول لتحميلها. لحسن الحظ ، هناك نمط حدود يمكن أن يساعدك في إنشاء تأثير شبيه بالزر بسهولة مع CSS.

{border: 4px startet؛ الحشو: 2px؛ زخرفة النص: لا شيء ؛ } a: active {border: 4px inset؛ }

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

نمط {border: solid؛ border-width: 1px 4px 4px 1px؛ زخرفة النص: لا شيء ؛ الحشو: 4px؛ border-color: # 69f # 00f # 00f # 69f؛ }

ويمكنك التأثير على التحويم والأنماط النشطة لزر الزر كذلك ، فقط استخدم تلك الفئات الزائفة:

a: link {border-style: solid؛ border-width: 1px 4px 4px 1px؛ زخرفة النص: لا شيء ؛ الحشو: 4px؛ border-color: # 69f # 00f # 00f # 69f؛ } a: hover {border-color: #ccc؛ }