چگونه به سبک لینک با CSS

لینک ها در صفحات وب بسیار رایج هستند، اما بسیاری از طراحان وب توانایی استفاده از آنها را با CSS برای دستکاری و مدیریت لینک هایشان ندارند. شما می توانید لینک ها را با بازدید، شناور و حالت های فعال تعریف کنید. شما همچنین می توانید با مرزها و پس زمینه ها کار کنید تا پیوندها بیشتری به پیتزاز اضافه کنید یا آنها را مانند دکمه ها یا حتی تصاویر ببینید.

بیشتر طراحان وب با تعریف سبک در برچسب "a" شروع به کار می کنند:

a {رنگ: قرمز؛ }

این همه جنبه های پیوند (شناور، بازدید و فعال) را سبک می کند. برای اینکه هر قسمت را به طور جداگانه سبک کنید، باید از کلاسهای پیوند استفاده کنید.

پیوند شبه کلاس ها

چهار نوع اساسی شبیه سازهای پیوند وجود دارد که می توانید تعریف کنید:

• : link - این سبک پیش فرض برای لینک است
• : بازدید شده - پس از کلیک روی یک لینک
• : شناور - به عنوان یک موس بر روی یک لینک (پیش کلیک کنید)
• : فعال - درست به عنوان لینک کلیک شده است

برای تعریف یک پیوند کلاس لینک، آن را با یک برچسب در انتخاب CSS خود استفاده کنید. بنابراین، برای تغییر رنگ بازدید شده از تمام لینک های خود را به خاکستری، بنویسید:

a: بازدید {color: gray؛ }

اگر شما یک پیوند کلاس پیوندی را سبک کنید، ایده خوبی است که همه آنها را سبک کنید. به این ترتیب نتایج غریبه شما را متعجب نخواهد کرد. بنابراین اگر فقط می خواهید رنگ بازدید شده را به خاکستری تغییر دهید، در حالی که تمام شبه کدهای دیگر پیوندهای شما سیاه می شوند، می توانید بنویسید:

a: link، a: hover، a: active {color: black؛ } a: بازدید {color: gray؛ }

تغییر رنگ پیوندها

محبوب ترین روش سبک لینک ها تغییر رنگ زمانی که ماوس روی آن قرار می گیرد:

a {color: # 00f؛ } a: hover {color: # 0f0؛ }

اما فراموش نکنید که شما می توانید بر روی نحوه لینک به نظر می رسد بر روی آن کلیک کنید با: property:

a {color: # 00f؛ } a: فعال {color: # f00؛ }

یا اینکه چگونه لینک به نظر می رسد پس از بازدید از آن با: property visited:

a {color: # 00f؛ } a: بازدید {color: # f0f؛ }

برای قرار دادن همه اینها با هم:

a {color: # 00f؛ } a: بازدید {color: # f0f؛ } a: hover {color: # 0f0؛ } a: فعال {color: # f00؛ }

قرار دادن پس زمینه در لینک برای اضافه کردن آیکون ها و یا گلوله

شما می توانید پس زمینه را در یک لینک به عنوان مقاله در پس زمینه شیک قرار داده، اما با کمی بازی با پس زمینه، شما می توانید یک لینک که دارای یک نماد مرتبط است ایجاد کنید. یک آیکون کوچک را انتخاب کنید، حدود 15 پیکسل تا 15 پیکسل، مگر اینکه متن شما بزرگتر باشد. پس زمینه را به یک طرف لینک قرار دهید و گزینه تکرار را بدون تکرار تنظیم کنید. سپس، لینک را بکشید تا متن درون لینک به اندازه کافی به سمت چپ یا راست منتقل شود تا آیکون را ببینید.

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

هنگامی که آیکون خود را دریافت کرده اید، می توانید یک تصویر دیگر را به عنوان نماد شناور، فعال و بازدید شده خود تنظیم کنید تا تغییر پیوند ایجاد شود:

a {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 یک اثر دکمه ای ایجاد کند.

a {border: 4px start؛ padding: 2px؛ متن دکوراسیون: هیچ؛ } a: فعال {border: 4px inset؛ }

توجه داشته باشید، هنگامی که رنگ ها را در ابتدا و درون سبک قرار دهید، مرورگرها به احتمال زیاد به همان اندازه که انتظار دارند، ارائه نمی کنند. بنابراین، در اینجا یک دکمه فانتزی با مرزهای رنگی است:

a {border-style: solid؛ border-width: 1px 4px 4px 1px؛ متن دکوراسیون: هیچ؛ padding: 4px؛ border-color: # 69f # 00f # 00f # 69f؛ }

و شما می توانید سبک های شناور و فعال یک لینک دکمه را نیز تحت تاثیر قرار دهید، فقط از آن دسته های شبه کلاس استفاده کنید:

a: link {border-style: solid؛ border-width: 1px 4px 4px 1px؛ متن دکوراسیون: هیچ؛ padding: 4px؛ border-color: # 69f # 00f # 00f # 69f؛ } a: hover {border-color: #ccc؛ }