آموزش استایل دهی به لینک ها Link در css

بازدید: 610 بازدید
link style

در ادامه سری آموزشهای css، امروز با مبحث لینک link، و کار با آن در خدمت شماهستیم.

شما میتوانید پس از اتمام این آموزش، به لینک های خود ظاهری متفاوت بدهید. و یا آنها را صورت دکمه قرار دهید. و یا افکت ها(جلوه های) مختلف بصری آنها را شکیل تر کنید.

مثل همیشه با ما همراه باشید.

با سلام خدمت شما همراهان وفادار و همیشگی سایت پرنیان طرح

در اموزش امروز از سری مباحث css، کار کردن با لینک link را مرور خواهیم کرد. با ما همراه باشید.

 

لینک Link چیست؟

لینک link، در صفحات وب سایت، به منزله زنجیری است که یک صفحه (page) را به صفحه ای دیگر متصل میکند.

این اتصال میتواند داخلی یا خارجی باشد.(آموزش لینک را در گوگل وبمستر بخوانید)

اتصال داخلی، یعنی یکی از صفحات سایت را به صفحه دیگری در همان سایت لینک بدهیم.

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

باید توجه داشته باشید، استفاده از لینک های مرتبط و درست در صفحات سایت، باعث بهبود رنک سایت شما در الکسا خواهد شد.

 

چه تنظیماتی روی لینک link میتوان اعمال کرد؟

قبل از هر چیز باید با تگ <a> و لینک ها در html آشنا باشید میتواند آموزش تگ <a> را از سایت پرنیان طرح در این لینک مطالعه کنید.

شما میتوانید رنگ(color)،فونت (font-family) ،و پس زمینه (background)  را برای لینک ها در css شخصی سازی کنید.

همچنین میتوانید تنظیمات زیر را در بخش کدهای css روی لینک هایتان اعمال کنید. این تغییرات مربوط به ظاهر لینک و عملکرد آنها در هنگام حرکت و کلیک ماوس است.

  • a: link : لینک ساده. با کلیک روی این لینک، کاربر به مقصد لینک اتصال داده میشود.
  • a:visited : یک لینک که کاربر قبلا روی ان کلیک کرده است. این قابلیت را میتوانید در بخش search google مشاهده کنید
  • a:hover : یک لینک که وقتی ماوس روی آن قرار میگیرد، حتی بدون کلیک کردن، تغییر شکل وظاهر میدهد. مثلا رنگ یا طرح آن تغییر میکند.
  • a:active : لینکی است که درحال حاضر کاربر روی ان کلیک کرده است. یا به عبارت دیگر، لینک فعال فعلی است.

تنظیمات لینک

نحوه کدنویسی برای این لینک ها در css به صورت زیر است:

[php]
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
[/php]

میتوانید نمونه ها را از اینجا مشاهده کنید.

[cdb_icon_box icon_style=”icon-font” icon=”fa fa-pencil-square-o” icon_position=”left” icon_type=”normal” icon_size=”icon-box-large” title=”یک نکته حرفه ای” title_text_transform=”” title_text_font_weight=”” icon_color=”#0b6bbf”]اگر بخواهید از چند استایل به طور همزمان برای یک لینک استفاده کنید. باید این قوانین را رعایت کنید:

1- a: hover باید بعد از a:link و a:visited کدنویسی شود.

2- a:active باید بعد از a:hover کدنویسی شود.[/cdb_icon_box]

Text Decoration

این ویژگی کمک میکند جلوه های بصری به لینک ها اضافه و یا حذف کنید. در بیشتر مواقع از این ویژگی برای حذف زیرخط لینک ها استفاده میشود.

کدهای مربوط به تنظیمات :

[php]
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
[/php]

نتایج را از اینجا ببینید.

 

background-color 

این ویژگی، همانطور که از نام آن مشخص است، برای تنظیم رنگ پس زمینه لینک استفاده می شود.

کدنویسی های مربوط به تنظیمات آن:

[php]
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
[/php]

نتایج را از اینجا ببینید.

Advanced – Link Buttons

با استفاده از این ویژگی میتوانید، لینک را به شکل یک دکمه پیاده سازی کرده و آنرا شخصی سازی نیز کنید.

کافیست کدهای زیر را در بخش css وارد کنید:

[php]
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
[/php]

نتایح را از اینجا ببینید.

میخواهم درباره لینک بیشتر بدانم و تمرین کنم.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.