با سلام خدمت شما همراهان وفادار و همیشگی سایت پرنیان طرح
در اموزش امروز از سری مباحث 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]
میتوانید نمونه ها را از اینجا مشاهده کنید.
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]
نتایح را از اینجا ببینید.